JS CANVAS - 当达到目标位置时圈速变慢

我想让一个圆形物体移动到位置球的位置，但是无论何时它接近球位置，它都会放慢，无论它开始移动的位置。我似乎无法使其以恒定速度移动而不会放慢速度。JS CANVAS - 当达到目标位置时圈速变慢

我使用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

来源

2017-02-28 Teo Carter

是否能重现上的jsfiddle的问题会更容易理解 – Mihai

@Mihai据上传:) –

这是预期的行为。当你通过从当前位置到目标的线性插值来设置位置时，它定义了一个收敛序列。让我们来看一个更简单的例子：假设你只有一个维度，圆圈最初为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

来源

2017-02-28 10:17:25

非常感谢你@ Tamas :)你刚刚帮了一个受伤的战士！我不能感谢你足够^^ –

对不起，但不应该const deltaLength = Math.sqrt（deltax * deltax + deltay + deltay）;取而代之的是const deltaLength = Math.sqrt（deltax * deltax + deltay * deltay）;在那里deltay * deltay而不是像y轴那样添加y轴？ –

@VG你说得很对，编辑 –

JS CANVAS - 当达到目标位置时圈速变慢

回答

相关问题