沿三次贝塞尔曲线制作动画时速度不一致答案

【问题标题】：Inconsistent Speed When Animating Along a Cubic Bezier Curve沿三次贝塞尔曲线制作动画时速度不一致
【发布时间】：2020-07-04 02:58:18
【问题描述】：

我正在使用以下示例http://jsfiddle.net/m1erickson/LumMX/ 沿一组贝塞尔曲线为对象设置动画。出于某种原因，三次贝塞尔曲线（蓝色）使动画略微加快。我想要完成的是在所有曲线上以相同的速度平滑一致的动画。为什么沿蓝色曲线的动画会加速，我该如何解决？

链接的示例使用此等式计算在特定时间（百分比）沿三次贝塞尔曲线的点。我怀疑这是我需要纠正的，但我的数学能力不够强：

// cubic bezier percent is 0-1
function getCubicBezierXYatPercent(startPt, controlPt1, controlPt2, endPt, percent) {
    var x = CubicN(percent, startPt.x, controlPt1.x, controlPt2.x, endPt.x);
    var y = CubicN(percent, startPt.y, controlPt1.y, controlPt2.y, endPt.y);
    return ({
        x: x,
        y: y
    });
}

// cubic helper formula at percent distance
function CubicN(pct, a, b, c, d) {
    var t2 = pct * pct;
    var t3 = t2 * pct;
    return a + (-a * 3 + pct * (3 * a - a * pct)) * pct + (3 * b + pct * (-6 * b + b * 3 * pct)) * pct + (c * 3 - c * 3 * pct) * t2 + d * t3;
}

【问题讨论】：

在不知道任何数学的情况下，似乎速度是根据行长计算的。蓝线较长，因此移动速度加快。绿色是最短的，运动看起来更慢。你能把蓝色曲线变短吗？

标签： javascript animation bezier

【解决方案1】：

在重绘曲线（和矩形）100 次所花费的固定时间内，矩形必须从曲线的起点遍历到终点。由于蓝色曲线较长，矩形将在穿过其他较短曲线的同时穿过更长的距离。因此，矩形在蓝色曲线上的移动速度似乎比在其他曲线上更快。

要使矩形以恒定速度移动，对于较短的曲线，您将不得不重绘更少的次数，而对于较长的曲线，您需要重绘更多的次数。这意味着在您的代码中，您可以将“方向”的绝对值设置为小于 1.0 以获得更长的曲线，而更大的用于更短的曲线。

【讨论】：