Javascript 增加速度，同时平滑插值移动动画，以60 fps的游戏循环

我有一个带有

xy

位置和

vx-vy

速度的模型

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

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

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

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

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

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

---

如何提高速度并保持对象平稳移动？

这里的问题是，您将

提升量

与速度相乘

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

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

看看到底发生了什么。

boost

的值为10。现在假设速度是10像素/秒，但由于加速，它将是100像素/秒。这是一个巨大的差异。很明显，它会跳

你永远不想经常这样做。我想你应该把

boost

值和速度相加

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

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

我想你知道你在学校学过的运动学公式

其中之一是,

v = u + at

看，这里你实际上是把加速度（在你的例子中是加速）加到速度上，而不是乘以它

因此，您的代码如下所示：

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

或者你可以降低boost的值

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

但是，如果速度（或加速度）变得太高，最终也会出现同样的问题

如果你真的想把速度提高10倍，那你就无能为力了

---

另外，如果您使用的是

setInterval

，我建议您切换到

requestAnimationFrame

，以获得60 FPS的动画效果。

是

++

还是

+=

在

model.y++model.vy*boost？