Question

TweenMax.staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array 通过设定序列动画的起点和终点来初始化一个TweenMax。

var objects = [obj1, obj2, obj3, obj4, obj5];
TweenMax.staggerFromTo(objects, 1, {opacity:1}, {opacity:0}, 0.2);

还可以使用cycle属性。 TweenMax.staggerFromTo()适用于TweenMax

TweenMax.staggerFromTo()的参数

参数名	类型	是否必填	描述
targets	Array	是	要进行动画的对象，可以有多个，以数组形式传入
duration	number	是	动画持续的秒数（或帧数，如果设置了useFrames:true）
fromVars	object	是	设置动画的一些属性及其他参数
toVars	object	是	设置动画的一些属性及其他参数
stagger	Number	否	每个动画的间隔，默认是0
onCompleteAll	Function	否	当所有显示对象都完成动画后要调用的函数
onCompleteAllParams	Array	否	传递给onCompleteAll函数的参数，以数组形式传入
onCompleteAllScope		否	onCompleteAll函数的作用域

TweenMax.staggerFromTo() 示例

TweenMax.staggerFromTo() with cycle
  
cycle属性允许你在所有TweenMax、TimelineLite和 TimelineMax插件中基于stagger的函数里面，定义一个array的属性值或者function的属性值 (注释中有详细列表)。
   
  
  
  
  
  
  
  
  

body {
  background-color:#1d1d1d;
  font-family: "Asap", sans-serif;
  color:#989898;
  margin:0 10px;
  font-size:16px;
}
h1, h2, h3 {
  font-family: "Signika Negative", sans-serif;
  margin: 10px 0 10px 0;
  color:#f3f2ef;
}
h1 { 
  font-size:36px;
}
h2 {
  font-size:30px;
}
h3 {
  font-size:24px;
}
p{
  line-height:22px;
  margin-bottom:16px;
  width:650px;
}
#demo {
  position:relative;
}
.box {
  width:50px;
  height:50px;
  position:relative;
  border-radius:6px;
  margin:4px;
  display:inline-block;
  background:grey;
}
.green{
  background-color:#6fb936;
}
.orange {
  background-color:#f38630;
}
.grey {
  background-color:#989898;
}

TweenMax.staggerFromTo(".box", 1, {
  cycle:{
    //an array of values
    backgroundColor:["red", "white", "#00f"],
    //function that returns a value
    y:function(index){
      return index * 10;
    }
  }
},
  
 {
  cycle:{
    //an array of values
    backgroundColor:["green", "orange", "pink"],
    //function that returns a value
    y:function(){
      return (Math.random() * 100) + 20;
    }
  }
  
}, 0.5);
/* The cycle property is available in:
TweenMax.staggerFromTo()
TweenMax.staggerFrom()
TweenMax.staggerTo()
TimelineLite.staggerFromTo()
TimelineLite.staggerFrom()
TimelineLite.staggerTo()
TimelineMax.staggerFromTo()
TimelineMax.staggerFrom()
TimelineMax.staggerTo()
*/

TweenMax.staggerFromTo()返回值

TweenMax.staggerFromTo()的补充说明