-
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]
