GASP | TimelineMax时间轴

2016-6-12    分类: 前端资源,动画库GSAP

TimelineMax
.add() //在时间末尾添加一个动画、标签、回调
//add a tween to the end of the timeline
 tl.add( TweenLite.to(element, 2, {left:100}) );
 
 //add a callback at 1.5 seconds
 tl.add(func, 1.5); 
 
 //add a label 2 seconds after the end of the timeline (with a gap of 2 seconds)
 tl.add("myLabel", "+=2");
 
 //add another timeline at "myLabel"
 tl.add(otherTimeline, "myLabel"); 
 
 //add an array of tweens 2 seconds after "myLabel"
 tl.add([tween1, tween2, tween3], "myLabel+=2"); 
 
 //add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline
 tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5);

 

.addPause() //添加一个暂停,能在指定时间后暂停并回调

.addPause(10, function(a,b){console.log(a,b)}, ["param1", "param2"], this); //在10秒后暂停并回调

addCallback() //功能用法、参数跟addPause()一样只是缺少了暂停功能

 

set() //立刻生效,不进行过渡效果

.set('#box', {opacity:0.5})

具体更多参考:
http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/