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()

TweenMax API