.staggerTo()

.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) : *
为一组目标设定相同的终点变化属性,但是错开一定的时间,创建成一个间隔均匀的动画序列。将此动画序列添加到时间轴。 例如你想将一组文字段落按0.2s的间隔向下运动:
var textFields = [tf1, tf2, tf3, tf4, tf5];
myTimeline.staggerTo(textFields, 1, {top:"+=150", ease:CubicIn.ease}, 0.2);
.staggerTo()遍历整个targets数组,为每个对象创建一个to()动画。如果你在vars中定义onComplete,那么每个动画结束时都会触发,如果你定义onCompleteAll,那么在全部排序动画完成时会触发。
使用position参数控制插入点。
tl.staggerTo(myArray, 1, {left:100}, 0.25);  //将排序动画添加至时间轴的末尾
tl.staggerTo(myArray, 1, {left:100}, 0.25, 2);  //将排序动画添加至时间轴的2秒处(绝对位置)
tl.staggerTo(myArray, 1, {left:100}, 0.25, "+=2");  //将排序动画添加至时间轴的末尾后2秒处(相对位置)
tl.staggerTo(myArray, 1, {left:100}, 0.25, "myLabel");  //添加至标记处
tl.staggerTo(myArray, 1, {left:100}, 0.25, "myLabel+=2");  //添加至标记后2秒处
.staggerTo()适用于TimelineMaxTimelineLite

.staggerTo()的参数

参数 类型 必填 说明
targets Array 需要动画的对象或数组,如".obj"、["element1","element2"]
duration Number 每个动画持续的秒数(或帧)
vars Object 动画参数(CSS属性、延迟、重复次数等),例如myTimeline.staggerTo([element1, element2, element3], 1, {left:100, top:200}, 0.25, 0, myFunction})
stagger Number 每个动画的开始时间间隔(或帧),default = 0
position * 插入排序动画的位置。秒/帧或标签的绝对和相对位置,默认为"+=0" 。
onCompleteAll Function 整个排序动画完成时触发的函数,default = null
onCompleteAllParams Array 传递给onCompleteAll函数的参数,default = null
onCompleteScope * onCompleteAll函数的作用域

.staggerTo()效果展示

  • HTML
  • CSS
  • JS
  • 展示
.box {
  width:50px;
  height:50px;
  position:relative;
  border-radius:6px;
  margin-top:4px;
}
.green{
  background-color:#6fb936;
}

.orange {
  background-color:#f38630;
}
.grey {
  background-color:#989898;
}
var tm = new TimelineMax();
tm.staggerTo(".box", 1, {rotation:360, x:600}, 0.5);
重播

.staggerTo()返回值

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

.staggerTo()的补充说明

虽然stagger限定了动画目标使用相同的属性(如x:100, rotation:90),但你可以使用cycle来设定一个属性组(如 cycle:{x:[100,-100], rotation:[30,60,90]} ),还可使用function关键词(如 {x:function() { return Math.random() * 200; }}



function关键词接受两个参数:
参数 类型 必填 说明
index int 排序动画的索引值
target object 目标元素

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