Question

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

基本形状是一个圆圈，我想添加一系列不同大小的锯齿状峰和谷（扭曲/曲折）。我还想添加一些我可以控制的dat.GUI滑块：

它类似于后效应中的Wiggle Path如何工作。

在上面的gif中重新创建动画的最佳做法是什么？

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

或者在这种情况下使用类似two.js的库来绘制SVG更好的解决方案？

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

Answer 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个点（免责声明：链接的解决方案是麻省理工学院，作者在这里）。

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

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

如果您使用SVG，画布或其他内容并不重要，只要您了解它是如何工作的，为什么您正在使用它。