setTimeout或setInterval或requestAnimationFrame

时间:2012-12-18 14:39:14

标签: html5 canvas settimeout setinterval requestanimationframe

对于HTML5游戏,使用移动设备的画布动画。

我面临一些性能问题,这些问题会影响每台设备与其他设备之间的速度。

requestAnimationFrame 根据设备速度加快游戏动画 setInterval 让我感到震惊的是,从设备到另一个设备有延迟 setTimeout 在画布上的绘图速度也很慢。

谁曾经有过移动HTML5游戏的经验可以指导我在其他三个游戏(或其他技术,如果有的话)中使用最佳方式在不同的移动设备上稳定地开发动画?

3 个答案:

答案 0 :(得分:19)

尽可能使用requestAnimationFrame,因为这就是它的意思。最好use a shim for support当它不是时,所以你不需要处理具体的细节。

为了使动画或游戏逻辑尽管使用实际方法以相同的速度执行,您应该使用基于时间的动画和基于时间的物理计算等。

答案 1 :(得分:13)

window.requestAnimFrame = function(){
    return (
        window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ draw1){
            window.setTimeout(draw1, 1000 / 60);
        }
    );
}();
   window.requestAnimFrame(draw);
})();

对所有情况使用此功能

答案 2 :(得分:0)

优化 由于requestAnimationFrame()的引入对CPU非常友好,如果当前窗口或选项卡不可见,则会导致动画停止。

https://flaviocopes.com/requestanimationframe/

 var count = 0;
    const IDS = requestAnimationFrame(repeatOften);

        function repeatOften() {
            count++;
            if(count > 4 ){
                // cancelAnimationFrame (IDS);
                 console.warn('finish');
                 return;
            }
            console.log('init' + count);
            // Do whatever
            requestAnimationFrame(repeatOften);
        }