setTimeout或setInterval或requestAnimationFrame

Question

适用于HTML5游戏,适用于移动设备的画布动画.

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

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

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

Answer 1

永远使用requestAnimationFrame,因为这是它的意思.如果不是,最好使用垫片来提供支持,因此您无需处理具体细节.

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

Answer 2

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);
})();

在所有情况下都使用此功能