html5 - setTimeout o setInterval o requestAnimationFrame

canvas

Question

Para juegos HTML5, con animación de lienzo para dispositivos móviles.

Estoy enfrentando algunos problemas de rendimiento que difieren en la velocidad entre cada dispositivo y los otros.

requestAnimationFrame acelera la animación del juego de acuerdo con la velocidad del dispositivo.
setInterval me sorprendió que hay un retraso de un dispositivo a otro.
setTimeout también es lento el dibujo sobre lienzo.

¿Quién tuvo una experiencia previa con los juegos móviles de HTML5 y puede guiarme para encontrar la mejor manera de tres de ellos (u otras técnicas, si están disponibles) para desarrollar animaciones en lienzos y ser estable en diferentes dispositivos móviles?

Answer 1

OPTIMIZATION requestAnimationFrame () ya que su introducción fue muy fácil para la CPU, lo que hace que las animaciones se detengan si la ventana o pestaña actual no está 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);
        }

Answer 2

Siempre use requestAnimationFrame cuando sea posible, ya que es para lo que está destinado. Es mejor usar un shim para soporte cuando no lo es, por lo que no necesita ocuparse de los detalles específicos.

Para que la animación o la lógica del juego se realicen a la misma velocidad a pesar del método real utilizado, debe usar la animación basada en el tiempo y los cálculos basados ​​en el tiempo para la física o similares.

Answer 3

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

Usa esta función para todos los casos.