Question

我试图让一个圆形物体移动到球位置，但是当它接近球位置时，无论它开始移动的地方都会减速。我似乎无法让它以恒定的速度移动而不会减慢速度。

我正在使用lerp进行线性插值并直接在我的移动函数中使用它。

function lerp(v0, v1, t) {
    return v0 * (1 - t) + v1 * t;
};

FPS = 60;

function Objects(/*parameters*/){
    this.pos = new Vector2D(x, y);

    this.move = function(x, y){
      this.pos.x = lerp(this.pos.x, x, FPS/1000);
      this.pos.y = lerp(this.pos.y, y, FPS/1000);
    };
};

function update(){
    //Move object to ball position
    SuperObject.move(ball.pos.x, ball.pos.y);
    drawObjects();
    setTimeout(update, 1000/FPS);
};

DEMO链接：http://codepen.io/knoxgon/pen/EWVyzv

Answer 1

这是预期的行为。当您通过从当前位置到目标的线性插值来设置位置时，它定义了一个收敛系列。

让我们看一个更简单的例子：假设您只有一个维度，并且该圈子最初位于x(0)=10且目标位于tx=0。您可以按x(n+1) = lerp(x(n), tx, 0.1) = 0.9 * x(n) + 0.1 * tx = 0.9 * x(n)定义每个步骤（为简单起见，为0.9）。因此，该系列变为x(0) = 10, x(1) = 9, x(2) = 8.1, x(n) = 10 * pow(0.9, n)，这是一个收敛的几何级数，并且永远不会以恒定速度描述运动。

你必须改变你的等式：

move(x, y) {
    let deltax = x - this.pos.x;
    let deltay = y - this.pos.y;
    const deltaLength = Math.sqrt(deltax * deltax + deltay * deltay);
    const speed = 10;
    if (deltaLength > speed) {
        deltax = speed * deltax / deltaLength;
        deltay = speed * deltay / deltaLength;
    }
    this.pos.x += deltax;
    this.pos.y += deltay;
}

http://codepen.io/anon/pen/LWpRWJ

JS CANVAS - 圆到达目标位置时减慢速度

1 个答案: