将 jQuery 的 eq() 转换为 Greensock？

Question

我想使用 GSAP (Greensock) 为某个 class 的一堆 div 的不透明度设置动画。这是我一直在使用的工作 jQuery 函数，但不知道如何将它转换为 GSAP：

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

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

Answer 1

function showEvents() {

    TweenMax.to(eventList.eq(eventCount++), 0.150, { 
        autoAlpha: 1, 
        ease: Power1.easeInOut, 
        onComplete: showEvents});
}

这里：

TweenMax : 是具有执行 GSAP 动画功能的模块。

.to: 是 'animate to' 的方法。意思是，它会改变你的 selected 元素的状态，并使它们达到给定的状态。还有另一种方法'from'，这意味着'amimate from'给定参数中的条件到当前条件。

参数：

第一个参数 是 select 或者 select 您要更改的元素。如果您使用 JQuery，您可以使用 jquery select 或

第二个参数是以秒为单位的动画持续时间。在我的例子中是 150 毫秒。

第三个参数是动画参数。您可以详细查看它们 here about TimelineLite. In this example, "autoAlpha: 0" means selected elements will have alpha zero at end of the animation (i.e. after 1 second). "ease: Power1.easeInOut" is ease method that you want to perform. There are many ease that you can checkout and select which you want. See jumpstart tutorial of GreenSock to see ease methods 的实际效果。

Answer 2

如果您的目标是以顺序方式（一个接一个）为它们制作动画，您可以这样做：

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

注意持续时间（第二个参数，0.15 秒）与交错量（第四个参数，0.15 秒）相同，因此它们运行背靠背。但是您可以使用这些值来使事物稍微重叠或随心所欲。

如果您需要能够控制整个 group/sequence（例如 pause/resume/reverse/timeScale），您可以使用 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/ 上的 "getting started" 视频，我强烈建议您观看。一旦掌握了 API 的窍门，您可能会爱上它并意识到您可以做更多的事情。

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

将 jQuery 的 eq() 转换为 Greensock？

Convert jQuery's eq() to Greensock?

javascript

jquery

animation

gsap