沿三次贝塞尔曲线动画时的速度不一致

Question

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

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

// 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;
}

Answer 1

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

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