.staggerFromTo()

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

.staggerFromTo()的参数

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

.staggerFromTo()效果展示

  • 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.staggerFromTo(".box", 1, {rotation:120, x:300}, {rotation:360, x:600}, 0.5);
重播

.staggerFromTo()返回值

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

.staggerFromTo()的补充说明

虽然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 否 目标元素

在动画的staggerFromTo()方法中immediateRender（立即渲染）一般默认为true，你可以在vars中设置immediateRender:false。

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

TimelineMax API