requestAnimationFrame做游戏or动画时限定帧数的解决方法

转载地址: http://www.chenzhenxi.com/?p=33

在使用cocos2d-html5开发游戏，但是发现帧数无法锁定，翻看源代码原来就还没处理这里。。所以出现了这篇文章。

《requestAnimationFrame做游戏or动画时限定帧数的解决方法》

requestAnimationFrame 是html5 提出专门解决动画问题的。其实就是一个每秒60次的callback。

我们用setTimeout与setInterval一样能达到requestAnimationFrame 效果。

但是requestAnimationFrame 却提供了一个setTimeout/setInterval 不提供的功能。

当浏览器切换到别的tab时，requestAnimationFrame 会自动停止调用，直到网页再次被focus。

但是它最大的缺点就是锁死的帧数为60帧。当你的动画/游戏复杂的时候，很有可能你的帧数达不到60.这就使得帧数不稳定，最后导致游戏/动画效果不佳。。

所以为了解决这个问题。我使用了setInterval来调用我游戏的主循环，而requestAnimationFrame 则负责监控网页状态。

requestAnimationFrame将会让一个计数器不断增加。

而setInterval则不断减少这个计数器。

当计数器小于0时证明游戏应该处于waiting状态。

当然这个缺点就是，不是那么即时的让游戏停止，最多会延迟9帧才停止。 ：）

代码如下

window.requestAnimFrame = (function () {
    return  window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame
})();
var FPS = 30;//30 fps ，maximun 300 FPS   300 = requestAnimCount*5
var duration = 1/FPS*1000;//duration
var requestAnimCount = 5;//counter
var updateRequestAnimTime = function(t){//
    if(requestAnimCount<5){
        requestAnimCount+=5;//maximun 300 FPS  = requestAnimCount*5
    }
    window.requestAnimFrame(updateRequestAnimTime);
}
window.requestAnimFrame(updateRequestAnimTime);
setInterval(function(){
    if(requestAnimCount < 0){
        console.log('idle~');
        return;
    }
    requestAnimCount--;
    console.log('running');
    //your main loop~;
},duration);