.set()

优质
小牛编辑
136浏览
2023-12-01

.set( target:Object, vars:Object, position:* ) : *
将零持续时间的动画添加到时间轴的末尾(或使用“位置”参数的其他位置)立即设置值(当虚拟播放头到达时间轴上的该位置时)。这是一种方便的方法,可以完成同样类似于 add( TweenLite.to(target, 0, {...}) ) 的事情,但代码较少。
以下产生相同效果:

myTimeline.add( TweenLite.to(element, 0, {left:100, opacity:0.5, immediateRender:false}) );
myTimeline.set(element, {left:100, opacity:0.5});

你可以使用链式调用快速构建序列:

//创建一个时间轴
var tl = new TimelineLite({onComplete:myFunction});
//以下是链式调用,为了方便观看我们把他们换行了
tl.from(element, 1, {left:-100})        //添加一个动画
  .to(element, 1, {top:50}, "-=0.25")    //在时间轴末端前0.25秒(即时间轴0.75秒)处添加动画
  .set(element, {opacity:0})        //设置动画元素的透明度
  .call(otherFunction)        //执行函数otherFunction()
  .staggerTo([e1, e2, e3], 1.5, {rotation:45}, 0.25); //最后旋转e1, e2, e3,他们的起始间隔是0.25秒

使用position参数控制插入点。

tl.set(element, {left:100});  //添加至时间轴末尾
tl.set(element, {left:100}, 2);  //添加至2秒处(绝对位置)
tl.set(element, {left:100}, "+=2");  //添加至时间轴末尾后2秒处(相对位置)
tl.set(element, {left:100}, "myLabel");  //添加至标记处
tl.set(element, {left:100}, "myLabel+=2");  //添加至标记后2秒处

.set()适用于TimelineMaxTimelineLite

.set()的参数

参数类型必填说明
targetObject需要动画的对象
varsObject动画参数(CSS属性、延迟、重复次数等),例如myTimeline.set(element, {left:100, top:200});
position*插入动画的位置。秒/帧或标签的绝对和相对位置,默认为"+=0" 。

.set() 示例

.set()返回值

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

.set()的补充说明