以自定义速度沿曲线移动对象

Question

我有一个定义了几个控制点的catmull-rom曲线，如下所示：

我想为沿着曲线移动的对象设置动画，但是能够定义对象的速度。

当使用getPoint方法遍历曲线的点时，对象将呈三角形移动（在图像中，在u = 0处，我们在p1处，在u = 0.25处，我们在p2等处）。使用getPointAt方法，对象沿曲线以均匀的速度移动。

但是我想要对动画进行更大的控制，以便我可以指定从p1到p2的移动应该取0.5，从p2到p3的移动取0.3，从p3到p4的取0.2。这可能吗？

Answer 1

  

但是我想要对动画进行更大的控制，以便我可以指定从p1到p2的移动应该取0.5，从p2到p3的移动取0.3，从p3到p4的取0.2。这可能吗？

您可以使用tween.js之类的动画库来实现。这样，您可以指定对象的开始和结束位置以及所需的持续时间。也可以使用easing functions自定义过渡类型。

Answer 2

您有多种选择，我将描述理论，然后描述一种可能的实现方式。

理论

您要arclength parametrize弯曲曲线。这意味着参数增加1会导致沿曲线1的移动距离。

此参数化可以让您完全控制对象以任意速度移动，无论它是线性，非线性，分段...

可能的应用程序

有许多数值积分技术可以使弧长参数化曲线。

可能的方法是预先计算值并将它们放在表中。选择一个小的epsilon并从第一个参数值x_0开始，在x_0，x_0 + epsilon，x_0 + 2 * epsilon处评估函数。

执行此操作时，将每个样本之间的线性距离加到累加器中。即travelled_distance + = length（sample [x]，sample [x + 1]）。

将对存储在表中。

现在，当您位于x处并想要移动y单位时，可以将x舍入到最接近的x_n并线性查找距离大于y的第一个x_n值，然后返回该x_n。

这种算法并不是最有效的，但是它易于理解和编码，因此至少可以帮助您入门。

如果需要更优化的版本，请寻找弧长参数化算法。

Answer 3

感谢您的建议。我最终实现此方法的方法是在我的时间变量（为three.js getPoint函数的u变量）之间创建自定义映射。

我使用一个名为everpolate的JavaScript库创建了分段线性函数。这样，我就可以将t映射到u：

• 在t = 0时，u = 0，得出p1
• 在t = 0.5时，u = 1/3，得出p2
• 在t = 0.8时，u = 2/3，得出p3
• 在t = 1时，u = 1，导致p4

T to U map picture