Animaciones repetivas en javascript - Parte 2

Hemos visto que el diseño de páginas web muchas veces nos demanda realizar animaciones. Si no queremos entregarnos a las fauces de Flash, la mejor opción es trabajar con javascript. La última vez hemos presentado la función javascript requestAnimationFrame. Bien, hoy nos toca profundizar un poco más en todo esto.
Veámoslo poco a poco.
Supón que quieres mover un elemento horizontalmente. Lo primero que debemos tener en cuenta es su propiedad css fundamental: position absolute, y su ubicación espacial con left y top. Sin esto así definido, difícilmente podamos hacer algo.
Bien, ahora debemos pensar en un bucle infinito que, en cada lectura, cambie mínimamente la propiedad css left. Preliminarmente, tendríamos que pensar en algo como esto:

var divMovible = document.getElementById(‘div_movible’);
function moverDiv(){
divMovible.style.left = divMovible.offsetLeft + 1 + “px”;
//moverDiv()
}

Allí arriba hemos definido, en primer lugar, una variable que guarda al elemento que queremos mover. Luego hemos definido una función moverDiv:
1º) modificamos la propiedad css left del elemento que queremos mover, agregándole un nuevo píxel;
2º) recursivamente, llamamos a nuestra función.

Bien, ahora solo nos resta agregar a todo esto el requestAnimationFrame. La función moverDiv será llamada desde el interior del requestAnimationFrame (es decir, como su parámetro), tanto en el interior del bucle como desde fuera de él:

var divMovible = document.getElementById(‘div_movible’);
function moverDiv(){
divMovible.style.left = movible.offsetLeft + 1 + “px”;
window.requestAnimationFrame(moverDiv);
}
window.requestAnimationFrame(moverDiv);

Más adelante daré nuevas precisiones sobre su uso. Por el momento, ya tienes un div animado, que se desplazará infinitamente hacia la derecha.

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

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