.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()的参数

.staggerTo() 示例

.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关键词接受两个参数：