web-dev-qa-db-ja.com

setTimeoutまたはsetIntervalまたはrequestAnimationFrame

HTML5ゲームの場合、モバイルデバイス用のキャンバスアニメーション付き。

各デバイスと他のデバイスの間で速度が異なるいくつかのパフォーマンスの問題に直面しています。

requestAnimationFrameデバイスの速度に応じてゲームのアニメーションを高速化します。
setIntervalデバイスから別のデバイスへの遅延があることにショックを受けました。
setTimeoutキャンバスへの描画も遅くなります。

モバイルHTML5ゲームを以前に使用した経験のある人は、キャンバス上でアニメーションを開発するための3つのゲーム（または利用可能な場合は他のテクニック）の最良の方法を、さまざまなモバイルデバイスで安定させるように導くことができますか？

htmlcanvassettimeoutsetintervalrequestanimationframe
19
Soliman

可能な場合は常にrequestAnimationFrameを使用してください。これは、その目的であるためです。 サポートにはシムを使用する そうでない場合は、最善の方法です。したがって、特定の詳細を扱う必要はありません。

実際に使用されている方法に関係なく、アニメーションまたはゲームロジックが同じ速度で実行されるようにするには、時間ベースのアニメーションと物理学などの時間ベースの計算を使用する必要があります。

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

すべての場合にこの関数を使用します

13
Shishir Arora

OPTIMIZATION 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);
        }
0
zloctb