Há muitas formas de fazer com que
algo pareça animado
mas o princípio básico é sempre o mesmo.
Se pegarmos um grupo de
desenhos ou imagens
onde cada uma é um pouco
diferente da última,
e folhearmos as imagens
bem rápido,
vai parecer que a imagem está
em movimento.
De volta aos velhos tempos,
quando desenhávamos a mão livre
levaria um tempão para uma
animação de três segundos.
Felizmente para nós, vivemos no futuro.
Na verdade é muito fácil fazer uma
animação simples com código.
E eu irei mostrar como!
No lado direito, você pode ver que
há um carrinho fofo
em um lindo fundo amarelo.
E sim, eu mesma desenhei o carrinho,
obrigada.
Aqui você pode ver que estamos
configurando esta linda
cor de fundo.
E o carro não tem contorno, então
chamaremos isto de função noStroke.
Aqui fazemos uma nova
variável, X, a posição do carro
e atribuindo o valor 10.
Você verá que se
alterarmos este valor,
o carro se move pra trás
e pra frente.
Vamos trazê-lo para 10.
Aqui configuramos a cor de
preenchimento do carro
e desenhamos 2 retângulos
para o corpo do carro.
Então, o primeiro retângulo
é a parte debaixo
e este retângulo
a parte de cima.
E então aqui faremos o
mesmo com as rodas.
Configuramos a cor e
desenhamos duas elipses:
Uma em "x + 25"
e outra "x + 75"
E finalmente teremos algo novo.
Isto aqui é chamado de
função definição
Você aprenderá tudo sobre
isso mais tarde,
Por enquanto, basta observar
e memorizar.
As coisas importantes para se observar são
esta palavra "desenhar" e estas chaves.
Esta chave aberta aqui
e este chave fechada aqui.
Este todo é o que nós chamamos de
loop de desenho ou loop de animação.
E tudo o que você coloca
dentro destes chaves
É executado várias vezes,
muito, muito rápido.
Por isso se chama loop.
E então tudo fora destas chaves
é executado apenas uma vez
bem no início do programa.
O primeiro passo da animação é mover
todo o seu código nas chaves
então sua imagem será desenhada repetidas
vezes.
Vamos tentar.
Vou puxar todo o código do desenho
e então colar dentro do loop.
Para lembrar que esse bloqueio de códigos
vai dentro das chaves,
vou indentar tudo selecionando
e pressionando Tab.
E agora eu sei que este código
está dentro das chaves.
Então você pode dizer,
tudo parece exatamente o mesmo;
nada mudou.
Porque a primeira vez que
desenharmos em loop,
O computador vai processar:
"Faça uma nova variável x, configure para 10,
desenhe 2 retângulos e duas elipses".
E depois ele vai até o
começo e processar:
"Faça uma nova variável x,
configure para 10,
desenhe dois retângulos e duas elipses".
E assim consecutivamente.
Nada mudou, e você não verá animação.
só desenhando retângulos e elipses
no topo das anteriores.
Lembre-se o que: se queremos
fazer algo parecer animado,
você vai precisar mudar seu desenho
um pouco cada vez.
Então se quero meu carro
indo para frente,
devo mudar o valor da variável x, certo?
É mesmo, então vamos fazer isto...11.
Ah! Não! Mas agora o valor será
11 em cada uma das vezes.
Que valor de x devo obter para
manter a mudança
quando o computador só executa o
mesmo código diversas vezes?
Okay, veja esse truque de mágica.
Lembre-se, esta variável x
faz uma nova variável.
Quando temos isto dentro
do loop do desenho,
isto gera uma nova variável
chamada "x"cada única vez.
O que precisamos é fazer esta
variável fora do loop do desenho.
Desta forma, isto será feito somente
uma vez.
Toda vez que o computador executar
este código e ver a variável x,
irá reutilizar a variável anterior,
usando o último valor atribuído.
Então farei o seguinte:
vou pegar esta variável
e faremos isso fora
do loop do desenho.
Então agora ele está fazendo
a variável uma vez.
E toda vez que executa em
uma variável x,
Ele vai reutilizar a mesma variável.
E agora, o último valor atribuído,
foi 11.
e então será sempre 11.
E é aqui onde a mágica começa.
Em algum lugar do loop,
faremos mudanças no valor de x
para ser um pouco maior do
que costumava ser. Assim:
x obtém o valor antigo de x
mais, digamos, um.
Opa! Funcionou!
Exceto, por estar borrado.
Se você está imaginando
porque ele ficou assim,
é porque nos esquecemos de desenhar
este fundo dentro do loop
Então o carro é desenhado
constantemente,
mas você pode ver todos os carros
abaixo do novo.
Se eu só puxar esta linha dentro do
topo do loop do desenho, como este,
então pressiono "Restart"
e posso ver meu carro de novo...
Uau! Está perfeito!
Se quisermos fazer o carro
ir mais rápido,
deevemos mudar a quantidade
aumentando o valor de x.
Se nós fizermos 10, uau!
Ele sai da tela!
E se colocarmos um valor negativo,
como x-10 e ...
Aqui está!
Faça isso positivo novamente,
Aí está!
Há coisas importantes para
se lembrar:
Isto aqui é chamado
de loop de desenho.
Você deve colocar o código do desenho
aqui dentro
para ele desenhar continuamente.
E então, você quer fazer
a variável fora de seu desenho.
É super importante fazer a variável
fora do loop do desenho.
Podemos reutilizar todas as vezes.
Então dentro do loop de desenho, bem aqui,
vamos mudar a variável um pouco,
de preferência configurando
para um valor antigo,
mais algum número mais ou
menos algum numero.
Por fim, você quer utilizar sua variável
em algum lugar dentro do código
para que o desenho apareça
sempre diferente.
E ... é isso!
Legendado por [Marcus Abud]
Revisado por [Cainã Perri]