提高速度,同时使用 60fps 游戏循环平滑插值移动动画
Increase velocity while smooth interpolating move animation with a 60fps game loop
我有一个具有 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 pixels/sec,但由于 boost,它将是 100 pixels/sec。这是一个巨大的差异。而且这个明显会跳
你通常不想这样做。我想你会想用速度添加 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 动画。
我有一个具有 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 pixels/sec,但由于 boost,它将是 100 pixels/sec。这是一个巨大的差异。而且这个明显会跳
你通常不想这样做。我想你会想用速度添加 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 动画。