domingo, 8 de setembro de 2013

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

Nenhum comentário:

Postar um comentário

~le comentário