.staggerFromTo()

优质

小牛编辑

132浏览

2023-12-01

.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() 示例

.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。