Javascript - 以与摆动路径在后效中的工作方式相同的方式以编程方式为形状设置动画

Posted 2023-04-12

【中文标题】Javascript - 以与摆动路径在后效中的工作方式相同的方式以编程方式为形状设置动画

【英文标题】：Javascript - Programmatically animate shapes the same way wiggle paths works in after effects

【发布时间】：2017-05-02 20:48:12

【问题描述】：

我正在尝试了解有关使用 javascript 以编程方式绘制和动画形状的更多信息。我正在尝试重新创建这样的东西：

基本形状是一个圆形，我想添加一系列锯齿状的峰和各种大小的谷（扭曲/锯齿形）。我还想在我可以控制的地方添加一些带有dat.GUI 的滑块：

点（圆中现有顶点之间添加的顶点数。锯齿状边缘的密度。） 大小（段路径的最大长度。） 动画的速度。

它类似于 Wiggle Path in after effects 的工作方式。

如上图所示重新创建动画的最佳做法是什么？

使用 requestAnimationFrame 并在画布上绘图是一个很好的解决方案，因为它是“实时”动画（不是循环）？

或者在这种情况下使用像 two.js 这样的库来绘制 SVG 是一个更好的解决方案？

请记住，我希望随着时间的推移随机生成动画，这是一个我正在寻找起点的学习过程。

【问题讨论】：

@Kaiido 这不是元球。每个点的简单振荡器具有复杂性 1-3 个振荡器将点垂直于它们所在的线段移动，可以选择是否平滑线段。不过，我希望 OP 可以发布一些尝试..，

【参考方案1】：

问题中没有任何代码需要解决，所以这里是一个一般的运行过程：

After Effects 中的摆动路径通过使用插值将每个线段分成几个点来工作。

p = p1 + (p2 - p1) * t;  // t = [0, 1]
// t is a result of length / points, then each segment length / length.

每个点都分配有一个或多个振荡器（振荡器越多，运动越复杂，或者换句话说：更多变化）以随机角度开始，将点垂直于其所在的线移动。对于圆，您可以将圆视为一条线，其中插值基于角度而不是距离。

根据时间相位（速度）旋转每个振荡器，并根据空间相位旋转它们的半径。这里Math.sin()可以用于点沿垂线的y位置。为了增加复杂性，您只需以不同的频率将更多的 sin() 添加在一起。是否要标准化输出取决于您。

使用线连接点，或者像示例 gif 中那样使其平滑，例如使用 cardinal splines，它通过点并获取 n 个点（免责声明：链接的解决方案是 MIT，作者在这里）。

如果您需要形状每次都以相同的形状开始（如在 AE 中），则需要实现自定义随机函数，以便在动画开始时控制种子值。

使用振荡器的另一种方法是使用 Perlin / Simplex 噪声，但这需要您计算更多数据才能获得相同的结果。

如果您使用 SVG、画布或其他东西并不重要，只要您了解如何它的工作原理以及 为什么您使用它。

【讨论】：

感谢您的回复。您的解决方案听起来不错，但在分配振荡器时我有点难以理解。这是我现在拥有的jsfiddle。顺便说一句，很抱歉之前没有包含任何代码，我只需要知道从哪里开始。再次感谢您帮助我。

@lassemt 振荡器可以将 Math.sin() 设置为某个频率或任意计数器，而不是每帧递增。对于更复杂的行为，只需将 2-3 加在一起并标准化。将结果与半径相乘，并将结果用于点的 y 位置（或者更确切地说，垂直方向）。对各自角度的所有点执行此操作 - 需要三角数学。