提高速度,同时通过 60fps 游戏循环平滑插值移动动画



我有一个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;
}

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

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

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

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

你通常永远不想这样做。我猜你会想用速度加上boost值。

我假设你知道你在学校学习的运动学公式。

其中之一是,

v = u + at

看,在这里你实际上也将加速度(在你的例子中是提升(添加到速度上,而不是乘以它。

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

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

或者你可以降低提升的值。

或者,您可以在模型中添加加速度,该加速度会在您想要提升时增加,并且会逐渐降低,并且速度将在一段时间后正常。

尽管如此,如果速度(或加速度(变得太高,您最终会遇到同样的问题。

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

另外,如果您使用的是setInterval,我建议您切换到 60 FPS 动画的requestAnimationFrame

最新更新