返回介绍

TweenMax.staggerTo()

发布于 2020-01-04 14:05:33 字数 2742 浏览 1371 评论 0 收藏 0

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()的参数

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

TweenMax.staggerTo() 示例

  

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()返回值

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属性来循环设置动画参数值。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文