.add()

.add( value:*, position:*, align:String, stagger:Number ) : *
向时间轴添加动画、其他时间轴、回调函数或标签(或它们的数组)。
 //将一个动画添加到时间轴的末尾
 tl.add( TweenLite.to(element, 2, {left:100}) );
 
 //将一个函数添加到1.5秒处
 tl.add(func, 1.5); 
 
 //将一个标签添加至时间轴结束后2秒
 tl.add("myLabel", "+=2");
 
 //将另一个时间轴添加至"myLabel"标签处
 tl.add(otherTimeline, "myLabel"); 
 
 //将一个动画数组添加至标签"myLabel"后2秒处
 tl.add([tween1, tween2, tween3], "myLabel+=2"); 
 
 //将一个动画数组添加至时间轴结尾后2秒处,每个动画都在前一个动画结束0.5秒后开始
 tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5);
.add()适用于TimelineMaxTimelineLite

.add()的参数

参数名 类型 是否必填 描述
value * 添加的动画、时间轴、回调函数或标签(或它们的数组)
position * 添加的时间点,使用数字来表示以秒为单位的绝对时间(或基于帧的时间轴的帧),或使用"+="或"-="前缀来设置相对时间。例如,2表示时间轴2秒处,+=2表示时间轴末尾后2秒处。还可以使用标签,例如"myLabel+=2"表示标签myLabel后2秒处
留空则添加至时间轴末尾
如果位置标签不存在则添加至末尾
align String 序列方式,仅当value是数组时需要设置,默认:normal
  • sequence:排队添加,即一个完成后再到下一个
  • start:全部同时开始,并忽略delay
  • normal:全部同时开始,不忽略delay
stagger Number 序列时间间隔(或帧),仅当value是数组时需要设置,默认:0
例如设置成0.5,如果align是normal,则第一个完成后0.5秒才添加第二个,如果align是start,则每隔0.5添加一个

.add()效果展示

  • HTML
  • CSS
  • JS
  • 展示
.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
  }
.green{
    background-color:#6fb936;
  }
tween1 = TweenLite.to(".box", 1, {x:500});
tween2 = TweenLite.to(".box", 2, {y:100});
tween3 = TweenLite.to(".box", 1, {x:0});
tween4 = TweenLite.to(".box", 2, {y:0});

var tl = new TimelineMax();
tl.add([tween1, tween2, tween3, tween4], 3, "sequence", 0.5);
重播

.add()返回值

返回该时间轴以便链式调用。

转载原创文章请注明:文章转载自:TweenMax中文网 [https://www.tweenmax.com.cn]
本文地址:https://www.tweenmax.com.cn/api/timelinemax/add()