web-dev-qa-db-fra.com

setTimeout ou setInterval ou requestAnimationFrame

Pour les jeux HTML5, avec animation de la zone de dessin pour les appareils mobiles.

Je suis confronté à des problèmes de performances qui différencient la vitesse de chaque périphérique.

requestAnimationFrame accélère l'animation du jeu en fonction de la vitesse de l'appareil.
setInterval m'a choqué qu'il y ait un délai d'un périphérique à l'autre.
setTimeout ralentit également le dessin sur la toile.

Qui a une expérience précédente avec les jeux mobiles HTML5 peut me guider jeter la meilleure façon de trois d'entre eux (ou d'autres techniques si disponibles) pour développer une animation sur la toile soit stable sur différents appareils mobiles?

html5canvassettimeoutsetintervalrequestanimationframe
18
Soliman

Utilisez toujours requestAnimationFrame lorsque cela est possible, car c’est ce que cela signifie. Il est préférable de utiliser un support pour le support lorsque ce n'est pas le cas, afin de ne pas avoir à traiter de détails spécifiques.

Pour que l'animation ou la logique de jeu fonctionne à la même vitesse malgré la méthode utilisée, vous devez utiliser une animation et des calculs basés sur le temps pour la physique ou autres.

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

utiliser cette fonction pour tous les cas

13
Shishir Arora

OPTIMISATION requestAnimationFrame () depuis son introduction était très convivial, entraînant l'arrêt des animations si la fenêtre ou l'onglet en cours n'est pas visible.

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