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

Question

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

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

// 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，对于较短的曲线，您可以使绝对值更大。