我正在使用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});
非常感谢。
答案 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速度加倍)。
希望有帮助。