¿Quiere controlar el FPS de mi animación una buena razón para continuar usando setTimeout en lugar de requestAnimationFrame?

Question

Me pregunto si debería cambiar mi juego para solicitar AnimationFrame. Si todavía hay una razón para hacerlo, como he leído, setTimeout() también se detiene cuando cambias de pestaña en los principales navegadores.

De todos modos, digo que quiero controlar el FPS de mi animación.

Actualmente puedo hacerlo de esta manera:

k.state.loopinterval = 
window.setInterval(renderLoop(), 1000/k.settings.engine.fps); 

Dónde k.settings.engine.fps es el fps deseado.

Si lo hago de la manera requestAnimationFrame, que pierden esa posibilidad, y sólo yo lo que puede dar voy a dar:

window.requestAnimFrame(k.operations.startLoop); 
renderLoop(); 

He visto algunas personas sugieren colocar el requestAnimFrame en otro bucle:

setInterval(function() { 
    requestAnimationFrame(draw); 
}, 1000/60); 

Entonces ... ¿Qué debo hacer? ¿Déjalo así?

¿Cuáles son los beneficios exactos de requestAnimationFrame, ahora que setTimeout también se pausa cuando se cambian las pestañas?

Answer 1

requestAnimationFrame es la forma correcta de hacer animaciones.

¿Por qué?

Porque el navegador puede optimizar el procesamiento para hacer una animación más suave. Respondiendo a la pregunta, otra forma es:

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(callback, element){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 

Y hay otra forma en el siguiente enlace.

Cuando llama requestAnimation, hace que el navegador entienda cuándo es el momento de volver a dibujar el html. Si realiza animaciones/transiciones en CSS y mueve cosas o cambia el fondo (como sprites), el uso de requestAnimation hará que el renderizado funcione cuando llame a requestAnimation. Sin él, el navegador mostrará cualquier cosa en qué momento, lo que puede hacer más rediseños necesarios.

Incluso, la forma en que se están ejecutando los navegadores hará más optimizaciones de las que aún no conocemos. Haga que el navegador comprenda lo que estamos haciendo y luego nos ayuden.

Encontré this link, puedo añadir algunas ideas más