HTML 5: acelere sus animaciones de JavaScript con requestAnimationFrame

Gracias a CSS3 ya no necesitamos Flash para producir animaciones atractivas. En general, ni siquiera necesitamos JavaScript. Pero CSS3 se queda corto para algunos casos de uso. Si necesita calcular o recalcular sus animaciones, no hay forma de evitar JavaScript. No tienes que usar setTimeout y setInterval aunque. Estos tienen la desventaja de simplemente repetir una función en intervalos definidos. En cuanto a las animaciones, los intervalos definidos no son la mejor manera de hacer que funcionen. Si ha estado usando estas dos funciones, probablemente ya experimentó dificultades para encontrar los valores de los intervalos que coinciden con los pasos de animación requeridos. Es más, setTimeout y setInterval rara vez están sincronizados con la frecuencia de actualización de la pantalla, lo que provoca el efecto de que las animaciones no se pueden presentar con precisión.

requestAnimationFrame transfiere la responsabilidad al navegador

Con HTML 5 una alternativa con el nombre de requestAnimationFrame Fue presentado. Su modo de funcionamiento es muy similar a las funciones conocidas anteriormente, con una gran excepción. En lugar de definir el intervalo de la frecuencia de actualización, con todas las desventajas mencionadas anteriormente, dejamos eso en manos del navegador. Esto es especialmente notable en comparación con setTimeout y setInterval, cuando tiene más de una animación ejecutándose en paralelo en el navegador. Estos no se sentirán como fluidos y contemporáneos. La alternativa, requestAnimationFrame reduce la velocidad de fotogramas, si es necesario, manteniendo así la animación fluida:

var schritt = 0;
function animation() {
 schritt += 10;
 document.getElementById("element").style.left = schritt + "px";
 window.requestAnimationFrame(animation);
}
window.requestAnimationFrame(animation);

En este ejemplo, animamos un elemento HTML en pasos de diez píxeles de izquierda a derecha. La frecuencia de actualización predeterminada suele ser de unos sesenta fotogramas por segundo, pero puede variar debido a las cargas de trabajo de la CPU. El navegador no intenta ceñirse a una velocidad de fotogramas fija. Otra ventaja de requestAnimationFrame es, que solo se ejecutan animaciones en ventanas o pestañas visibles. Tan pronto como se detecta la animación en una ventana o pestaña que no está activa en ese momento, la animación se detiene, pero se reanuda automáticamente después de que la ventana o pestaña vuelve a estar activa. Para detener las animaciones manualmente, la función cancelAnimationFrame puede ser usado.

Soporte de navegador solo con prefijo de proveedor

En el momento de escribir este artículo, solo Webkit, Mozilla y el Internet Explorer más reciente admiten la función. requestAnimationFrame. La función de cancelar cancelAnimationFrame se limita a Mozilla en este momento. Como las funciones son relativamente nuevas, se necesita una sintaxis diferente para cada navegador. Puede utilizar una variable para establecer los prefijos correspondientes:

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

Conclusión: La realización de animaciones realizadas con requestAnimationFrame habla por si mismo. Simplemente son mucho más rápidos y fiables. Por lo tanto, siempre que sea posible, debe preferir este método a los métodos convencionales del pasado, tal vez con una alternativa implementada para navegadores más antiguos. Especialmente los usuarios de clientes móviles se beneficiarán de este método, ya que los clientes móviles suelen tener un poder de procesamiento más bajo de todos modos. Si está buscando una comparación bien hecha, diríjase a Microsoft’s Prueba de conducción de Internet Explorer! Ellos de todas las personas…

(dpe)