.add()
优质
小牛编辑
135浏览
2023-12-01
.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
|
| stagger | Number | 否 | 序列时间间隔（或帧），仅当value是数组时需要设置，默认：0 例如设置成0.5，如果align是normal，则第一个完成后0.5秒才添加第二个，如果align是start，则每隔0.5添加一个 |
.add() 示例
.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()返回值
返回该时间轴以便链式调用。