1

我正在用 jquery 和 greensock tweenlite/timelinemax 制作幻灯片横幅。我在下面有一些代码，想知道如何以更好的方式编写它？

e1, e2, e3, e4 是图像和不透明度 = 0 的 div。例如，我希望 '.e1' 在 5 秒内从 y:0 飞到 y:-90，我希望 '.e1' 同时在 0.5 秒内淡入。

下面是我的代码，希望有人可以优化它：

var tweenA = TweenLite.to(".e1", 5, {top:"-90px", ease:Linear.easeNone});
tweenA = TweenLite.to(".e1", 2, {opacity:1});

tweenA = TweenLite.to(".e2", 5.5, {top:"-70px", delay:4, ease:Linear.easeNone, onComplete:function(){objHide(".e1")} });
tweenA = TweenLite.to(".e2", 2, {opacity:1, delay:4});

tweenA = TweenLite.to(".e3", 6, {top:"-80px", delay:8, ease:Linear.easeNone});
tweenA = TweenLite.to(".e3", 2, {opacity:1, delay:8, onComplete:function(){objHide(".e2")}});
tweenA = TweenLite.to(".e3", 2, {opacity:0, delay:12});

非常感谢。

4

1 回答 1

0

我建议使用 aTimeline而不是分离的TweenLite. 更好的代码是这样的：

TweenLite.defaultEase = Linear.easeNone;
var tl = new TimelineMax({paused: true});

tl
.to(".e1", 5, {top:"-90px"})
.to(".e1", 2, {opacity:1})
.to(".e2", 5.5, {top:"-70px", delay:4, onComplete:objHide, onCompleteParams: [".e1"]})
.to(".e2", 2, {opacity:1, delay:4})
.to(".e3", 6, {top:"-80px", delay:8 })
.to(".e3", 2, {opacity:1, delay:8, onComplete:objHide, onCompleteParams: [".e3"]})
.to(".e3", 2, {opacity:0, delay:12});
tl.play();

如果不同的补间不需要一个接一个地运行，您可以添加一些标签，如下所示：

tl
.add('start')
.to(".e1", 5, {top:"-90px"}, 'start')
.to(".e1", 2, {opacity:1}, 'start')
.to(".e2", 5.5, {top:"-70px", delay:4, onComplete:objHide, onCompleteParams: [".e1"]}, 'start')
.add('secondPart')
.to(".e2", 2, {opacity:1, delay:4}, 'secondPart')
.to(".e3", 6, {top:"-80px", delay:8 }, 'secondPart')
.to(".e3", 2, {opacity:1, delay:8, onComplete:objHide, onCompleteParams: [".e3"]}, 'secondPart')
.to(".e3", 2, {opacity:0, delay:12}, 'secondPart');

tl.play();

然后，您可以使用以下命令调整整个动画速度：（tl.timeScale(2)在这种情况下，它将整个 tl 速度加倍）。

希望能帮助到你。

于 2018-11-14T09:16:35.787 回答