TweenMax.staggerFrom()

TweenMax.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array
通过设定序列动画的终点来初始化一组TweenMax。
var objects = [obj1, obj2, obj3, obj4, obj5];
TweenMax.staggerFrom(objects, 1, {y:"+=150"}, 0.2);

TweenMax.staggerFrom()适用于TweenMax

TweenMax.staggerFrom()的参数

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

TweenMax.staggerFrom()效果展示

  • HTML
  • CSS
  • JS
  • 展示

TweenMax.staggerFrom() with cycle

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

body {
  background-color:#1d1d1d;
  color:#989898;
}
h2{
  margin: 10px 0 10px 0;
  font-size:30px;
}
p{
  line-height:22px;
  margin-bottom:16px;
  width:650px;
}
#demo {
  height:100%;
  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.staggerFrom(".box", 1, {
  cycle:{
    //an array of values
    backgroundColor:["red", "white", "#00f"],
    //function that returns a value
    y:function(index){
      return index * 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.staggerFrom()的补充说明

stagger系列方法可以使用cycle属性来循环设置动画参数值。

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