Animaciones repetivas en javascript - Parte 3

En los artículos anteriores hemos presentado una herramienta harto valiosa para quienes se dedican al diseño de páginas web. Me estoy refiriendo a la función javascript requestAnimationFrame, la cual nos permite realizar animaciones repetitivas (o, como veremos en publicaciones siguientes, no tan repetitivas) para nuestros elementos con posición absoluta.
Recuerden que habíamos llegado a escribir el código para lograr que un elemento dentro del documento (en nuestro ejemplo, un div cuya id es ‘div_movible’) cobre movimiento, desplazándose velozmente hacia la izquierda de la pantalla y desaparecer allende los límites de la misma. El código que entonces teníamos era:

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

Desde ya, no queremos en toda ocasión que los elementos se disparen como truenos de una punta a la otra de nuestras páginas web. Por eso, hoy veremos una forma para controlar la velocidad del movimiento.
El truco consiste en agregar un condicional if al iniciarse la función moverDiv. La condición que debe cumplirse será precisamente de carácter temporal: sólo si ha pasado determinado tiempo desde la última vez que se ejecutó la función, entonces se continuará normalmente con la modificación de la propiedad css.
Comenzaremos agregando dos variables fuera de moverDiv();

var ultimaEjecucion = date.now();
var fps = 30;

Luego, modificaremos ligeramente la función moverDiv según lo indicado:

function moverDiv(){
var ahora = date.now(); if( (ahora – ultimaEjecucion) < (1000 / fps) ){
divMovible.style.left = movible.offsetLeft + 1 + “px”;
}
ultimaEjecucion = date.now();
window.requestAnimationFrame(moverDiv);
}

Sólo si han pasado 30 milisegundos desde la última vez que se ha ejecutado la función,  div_movible se desplazará un píxel hacia la derecha.
Veamos cómo quedaría nuestro código:

var divMovible = document.getElementById(‘div_movible’);
var ultimaEjecucion = date.now();
var fps = 30;
function moverDiv(){
var ahora = date.now(); if( (ahora – ultimaEjecucion) < (1000 / fps) ){
divMovible.style.left = movible.offsetLeft + 1 + “px”;
}
ultimaEjecucion = date.now();
window.requestAnimationFrame(moverDiv);
}
window.requestAnimationFrame(moverDiv);

Espero les sea útil. Cualquier cosa, me escriben.

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

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