超文本标记语言画布间隔与RequestAnimationFrame
所以，也许这完全是脑筋急转弯。setInterval()的语法非常清晰。每隔x毫秒做一件事。如何最好地将其转换为使用requestAnimationFrame()？
我有大约300个对象，每个对象都应该以一定的时间间隔(每隔8秒、6秒、2秒等)执行一个动画序列？我怎样才能最好地使用每秒被调用60次的requestAnimationFrame()来完成这个任务呢？可能有一个简单的答案，我只是，我的生活，找不到它。
回答 2
Stack Overflow用户
发布于 2012-08-14 06:25:25
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或其他目前已经存在的东西。
Stack Overflow用户
发布于 2012-08-14 10:20:12
要强制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
}这两个片段来自this fine article，其中包含更多详细信息。
顺便说一句，问得好！我想我也没有看到过这样的回答(我在这里太多了)
https://stackoverflow.com/questions/11943120
复制相似问题
腾讯云开发者
