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]