Animaciones repetivas en javascript - Parte 1

Cuando diseñamos páginas web muchas veces deseamos animar elementos. Las posibilidades son varias. La opción más sencilla es utilizar la ya conocida librería JQuery y, si hicieran falta, los muchos pluings que están a nuestro alcance.
Aquella, ciertamente, es una salida rápida y eficaz para solucionar animaciones no repetitivas. Sin embargo, si alguna vez has intentado diseñar una página web con movimientos repetitivos te habrás percatado de que aquella no es una salida siquiera admisible.
¿Por qué?
Bien, la respuesta la puedes hallar por ti mismo. Intenta hacer un bucle con la función jquery animate y no tardarás en percatarte que has abierto una puerta para colgar tu PC.
¿La solución?
Muy fácil, haz tú mismo las animaciones. Los diseñadores web y programadores javascript utilizan una función innovadora: requestAnimationFrame. La misma informa al navegador que la función-parámetro es una animación. De esta forma los frames per second de la animación se adaptarán a la frecuencia de actualización de la pantalla, evitándote miles de inconvenientes. Lo único que debes hacer es un bucle donde cada lectura del script supone una modificación en los estilos css del elemento que buscas animar.

Aquí podrás encontrar más información al respecto:

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

http://www.project-cyan.com/2012-05-requestanimationframe-adios-al-setinterval/

http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/

En poco seguiremos hablando de todo esto.

por Juan
para ae Soluciones web - Diseño de páginas web en Argentina

Blogalaxia Tags: requestAnimationFrame, animacion con javascript, diseño web