Animaciones repetivas en javascript - Parte 5

Hoy veremos cómo aplicar la función matemática del seno a nuestra animación. La idea general es la siguiente: con cada lectura de la función requestAnimationFrame(moverDiv) queremos nuestra función del seno arroje un valor diferente. Por ello, tenemos que procurar que el argumento de la función seno (es decir, nuestra x) vaya cambiando con cada lectura.

Manos a la obra. En primer lugar debemos definir un valor inicial para nuestra x:

var x = 0;

Luego debemos procurar modificar mínimamente esta variable al final del moverDiv:

moverDiv(){   //código   x=x+0.1   window.requestAnimationFrame(moverDiv);}

Por ultimo, aplicamos nuestros conocimientos de matemática (!):

divMovible.style.left = Math.sin(x) + 50  + “px”;

El código final, para un movimiento ondulatorio sin fin:

var divMovible = document.getElementById(‘div_movible’);
var ultimaEjecucion = date.now();
var fps = 30;
var x = 0;
function moverDiv(){
var ahora = date.now();
if( (ahora – ultimaEjecucion) < (1000 / fps) ){
divMovible.style.left = Math.sin(x) + 50  + “px”;
x=x+0.1
}
ultimaEjecucion = date.now();
window.requestAnimationFrame(moverDiv);
}

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

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