Criando Animação em JavaScript

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:


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


E, então, fechamos a div mestre:


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).

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)

}

}

Prontinho, o script já está pronto. Se você quiser ver como isso funciona, basta baixar o código ou fazer o passo-a-passo você mesmo.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: