javascript - 提高速度，同时使用 60fps 游戏循环平滑插值移动动画

Question

我有一个具有 x y 位置和 vx vy 速度的模型。

var model = { x: 0, y: 0, vx: 1, vy: 0 };

我有一个每 16 毫秒调用一次的更新函数，它根据速度更新位置。

function update() {
  model.x += model.vx;
  model.y += model.vy;
}

现在我想通过将速度乘以提升来加速这个模型:

var boost = 10;
function update() {
  model.x += model.vx * boost;
  model.y += model.vy * boost;
}

这会导致模型在位置之间跳跃，而不是插值和平滑移动。

如何提高速度并保持物体平稳移动？

Answer 1

这里的问题是您将 boost 与速度相乘。

看看实际发生了什么。 boost 的值为 10。现在假设速度为 10 像素/秒，但由于 boost，速度将为 100 像素/秒。这是一个巨大的差异。很明显，它会跳跃。

您通常不想这样做。我想您可能希望将 boost 值与速度相加。

我假设您知道您在学校学过的运动学公式。

其中一个是，

v = u + at

看，这里您实际上也将加速度(在您的情况下为提升)添加到速度而不是乘以它。

因此，您的代码将如下所示:

var boost = 10;
function update() { 
    model.x += model.vx + boost;
    model.y += model.vy + boost; 
}

或者您可以降低 boost 的值。

或者你可以在你的模型中添加加速度，当你想加速时它会增加，然后逐渐减小，一段时间后速度会恢复正常。

不过，如果速度(或加速度)变得太高，您最终还是会遇到同样的问题。

如果您真的想将速度提高 10 倍，那么您无能为力。

此外，如果您正在使用 setInterval，我建议您切换到 requestAnimationFrame 以获得 60 FPS 动画。