Vamos aos passos:
Primeiramente, vamos obter uma imagem com sprites que serão trocadas para obter o efeito de "movimento" do objeto:
Depois, vamos criar o html da seguinte maneira:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Walker</title>
</head>
<body>
<div id="walker"></div>
</body>
</html>
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):
...
<head>
<style>
div#walker {
background-image: url("walk_side.jpg");
background-repeat: no-repeat;
background-position: 0px 0px;
width: 150px;
height: 183px;
position: absolute;
left: 0px;
top: 0px;
}
</style>
...
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:
...
<script>
//Posições iniciais
var x = 0;
var y = 0;
//Função que troca a posição da figura e mostra um determinado sprite
function trocaSprite() {
//Obtenho o valor atual da posição da imagem de fundo
var position = document.getElementById('walker').style.backgroundPosition;
//Se ela existir...
if (position) {
//Obtenho os novos valores x e y através de uma string (os valores estão separados por espaço)
var pos = position.split(' ');
//Garanto que existem dois valores (x e y)
if (pos.length == 2) {
//Calculo nova posição x (-150 pixels, que é a largura de cada sprite na imagem)
x = parseInt(pos[0]) - 150;
//Se ela for menor ou igual que -750 pixels é que a imagem acabou (tamanho máximo)
if (x <= -750) {
//Então reinicio a posição x
x = 0;
//Se a posição y for 0 pixel, troco o valor para -183 pixels (que é a parte debaixo da imagem), se for -183 pixels, volto a posição y para 0 pixel
y = (y == 0 ? -183 : 0);
}
}
}
//Altero o valor da posição da imagem de fundo
document.getElementById('walker').style.backgroundPosition = x + 'px ' + y + 'px';
}
</script>
...
Fora desta função, colocamos ela para ser executada a cada 100 milisegundos através da função setInterval:
...
<script>
setInterval(trocaSprite, 100);
</script>
...
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!
Nenhum comentário:
Postar um comentário