Engine de animação em JavaScript

function now(){
 return ( new Date ).getTime();
}
 
function animate( time, fn, fps ){
  var start = now(),
      intrval = fps ? 1000/fps : 20,

      id = setInterval(function(){
        var diff = now() - start, p = diff/time;
     
        if( p > 1 ) p = 1;
         fn( p );
        if( p == 1 ) clearInterval( id );
     
      }, intrval);
}

Acima um exemplo  de uma engine simples de animação em JavaScript. 

Simbora ver lá como funciona!

A priori você tem que entender o que é uma animação. 

O exemplo acima usa a melhor técnica (na minha opinião) de se animar algo, 

que é com porcentagem.

Suponhamos que você queira animar o width de uma div de 200px para 300px em 1 segundo. 

A animação se dá numa transição de 200px até 300px. Então vai ser assim:

width = 200 + (300 - 200) * p; 

Essa é a "fórmula mágica", onde p é a porcentagem definida por: p = ( now - start )/time [linha 9]; 

Onde now [veja a function now  - linha 1] representa o tempo agora, 

start o tempo no inicio da animação e time o tempo total em que a animação deverá ocorrer (por exemplo: 1000 milisegundos). 

O FPS [Frames Per Second] representa em que interval a função será chamada para 

atualizar o p [como o nome fps já é bem auto-explicativo, vou pular essa parte]. 

Quando p = 1 significa que a animação chegou ao fim, então só é preciso "desligar" o setInterval e fim!

Vamos testar a função animate no console:

animate( 1000, function(p){
 console.log( p );
});
Viu? Agora tente animar algo simples, por exemplo:
var box = document.getElementById('box'), startWidth = 200, toWidth = 300;
animate( 1000, function(p){
  box.style.width = startWidth + ( toWidth - startWidth ) * p;
});
Espero que você tenha entendido tudo, caso não, pode comentar :D