-->

的setTimeout或setInterval的或requestAnimationFrame(set

2019-07-05 16:21发布

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

使用此功能适用于所有情况



Answer 3:

优化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);
        }


文章来源: setTimeout or setInterval or requestAnimationFrame