贝塞尔曲线的速度运动图答案

【问题标题】：Velocity motion graph from bezier easing贝塞尔曲线的速度运动图
【发布时间】：2021-02-19 17:45:08
【问题描述】：

我在我的应用程序中使用 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 处获得一个点始终是一个公式。所以我无法绘制图表。

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

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

【问题讨论】：

本节的末尾为您提供了这些信息，过程非常简单。如果您的原始曲线中有一条带有点 p0、p1、p2 和 p3 的三次曲线，则您的导数是带有点 d0 = 3*(p1-p0)、d1 = 3 * (p2 - p1) 和 d2 的二次曲线= 3 * (p3 - p2)。使用从 0 到 1 的相同 t 绘制二次曲线，这就是您的速度图。

标签： animation math graph bezier

【解决方案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)

【讨论】：

谢谢。理想情况下是的，我想在任何地方使用三次曲线。我也想从速度贝塞尔值转换回位置贝塞尔，我不知道这是否可能？我尝试了公式并得到了一条抛物线，问题是它很奇怪，轴不正确。我试图标准化结果，但它仍然很奇怪。图片截图：Graph Image这是怎么回事？