AEJoy —— 表达式之无缝循环摆/扭动JS

Posted 2021-12-15 panda1234lee

效果图

通过一点数学技巧，我们可以让 wiggle() 无缝循环

白色物体的循环路径是通过混合蓝色和红色物体的路径创建的

想法

毫无疑问，wiggle() 是为项目添加随机性的一种非常方便和通用的工具。有时候，如果能够让摆动运动循环起来，那将是非常有用的。在这里，我们将通过使用一些巧妙的数学运算和利用一个很少使用的 wiggle() 参数来实现这一点。

设计

假设我们想要创建一个三秒的摆动循环。可视化一个图表，显示我们的图层从时间 0 到 3 秒随机移动的路径。如果你看上方第二幅动图，你会看到蓝点描绘出的路径。它从左下角开始，三秒钟后在右边缘的中间附近结束。然后重复。

现在检查红点所描绘的路径。注意，它从右边缘附近开始，但在左下角结束-正是蓝点开始的地方。这听起来很巧合，对吧? 这里有一个小技巧这是让这一切顺利的关键。事实证明，红点和蓝点实际上是在追踪同一条随机的摆动路径。关键在于红点追踪的是时间零点之前的三秒路径。

让我们好好想想。红点正在追踪从 -3 秒到 0 秒之间的路径。蓝点在追踪 0 到 +3 秒之间发生的部分。我们可以通过使用很少使用的 wiggle() 的第五个参数 —— 负 time 来访问 wiggle() 的这些