javascript - JS中DeltaTime函数的结果不连贯

我正在构建一个HTML5画布游戏，该游戏使用requestAnimationFrame渲染画布中的每个帧。为了以基于秒而不是帧速率的速率移动动画，我正在构建一个类似于Unity中使用的deltaTime函数：

var startTime = new Date().getTime();
var lastTime = null;

function deltaTime()
{
    if (lastTime == null)
    {
        lastTime = new Date().getTime();
    }
    var dt = new Date().getTime() - lastTime;
    lastTime = new Date().getTime();
    return dt;
}

但是，当我将此值乘以动画速度时，它会导致断断续续的结果，而不是平滑的动画。毫秒精度似乎还不够。如何改善此功能以产生平滑的结果？

最佳答案

签出更新版本的requestAnimationFrame，该版本发送的准确时间为毫秒级

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision

但这可能不是造成您断断续续的原因。

结合使用delta-time的requestAnimationFrame（aka RAF）会导致被动画处理的对象出现在准确的位置。

如果要在天空上设置太阳动画，那么RAF + deltaTime将确保在绘制太阳时将其绘制在天空的正确位置。它可以确保准确性，但要牺牲阳光摇曳的运动。

RAF + deltaTime牺牲了平滑的动画来提高定位精度。

您没有给出代码示例，但是解决方案是确保您的代码足够有效，可以在RAF时间跨度内完全绘制。

另外，您可以减小移动量，以使跳过的帧对用户而言不太明显。