Jquery Greensock Tweenlite - 相同的对象不同的效果不同的持续时间

时间:2013-08-30 05:14:30

标签: jquery slide tweenlite greensock

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

e1,e2,e3,e4是带图像的div和不透明度= 0。 例如,我希望'.e1'从y:0飞到y:-90,5秒,我希望'.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});

非常感谢。

1 个答案:

答案 0 :(得分:0)

我建议使用Timeline而不是单独的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速度加倍)。

希望有帮助。