Animación con requestAnimationFrame

requestAnimationFrame (rAF) programa una función de devolución de llamada antes del siguiente repintado del navegador y sincroniza la animación con la frecuencia de actualización de la pantalla (normalmente, 60 fps). A diferencia de setInterval, rAF se pausa cuando la pestaña está oculta, lo que ahorra CPU y batería.

Un bucle de rAF: defina una función animate que dibuje el fotograma actual y, después, llame a requestAnimationFrame(animate) para programar el siguiente. El navegador llama a animate antes de cada repintado, lo que crea una animación continua a la frecuencia de fotogramas de la pantalla.

rAF pasa un DOMHighResTimeStamp (milisegundos desde que se cargó la página) a la función de devolución de llamada. Úselo para calcular un movimiento independiente de la frecuencia de fotogramas: delta = timestamp - lastTimestamp. Multiplique la velocidad por delta para mover la misma distancia por segundo, independientemente de la frecuencia de fotogramas.

Calcule el tiempo transcurrido desde el último fotograma y escale el movimiento en consecuencia. Un objeto que se mueve a 100px/s recorre 100 * (delta / 1000) píxeles por fotograma. Esto garantiza una física coherente en pantallas de 30 fps y 144 fps.

rAF devuelve un identificador. Cancélelo con cancelAnimationFrame(handle). Guarde el identificador en una variable, compruebe una marca de ejecución dentro del bucle o cancele la animación al limpiar el componente. Cancele siempre los bucles cuando se elimine el elemento del DOM.

En cada fotograma: (1) aplique clearRect a todo el canvas, (2) actualice las variables de estado (posición, ángulo, tiempo), (3) dibuje todos los objetos en sus nuevas posiciones y (4) llame a requestAnimationFrame para el siguiente fotograma. No omita nunca clearRect: los fotogramas anteriores se acumularán y dejarán un rastro.

Utilice transiciones y animaciones CSS para animaciones sencillas basadas en propiedades (efectos al pasar el cursor, entrada deslizante de un modal). Utilice rAF para animaciones complejas e interactivas —bucles de juegos, simulaciones físicas y renderizado en canvas— en las que necesite un control detallado de cada fotograma.

Para escenas complejas, dibuje primero en un canvas fuera de pantalla y, después, use drawImage para dibujarlo sobre el canvas visible en una sola operación. Esto evita el parpadeo, ya que nunca se muestra un fotograma dibujado parcialmente: el canvas visible se actualiza de forma atómica en cada fotograma.

Limite la frecuencia de fotogramas a un valor inferior (por ejemplo, 30 fps): compruebe si ha transcurrido suficiente tiempo desde el último dibujo antes de renderizar. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Programe rAF igualmente para mantener la capacidad de respuesta.

El panel Performance de Chrome DevTools registra las funciones de devolución de llamada de rAF en el gráfico de llamas de JavaScript. Busque funciones de devolución de llamada largas que superen los 16 ms, ya que provocan pérdidas de fotogramas. Utilice el medidor de FPS (Rendering → FPS Meter) para observar la frecuencia de fotogramas en tiempo real durante la interacción.

Para animaciones declarativas más sencillas sin controlar manualmente el tiempo: element.animate(keyframes, options). WAAPI gestiona las funciones de temporización, los modos de relleno y las iteraciones, y delega el cálculo de los fotogramas al navegador. Utilice rAF para la lógica de renderizado personalizada que WAAPI no pueda expresar.

¿Por qué se debe multiplicar la velocidad de la animación por el tiempo delta en un bucle de requestAnimationFrame?

requestAnimationFrame sincroniza la animación de JavaScript con la frecuencia de actualización de la pantalla y se pausa en las pestañas ocultas. El parámetro timestamp permite un movimiento independiente de la frecuencia de fotogramas mediante el escalado basado en el tiempo delta. El patrón de bucle de animación de canvas (borrar, actualizar, dibujar y programar), combinado con cancelAnimationFrame para la limpieza, constituye la base de unas animaciones web fluidas y eficientes.