基于位置的GSAP 3阶梯动画

GSAP的高级阶梯动画允许你定义一个grid，假设数组中的所有元素均匀间隔。但如果有间隙、每行数量不同等，如上例所示，该怎么办？也许它根本不像一个网格。请注意，由于distributeByPositions()辅助函数，本示例中的阶梯动画仍然流畅。

它是如何工作的？

在JS面板中，你会找到一个distributeByPosition()方法，可以将其复制到你的项目中。然后，只需将其包装在通常用于高级阶梯动画的配置对象周围，它会返回一个GSAP高级阶梯功能理解的函数。阶梯动画将基于DOM元素的x/y位置分布，内部使用getBoundingClientRect()。元素可以在屏幕上的任何位置，它会测量距离并相应地安排阶梯动画。

示例代码：

配置

配置对象可能包含以下任何可选属性：

• amount [number]：在所有阶梯动画之间分配的总时间（以秒为单位）。所以如果amount为1，并且有100个元素以线性方式阶梯，则每个补间的开始时间之间会有0.01秒的间隔。如果你更喜欢指定每个补间之间的特定时间量，请改用each属性。负amount将反转时间效果，这可能非常方便。因此{amount:-1, from:"center"}会使阶梯动画从外部边缘向中心移动。
• from [string | integer]：阶梯动画发源的数组中的位置。要从特定元素开始，例如，请使用表示该元素在目标数组中的索引的数字。所以from:4从数组中的第五个元素开始阶梯动画（因为数组使用零基索引）。每个元素的动画将基于该元素与数组中“from”值的接近程度开始（越接近，开始时间越早）。你也可以使用以下字符串值："start"、"center"、"edges"或"end"。默认值：0。
• axis [string]：如果你定义了一个grid，阶梯动画基于每个元素到“from”值在x轴和y轴上的总距离，但如果你更喜欢，可以只关注一个轴（"x"或"y"）。使用上面的演示查看效果（在视觉上看到效果更容易理解）。
• ease [Ease]：分配动画开始时间的缓动效果。因此"power2"将以较大的间隔开始，然后在结束时逐渐变得更加紧密。默认值："none"。

为什么这不是内置在GSAP中？为什么需要一个辅助函数？

主要是因为文件大小的考虑。grid功能似乎涵盖了绝大多数用例，而GSAP被构建为允许这些高级功能在需要适应此类边缘情况时在外部利用。

如果你需要任何帮助，请在我们的论坛发帖。祝你动画愉快！