cycle

优质

小牛编辑

129浏览

2023-12-01

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

cycle 示例

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  
                        // 目标数组的动画索引值index
			return index * 20;
		},
	},
}, 0.5);

cycle返回值

cycle的补充说明

function关键词接受两个参数：

参数	类型	必填	说明
index	int	否	排序动画的索引值
target	object	否	目标元素