TimelineMax()

.TimelineMax( vars:Object ) ;
构建一个TimelineMax实例，创建时间轴。

new TimelineMax();
//如果使用TimelineLite，则用 new TimelineLite();

基础的使用示例

//创建一个重复3次每次1秒间隔的时间轴，当时间轴结束时执行myFunction()
var tl = new TimelineMax({repeat:3, repeatDelay:1, onComplete:myFunction});
//添加一个动画
tl.add( TweenLite.to(element, 1, {left:200, top:100}) );
        
//在时间轴末尾添加另一个动画
tl.add( TweenLite.to(element, 0.5, {opacity:0}) );
 
//通过.to()方法添加一个动画，添加于时间轴末尾后0.5秒处的
tl.to(element, 1, {rotation:30}, "+=0.5");
         
//反向播放时间轴
tl.reverse();
//在三秒钟处插入一个标签
tl.addLabel("spin", 3);
//在标签处插入一个动画
tl.add( new TweenLite(element, 2, {rotation:"+=360"}), "spin");
    
//跳转到标签处开始播放
tl.play("spin");
//在时间轴中插入另一个时间轴
var nested = new TimelineMax();
nested.to(element2, 1, {left:200}));
tl.add(nested);

TimelineMax()适用于TimelineMaxTimelineLite

TimelineMax()的参数

new TimelineMax({repeat:1, onRepeat:repeatHandler, paused:true});

TimelineMax() 示例

.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
  }
.green{
    background-color:#6fb936;
  }
.orange {
    background-color: #f38630;
}
.grey {
    background-color: #989898;
}

var myTimeline = new TimelineMax();
//添加动画至时间轴，时间轴长为6秒
myTimeline.add(TweenLite.to('.green',6,{x:600})); 
//添加动画至时间轴绝对位置1秒处
myTimeline.add(TweenLite.to('.orange',2,{x:200}),1); 
//添加动画至时间轴末尾（6秒处），时间轴长变成9秒
myTimeline.add(TweenLite.to('.grey',3,{x:300}));  

TimelineMax()返回值

返回此时间轴实例。

TimelineMax()的补充说明