javascript - GSAP 重复交错循环

Question

我有以下 3 个 HTML 元素:

<div class="item"><h2>Item 1</h2></div>
<div class="item"><h2>Item 2</h2></div>
<div class="item"><h2>Item 3</h2></div>

以及以下 JavaScript:

var timeline = new TimelineMax({paused:true, repeat: -1});
timeline.staggerFromTo($('.item'), 1, {css:{x: -20, opacity: 0}, delay: 0.15, ease:Elastic.easeOut}, 0.5);
timeline.play();

它有效，但这不是我想要的行为。

现在如何运作:项目 1 淡入 > 项目 2 淡入 > 项目 3 淡入

我希望它如何工作:项目 1 淡入 > 项目 1 淡出 > 项目 2 淡入 > 项目 2 淡出 > 项目 3 淡入 > 项目 3 淡出

Answer 1

以下有帮助吗？

片段:

var items = document.querySelectorAll('.item'), length = items.length;
var duration = 1;
var tl = new TimelineMax({ paused:true, repeat: -1, delay: duration * 0.5 });
for (var i = 0; i < length; i += 1) {
    tl.from(items[i], duration, { x: -20, opacity: 0, ease: Elastic.easeOut });
    tl.to(items[i], duration, { x: -20, opacity: 0, ease: Elastic.easeIn });
}
tl.play();

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="item"><h2>Item 1</h2></div>
<div class="item"><h2>Item 2</h2></div>
<div class="item"><h2>Item 3</h2></div>

如果我没记错的话，.staggerFromTo()此处无济于事，因为您需要首先将同一元素的 2 个补间添加到时间轴中，一个用于淡入，一个用于淡出。因此，使用了循环。然后是典型的 .from()和 .to()使用 GSAP 中的方法来实现淡入淡出效果。

此外，我不确定为什么要对每个补间应用 delay。我已将它移动到 TimelineMax 的初始化中，假设您想在它第一次开始之前延迟整个动画序列。

希望这对您有所帮助。