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秒）相同，因此它们背对背地运行。但是你可以使用这些值来让事情稍微重叠或者你想要什么。

如果您需要能够控制整个组/序列（如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/观看“入门”视频。一旦掌握了API，你可能会喜欢它并意识到你可以做多少。

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

Answer 2

function showEvents() {

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

下面：

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

.to：是'动画'的方法。意味着，它将改变您所选元素的状态并使它们达到给定条件。还有另一种方法'from'，意思是'从'参数中的给定条件到当前条件的动态。

参数：

第一个参数是选择器，选择要更改的元素。如果您使用的是JQuery，则可以使用jquery选择器。

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

第三个参数是动画参数。您可以在详细信息here about TimelineLite中查看它们。在这个例子中，“autoAlpha：0”表示所选元素在动画结束时（即1秒后）将具有α零。 “ease：Power1.easeInOut”是您想要执行的简易方法。您可以通过签出和选择所需的内容轻松许多。请参阅Green {jumpstart GreenSock教程，了解ease methods的实际效果。

将jQuery＆＃39; sq（）转换为Greensock？

2 个答案: