创建交错动画,设置动画之间的间隔效果,所有的tween都有stagger属性,它可以是一个数字,一个对象,或一个函数。
Number(数字类型)
例子:
div沿x轴移动500, 每个动画之间间隔0.1秒。
gsap.to("div", {
x: 500,
stagger: 0.1
});
Object(对象类型)
例子:
gsap.to(".box", {
y: 40,
stagger: {
each: 0.1,
from: [0, 1], //左下角开始
grid: [3, 5],
axis: "x",
ease: "power2.in"
}
})
对象类型参数详解
amount
所有动画的总时间。如果 amount
为1秒,有100个动画对象,那么每个动画开始会间隔0.01秒。如果只关注每个动画的间隔,而不关注总时长,则用 each
属性代替。
each
每个动画开始时间的间隔。如果 each
为0.1秒,那么不管多少个动画,他们都是间隔0.1秒播放。如果需要拆分总时长,则用 amount
属性。
from
动画开始的索引位置,默认值:0
设置 4
,从第5个元素开始动画,其它每个元素的动画根据距离这个索引位置的远近逐个开始(越接近,越快开始)。
设置 start
,从索引 0
(第一个元素)开始动画。
设置 end
,从索引末尾(最后一个元素)开始动画。
设置 center
,从索引中间(中心的元素)依次向两边开始动画,注意:如果元素总数为奇数,从最中间的元素开始。如果为偶数,从最中间2个元素开始。
设置 edges
,从索引 0
和末尾(第一个和最后一个元素)同时开始动画,如果设置了 grid
属性,则从每行的索引 0
和末尾同时开始动画。
设置 random
,随机位置开始动画。
设置 [0.5, 0.5]
, 如果设置了 grid
属性,则可以指定每个轴的十进制值。如 [0.5, 0.5]
表示中心, [1, 0]
表示右上角等。
grid
指示几行几列,如 [9, 15]
。
axis
如果定义了 grid
属性,x轴y轴两个方向的元素根据开始索引位置的远近逐个开始动画(越接近,越快开始),设置 x
,只关注x轴向,对于y轴元素不逐个开始动画(同时开始),设置 y
则x轴元素不逐个开始动画。
ease
动画运动的方式,如 power2.in
。