javascript - 将 jQuery 的 eq() 转换为 Greensock？

Question

我想使用 GSAP (Greensock) 来为某个类的一堆 div 的不透明度设置动画。这是我一直在使用的有效 jQuery 函数，但不知道如何将其转换为 GSAP:

function showEvents() {
    eventList.eq(eventCount++).animate({
        opacity: 1
    }, 150, showEvents);
};
showEvents();

如您所见，当所有 eventList 项目都已动画化时，它会停止触发...如何使用 GSAP 执行此操作？

Answer 1

如果您的目标是按顺序(一个接一个)为它们设置动画，您可以这样做:

TweenMax.staggerTo(eventList, 0.15, {opacity:1}, 0.15);

请注意，持续时间(第二个参数，0.15 秒)与交错量(第四个参数，0.15 秒)相同，因此它们是背靠背运行的。但是您可以使用这些值来使事情稍微重叠或任何您想要的。

<小时/>

如果您需要能够控制整个组/序列(例如暂停/恢复/反向/时间缩放)，您可以使用 TimelineLite:

var tl = new TimelineLite();
tl.staggerTo(eventList, 0.15, {opacity:1}, 0.15);

//now you can control everything like:
tl.pause();
tl.resume();
tl.restart();
tl.seek(0.6);
tl.timeScale(0.5); //half speed
...

我强烈建议观看“入门”视频:http://greensock.com/get-started-js/如果你还没有。一旦掌握了 API 的窍门，您可能会喜欢它并意识到您可以做更多的事情。

注意:@Yogee 建议使用 TimelineLite.to() 但没有这样的静态方法。这是一个实例方法。所以他的代码行不通。我确信他只是想使用 TweenMax 或 TimelineLite 的实例方法:)