animation - 二次贝塞尔插值

Question

我想在 AS2 中获取一些代码来插入二次贝塞尔曲线。节点之间的距离应该是恒定的。基本上它是沿着由 3 点定义的非双曲二次贝塞尔曲线以恒定速度为球设置动画。谢谢！

Answer 1

贝塞尔曲线数学真的很简单，所以我会帮你解决这个问题，你可以把它翻译成 ActionScript。

二维二次贝塞尔曲线由三个(x,y)坐标定义。我将这些称为P0 = (x0,y0),P1 = (x1,y1)和P2 = (x2,y2)。此外，参数值t，范围从0到1，用于指示沿曲线的任何位置。所有x,y和t变量都是实值（浮点）。

二次贝塞尔曲线的方程为：

P(t) = P0*(1-t)^2 + P1*2*(1-t)*t + P2*t^2

因此，使用伪代码，我们可以平滑地描绘出贝塞尔曲线，如下所示：

for i = 0 to step_count
    t = i / step_count
    u = 1 - t
    P = P0*u*u + P1*2*u*t + P2*t*t
    draw_ball_at_position( P )

这假设您已经定义了 points P0，P1并且P2如上所述。如果你均匀地间隔控制点，那么你应该沿着曲线得到很好的均匀步长。只需将 step_count 定义为您希望看到的曲线上的步数。

Answer 2

请注意，表达式可以在数学上更有效地完成。

P(t) = P0*(1-t)^2 + P1*2*(1-t)*t + P2*t^2

和

P = P0*u*u + P1*2*u*t + P2*t*t

两者都持有 t 个可以简化的乘法。

例如：

C = A*t + B(1-t) = A*t + B - B*t = t*(A-B) + B= 您节省了一次乘法 = 双倍性能。

Answer 3

Naaff 提出的解决方案，即P(t) = P0*(1-t)^2 + P1*2*(1-t)*t + P2*t^2会得到正确的“形状”，但t在[0:1]区间中选择 evenly-spaced 不会产生 evenly-spaced P(t)。换句话说，速度不是恒定的（您可以区分前面的等式t来查看它）。

通常，以恒定速度遍历参数曲线的常用方法是通过弧长重新参数化。这意味着表示P为沿曲线遍历的长度P(s)在哪里。s显然，s从零变化到曲线的总长度。在二次贝塞尔曲线的情况下，弧长作为 的函数有一个封闭形式的解t，但它有点复杂。在计算上，使用您最喜欢的方法进行数值积分通常更快。但是请注意，这个想法是计算反比关系，即t(s)，以便表示P为P(t(s))。然后，选择 evenly-spaceds将产生 evenly-space P。