TweenMax.staggerTo()

TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array
stagger系列方法为多个目标制作一个有间隔的动画序列,相当于多个TweenMax的数组。
需要设置每个动画的开始间隔。如不设置则为零,同时开始动画。
var objects = [obj1, obj2, obj3, obj4, obj5];
TweenMax.staggerTo(objects, 1, {y:"+=150", opacity:0}, 0.2);
TweenMax.staggerTo()适用于TweenMax

TweenMax.staggerTo()的参数

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

TweenMax.staggerTo()效果展示

  • HTML
  • CSS
  • JS
  • 展示
  

TweenMax.staggerTo()

每个动画序列的开始时间间隔0.5秒

body {
  background-color:#1d1d1d;
  color:#f3f2ef;
}
h2 {
  font-family: "Signika Negative", sans-serif;
  margin: 10px 0 10px 0;
  font-size:30px;
}
p{
  line-height:22px;
  margin-bottom:16px;
}
#demo {
  height:100%;
  position:relative;
}
.box {
  width:50px;
  height:50px;
  position:relative;
  border-radius:6px;
  margin-top:4px;
  display:inline-block
}
.green{
  background-color:#6fb936;
}
.orange {
  background-color:#f38630;
}
.grey {
  background-color:#989898;
}
TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);
重播

TweenMax.staggerTo()的补充说明

stagger系列方法可用于TweenMax、TimelineLite、TimelineMax,不可用于TweenLite。
由于stagger系列方法(staggerTo、staggerFrom、staggerFromTo)返回的是一个tween的数组,所以不可以直接对其返回值直接使用tween的属性和方法。
tween=TweenMax.to(...)
tween.play()//播放动画

tween=TweenMax.staggerTo(...)
tween.play()//无法使用
stagger系列方法可以使用cycle属性来循环设置动画参数值。

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