贝塞尔缓动的速度运动图

Question

我正在使用 Bézier 缓动插值在我的应用程序中制作动画。（像这样：https://developers.google.com/web/fundamentals/design-and-ux/animations/custom-easing）

我目前使用具有 4 个控制点（P0、P1、P2、P3）的简单贝塞尔曲线表示图表，所以在 x 轴上我得到了时间，在 y 轴上我得到了位置（或价值）。一切都归一化了。

我现在想更改表示以在 y 轴上具有速度。基本上更接近运动图。我看了很多地方，发现我需要得到我正在使用的立方贝塞尔曲线的导数。

那里提到：https://pomax.github.io/bezierinfo/#derivatives，贝塞尔曲线的导数（特别是立方贝塞尔曲线）由其他贝塞尔曲线组成。这对于我能够画出它们来说是完美的。但是，我找不到计算这些贝塞尔曲线控制点的方法。在指定的 t 处得到一个点总是一个公式。所以我无法绘制图形。

我想得到一个公式，让我得到一系列控制点。

我怎样才能做到这一点？谢谢！

Answer 1

带控制点的三次贝塞尔曲线的导数P0..P3是带控制点的二次贝塞尔曲线：

D0 = 3*(P1-P0)
D1 = 3*(P2-P1)
D2 = 3*(P3-P2)

也许您想在任何地方都使用三次曲线 - 在这种情况下制作“功率提升”：

PD0 = D0 = 3*(P1-P0)
PD1 = D0/3 + 2*D1/3 = (P1-P0) + 2*(P2-P1) = 2*P2 - P1 - P0
PD2 = 2*D1/3 + D2/3 = 2*(P2-P1) + (P3-P2) = P2 - 2*P1 + P3
PD3 = D2 = 3*(P3-P2)

贝塞尔缓动的速度运动图

Velocity motion graph from bezier easing

math

animation

bezier

graph