cycle

cycle: Object
在stagger(错开)动画中设定属性组。虽然stagger限定了动画目标使用相同的属性(如x:100, rotation:90),但你可以使用cycle来设定一个属性组(如 cycle:{x:[100,-100], rotation:[30,60,90]} ),还可使用function关键词(如 {x:function() { return Math.random() * 200; }}
cycle适用于 staggerTo()staggerFrom()staggerFromTo()
//cycle适用于 
TweenMax.staggerFromTo() 
TweenMax.staggerFrom() 
TweenMax.staggerTo() 
TimelineLite.staggerFromTo() 
TimelineLite.staggerFrom() 
TimelineLite.staggerTo() 
TimelineMax.staggerFromTo() 
TimelineMax.staggerFrom() 
TimelineMax.staggerTo()

cycle适用于TweenMax

cycle效果展示

  • HTML
  • CSS
  • JS
  • 展示

TweenMax.staggerTo() with cycle

cycle 属性允许在stagger的相关方法中使用循环设定的属性值,包括TweenMax, TimelineLite and TimelineMax。

body {
  background-color:#1d1d1d;
  font-family: "Asap", sans-serif;
  color:#989898;
  margin:0 10px;
  font-size:16px;
}

h2 {
  font-size:30px;
}

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;
}
myTween = TweenMax.staggerTo(".box", 1, {
	cycle: {
		//为目标循环设置一下属性数组
		backgroundColor: ["red", "white", "#00f"],
		//通过function返回属性数组
		y: function(index, target) {
			console.log(index, target)
			//目标target < div class = "box" > < /div>
                        // 目标数组的动画索引值index
			return index * 20;
		},
	},
}, 0.5);
重播

cycle的补充说明

function关键词接受两个参数:
参数 类型 必填 说明
index int 排序动画的索引值
target object 目标元素

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

  • 上一篇:startAt
  • 下一篇:没有了