Criando Animação em JavaScript

Você já deve estar acostumado a criar gifs animados no Flash, photoshop ou outro editor que faça o serviço, mas você já tentou criar uma animação usando JavaScript? Pois é, vamos criar uma animação bem simples, com códigos também simples no passo-a-passo pra você entender direitinho como tudo foi feito, sempre estou colocando um link no fim da postagem para que você possa baixar o código pronto pra você ter uma idéia de como fica no final. Vamos começar por criar o código HTML que será posteriormente manipulado pelo JavaScript.

Primeiro, criamos uma DIV mestre:

<div id="masterDiv" style="position: relative; width: 120px;">

Esta irá conter 9 divs outras que vamos usar para a animação:

<div id="1" style="position:relative; width:30px; height:30px; background-color:red; float:left; margin:5px"></div>
<div id="2" style="position:relative; width:30px; height:30px; background-color:blue; float:left; margin:5px"></div>
<div id="3" style="position:relative; width:30px; height:30px; background-color:green; float:left; margin:5px"></div><br />
<div id="4" style="position:relative; width:30px; height:30px; background-color:green; float:left; margin:5px"></div>
<div id="5" style="position:relative; width:30px; height:30px; background-color:red; float:left; margin:5px"></div>
<div id="6" style="position:relative; width:30px; height:30px; background-color:blue; float:left; margin:5px"></div><br />
<div id="7" style="position:relative; width:30px; height:30px; background-color:blue; float:left; margin:5px"></div>
<div id="8" style="position:relative; width:30px; height:30px; background-color:green; float:left; margin:5px"></div>
<div id="9" style="position:relative; width:30px; height:30px; background-color:red; float:left; margin:5px"></div><br />

E, então, fechamos a div mestre:

</div>

Temos de definir o evento que irá disparar a função que estamos prestes a declarar, para fazer a função de início de carregamento da página, quando nós vamos especificá-la na tag body.

<body onload="animate()">

Usamos CSS para definir o fundo da div e propriedade de cor, de tal maneira que cria um padrão; divs fila de baixo são compensados por 1 div. Agora estamos prontos para escrever o function.Because JavaScript que queremos utilizar a função de mudar a cor da div de fundo em uma determinada cor, temos que usar a declaração If / Else. Vou associar uma variável "a" com o estado da matriz (para o estado padrão, "a" será 0 (zero)). A animação vai mudar mais e mais, porque a função contém um laço, então temos que declarar a variável "um" fora da função, caso contrário, cada vez que a função será chamada, "a" será atribuído a 0 (zero).

<script type="text/javascript">
var a=0
function animate()
{

Agora, temos de declarar e iniciar algumas matrizes com todas as combinações possíveis de cor uma linha pode ter.

colors= new Array()
colors[0]="green"
colors[1]="red"
colors[2]="blue"
colors2= new Array()
colors2[0]="blue"
colors2[1]="green"
colors2[2]="red"
colors3= new Array()
colors3[0]="red"
colors3[1]="blue"
colors3[2]="green"

Temos também que declarar 3 variáveis mais (o número da primeira div em cada linha), as variáveis que iremos utilizar para identificar os divs ao mudar as cores.

var b=1
var c=4
var d=7

Ao mudar de cores, temos de saber qual é o patern atual, isto é, quando usamos a variável. Nós sabemos o que tem o padrão da matriz, quando a página é carregada, assim nós podemos agora escrever como as cores mudarão.
Vamos escrever um loop que irá mover as cores em cada linha uma div à direita utilizando as variáveis e matrizes, temos declarado anteriormente:

if (a==0)
{
for (i=0;i<3;i++) backgroundcolor="colors[i]" backgroundcolor="colors2[i] document.getElementById(d).style.backgroundColor=colors3[i]

Para alterar a cor de todos os divs, temos que incrementar as variáveis B, C e D para que todos os IDs terá suas propriedades declaradas.

b++
c++
d++
}

Agora, para evitar entrar neste novo ciclo, o incremento que a variável "A" por 1. Em seguida, usamos o setTimeout () para fazer o loop funcionar cada 0,5 segundos, para que possamos definir a outros padrões.

a++
setTimeout(animate, 500)
}

Nesse ponto, "a" é igual a 1, por isso vamos escrever o código para o padrão seguinte da instrução else if. Esta parte é como o anterior, só que agora vamos atribuir as matrizes compensada por um.

else if (a==1)
{
for (i=0;i<3;i++)
{
document.getElementById(b).style.backgroundColor=colors2[i]
document.getElementById(c).style.backgroundColor=colors3[i]
document.getElementById(d).style.backgroundColor=colors[i]
b++
c++
d++
}
a++
setTimeout(animate,500)
}

Temos que fazer isso mais uma vez, a fim de obter o padrão desejado. Desta vez, a = 2, mas desde que esta é a última afirmação, podemos apenas uma instrução Else. Desta vez, vamos atribuir um valor a 0, portanto, a função irá começar de novo.

else
{
for (i=0;i<3;i++)
{
document.getElementById(b).style.backgroundColor=colors3[i]
document.getElementById(c).style.backgroundColor=colors[i]
document.getElementById(d).style.backgroundColor=colors2[i]
b++
c++
d++
}
a=0
setTimeout(animate,500)
}
}
</script>