GSAP教程之 Staggers 详解

创建交错动画，设置动画之间的间隔效果，所有的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 。