Javascript 基于时间的动画和 requestAnimationFrame

Question

我一直在尝试使用 canvas 和动画，特别是 HTML5 游戏，很快就了解了仅使用 requestAnimationFrame (rFA) 的局限性，并且已经转向时间基于动画。

无论显示器刷新率或 FPS 如何，我都希望保持恒定的游戏玩法，但不确定如何最好地处理动画。我已经阅读了各种实现，但可以说还没有找到任何最佳实践。我应该结合使用两者吗？

到目前为止，我考虑了几种选择:

仅

• rFa(当 fps 更改时更改结果):

  var animate = function() {
       draw();
       requestAnimationFrame(animate);
  }
  

• 仅基于时间(并不总是一致):

  var animate = function() {
      now = Date.now();
      delta = now - last;
      last = now;
  
      draw(delta);
      window.setTimeout(animate, 1000/60)
  }
  

• 使用 setInterval 在 rFA 上设置 FPS(并不总是一致):

  setInterval(function () {
      draw();
      requestAnimationFrame();
  }, 1000/fps);
  

• rFA 尝试强制 fps(看起来不太稳健，变量 delta 效果会更好):

  var delta = 1000 / fps;
  var animate = function() {
     now = Date.now();
     if (now - last >= delta) {
         last = now;
      }
  
      draw(delta);
      requestAnimationFrame(animate);
  }
  

• 基于时间的rFA(一些奇怪的结果):

  var animate = function () {
      now = Date.now();
      delta = now - last;
      last = now;
  
      draw(delta);
      requestAnimationFrame(animate);
  }
  

忽略浏览器支持的缺乏和 Date.now() 的使用，我只是想展示我的思维流程。我认为最后一个选项更好，但最后两个选项可能会遇到更新太远、缺少碰撞等问题，以及更新时间太长以致动画失去所有控制。

此外，当用户使用 rFA 退出时，只有动画会暂停，使用基于时间的函数调用 rFA 意味着游戏/动画将继续运行背景不理想。

处理动画的最佳方法是什么，无论帧率如何，都试图保持一致的结果，以上所有内容可能都很糟糕，我对长篇文章表示歉意(这正是我迄今为止所尝试过的，但我仍然很迷失)？考虑到上述问题会更好吗？

Answer 1

如果您有可用的 requestAnimationFrame，我不会反对它，只会从其回调中调用 draw()。当然，您应该始终使用增量计时。

这是 raF 的复杂变体，在帧速率过低的情况下，可以回退到 setTimeout 进行游戏逻辑更新:

var maximalUpdateDelay = 25; // ms
var updateTimeout, now;
function animate() {
    updateTimeout = setTimeout(animate, maximalUpdateDelay);
    var delta = -now + (now = Date.now());
    update(now, delta);
}
function main() {
    clearTimeout(updateTimeout);
    animate(); // update the scene
    draw(); // render the scene
    requestAnimationFrame(main);
}
main();