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

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

演示链接: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