在requestAnimationFrame游戏循环中跟踪时间/帧的最佳方法是什么？

Question

我已经编写了非常简单的游戏教程，它们使用了一个简单的requestAnimationFrame游戏循环。他们不需要跟踪经过的时间或帧速率：

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");

function gameLoop() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  //Drawing, etc.
  var myRAF = requestAnimationFrame(gameLoop);
}
gameLoop();

现在，我想学习如何从Spritesheet动画化诸如步行周期之类的东西，而不是仅对静态对象的运动进行动画处理。我认为这需要首先学习如何跟踪渲染一帧所需的时间，或者您在哪个帧上。我的印象是，如果您使用RAF而不是setInterval或setTimeout（糟糕！），则不需要这样做。我见过人们使用Date对象，requestAnimationFrame时间戳和Performance.now，尽管我还不了解代码。如果我的目标是从Spritesheets进行动画制作，并确保无论特定玩家获得多少fps，游戏中的运动速度都是相同的，那么哪个是使用requestAnimationFrame开发游戏的最佳选择？我读过，您必须将游戏中的所有速度乘以时间因子，但不知道如何。否则，速度仅为30fps的慢速计算机正在浏览游戏并以一半速度射击子弹，而速度较快的计算机则为60fps，是吧？

[请向我展示如何在游戏循环中实现时间/帧跟踪代码，以及实现此目标的不同方法的利弊。也很高兴看到您将如何使用该代码来制作动画，例如从Spritesheet上行走或拍打翅膀，以及如何将运动速度乘以时间因子，以便每个人都获得相同的游戏体验。