DayDreamerBlog

Appearance

https://gsap.com/resources/getting-started/Staggers

这个特殊的属性，用于声明同一组中不同的动画元素之间的动画间隔。

seconds ​

javascript
gsap.to('.box', {
    y: 100,
    stagger: 0.1 // 0.1 seconds between when each ".box" element starts animating
});

grid ​

javascript
gsap.to(".box", {
  duration: 1,
  scale: 0.1,
  y: 40,
  ease: "power1.inOut",
  stagger: {
    grid: [7,15],
    from: "center",
    axis: "x", // 轴，x，y或者null（both）
    ease: "power3.inOut",
    amount: 1.5
  }
});

special properties ​

To get more control, wrap things in a configuration object which can have any of the following properties (in addition to most of the special properties that tweens have.

Property ​

Description ​

amount ​

[Number]：在所有交错动画之间分配的总时间（以秒为单位）。因此，如果总量设置为1秒，并且有100个元素线性交错，则每个子动画的开始时间之间会有0.01秒的间隔。如果您希望指定每两个动画之间的特定时间间隔，请使用each属性。

each ​

[Number]: 每个子动画开始时间之间的间隔（以秒为单位）。因此，如果每个间隔都是1秒（无论元素数量多少），那么每个子动画的开始时间之间就会有1秒的间隔。如果您更愿意指定一个总的时间来分配给这些间隔，请使用amount属性。

from ​

[String | Integer | Array]: 数组中开始交错效果的位置。例如，要从特定元素开始，可以使用该元素在目标数组中的索引号。因此，如果设置为 from: 4，则表示从数组的第5个元素（因为数组使用的是零基索引）开始交错效果。每个元素的动画将根据其与数组中“from”值的接近程度来启动（越接近则越早开始）。您还可以使用以下字符串值："start"、"center"、"edges"、"random" 或 "end"（"random" 在3.1.0版本中添加）。如果您定义了一个网格，您可以指定小数值来表示每个轴上的进度，比如 [0.5, 0.5] 表示中心位置，[1, 0] 表示右上角等。默认值：0。

grid ​

[Array | "auto"]:如果元素以网格形式视觉展示，请指出有多少行和列（例如 grid:[9,15]），以便 GSAP 可以相应地计算邻近关系。或者使用 grid:"auto" 让 GSAP 通过 element.getBoundingClientRect() 自动计算行和列（非常适合响应式布局）。默认情况下，网格从左上角到右下角排列（就像文本在右侧边缘换行一样）。如果你的元素不是均匀排列在网格中，请查看我们创建的 distributeByPosition()辅助函数。

axis ​

[string]: 如果你定义了一个网格，那么交错效果是基于每个元素在X轴和Y轴上到“起始”值的总距离来计算的，但如果你愿意的话，也可以只关注一个轴（"x" 或 "y"）。

ease ​

[String | Function]: 这个参数决定了动画启动时间的分布方式。因此，"power2" 会在开始时让动画之间有较大的间隔，然后在接近结束时这些动画会更加紧密地聚集在一起。默认值是 "none"。

Function ​

plain
gsap.to('.box', {
    y: 100,
    stagger: function (index, target, list) {
        // your custom logic here. Return the delay from the start (not between each)
        return index * 0.1;
    }
});

仅在你需要运行自定义间隔时间时才使用此功能。该函数会为数组中的每个动画元素调用一次，并应回传从起始位置开始的总延迟时间（而不是从前一个动画开始时间算起的延迟量）。

该函数接收以下参数：

  1. index [Integer] - The index value from the list.
  2. target [Object] - The target in the list at that index value.
  3. list [Array | NodeList] - The targets array (or NodeList).