所以，这里可能完全是脑残。 setInterval() 的语法非常清晰。每 x 毫秒做一些事情。如何最好地使用requestAnimationFrame() 翻译？
我有大约 300 个对象，每个对象都应该以一定的间隔（每 8、6、2 等秒）执行动画序列？我怎样才能最好地使用requestAnimationFrame() 来实现这一点，它每秒被调用约 60 次？可能有一个简单的答案，我只是，为了我的一生，无法弄清楚。
【问题讨论】：
标签： javascript canvas html5-canvas
要强制 requestAnimationFrame 坚持特定的 FPS，您可以同时使用两者！
var fps = 15;
function draw() {
setTimeout(function() {
requestAnimationFrame(draw);
// Drawing code goes here
}, 1000 / fps);
}
有点奇怪，但不是世界上最令人困惑的事情。
您也可以使用 requestAnimationFrame 而不是 FPS，而是使用经过的时间，以便根据自上次调用以来的时间差绘制需要更新的对象：
var time;
function draw() {
requestAnimationFrame(draw);
var now = new Date().getTime(),
dt = now - (time || now);
time = now;
// Drawing code goes here... for example updating an 'x' position:
this.x += 10 * dt; // Increase 'x' by 10 units per millisecond
}
这两个 sn-ps 来自 this fine article，其中包含更多详细信息。
顺便问下好问题！我想我也没有在 SO 上看到这个答案（而且我在这里太多了）
【讨论】：
mozAnimationStartTime 仅在 Firefox 上可用，我不知道任何其他浏览器实现了提供时间戳。
requestAnimationFrame 是相当低的级别，它只是做了你已经说过的事情：大约以 60fps 的速度被调用（假设浏览器可以跟上那个速度）。因此，通常您需要在此基础上构建一些东西，就像具有游戏循环的游戏引擎一样。
在我的游戏引擎中，我有这个（在此处进行解释/简化）：
window.requestAnimationFrame(this._doFrame);
...
_doFrame: function(timestamp) {
var delta = timestamp - (this._lastTimestamp || timestamp);
for(var i = 0, len = this.elements.length; i < len; ++i) {
this.elements[i].update(delta);
}
this._lastTimestamp = timestamp;
// I used underscore.js's 'bindAll' to make _doFrame always
// get called against my game engine object
window.requestAnimationFrame(this._doFrame);
}
然后我的游戏引擎中的每个元素都知道如何更新自己。在您的情况下，应该每 2、6、8 秒更新一次的每个元素都需要跟踪已经过去了多少时间并相应地更新：
update: function(delta) {
this.elapsed += delta;
// has 8 seconds passed?
if(this.elapsed >= 8000) {
this.elapsed -= 8000; // reset the elapsed counter
this.doMyUpdate(); // whatever it should be
}
}
Canvas API 和 requestAnimationFrame 是相当低级的，它们是动画和游戏引擎之类的构建块。如果可能的话，我会尝试使用现有的，如 cocos2d-js 或这些天来的其他任何东西。
【讨论】：