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

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

感谢您的建议。我最终实现这一点的方式是在我的时间变量之间创建一个自定义映射，这是一个用于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到U地图图片

Answer 2

然而，我想要更好地控制动画，这样我就可以指定从 p1 到 p2 的移动应该是 0.5，从 p2 到 p3，0.3，从 p3 到 p4 0.2。这可能吗？

您可以通过使用像tween.js这样的动画库来实现这一点。通过这种方式，您可以指定对象的开始和结束位置以及所需的持续时间。也可以使用缓动函数来自定义转换的类型。

Answer 3

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

理论

您想对曲线进行弧长参数化。这意味着参数中的增量为 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。

这个算法不是最有效的，但它很容易理解和编码，所以至少它可以让你开始。

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