Como fazer uma animação com Javascript

Pois é, vou fazer um animação com Javascript, mas no HTML 4 e CSS 2… (ainda preciso me atualizar…)

Vamos aos passos:

Primeiramente, vamos obter uma imagem com sprites que serão trocadas para obter o efeito de “movimento” do objeto:

©D-Grafix 2006

Depois, vamos criar o html da seguinte maneira:

Walker


Agora, vamos criar o estilo para exibir a imagem acima (que possui o tamanho original de 750 pixels por 366 pixels) no div com id igual ao “walker” e definir o tamanho deste div para 150 pixels por 183 pixels (que é o tamanho de um sprite):



Com isso, a primeira parte da figura deve ter aparecido…
Para executar o efeito, vamos criar uma função que muda a posição da imagem para exibir cada sprite:



Fora desta função, colocamos ela para ser executada a cada 100 milisegundos através da função setInterval:



Legal! Agora, se quiser que ele “ande” para frente, é só mudar a posição do div com a propriedade left  e colocar esta instrução abaixo do backgroundPosition:


   //Altero o valor da posição da imagem de fundo
  document.getElementById(‘walker’).style.backgroundPosition = x + ‘px ’ + y + ‘px’;
 //Mudo a posição do div “walker” de 10 em 10 pixels
  document.getElementById(‘walker’).style.left =
   (parseInt(document.getElementById(‘walker’).offsetLeft) + 10) + ‘px’;

Ufa, deu trabalho mas foi… 🙂

Até mais!

Programação Java é aqui. Acesse as o blog para ficar atualizado sobre o mundo da Linguagem Java. Dicas, informações e muitos truques para se usar no dia-a-da do programador java.