0:00:00.359,0:00:03.013
Há muitas formas de fazer com que [br]algo pareça animado

0:00:03.013,0:00:05.071
mas o princípio básico é sempre o mesmo.

0:00:05.071,0:00:07.442
Se pegarmos um grupo de [br]desenhos ou imagens

0:00:07.442,0:00:09.726
onde cada uma é um pouco[br]diferente da última,

0:00:09.726,0:00:11.392
e folhearmos as imagens [br]bem rápido,

0:00:11.392,0:00:13.417
vai parecer que a imagem está[br]em movimento.

0:00:13.417,0:00:16.570
De volta aos velhos tempos,[br]quando desenhávamos a mão livre

0:00:16.570,0:00:19.723
levaria um tempão para uma [br]animação de três segundos.

0:00:19.723,0:00:22.877
Felizmente para nós, vivemos no futuro.

0:00:22.877,0:00:26.130
Na verdade é muito fácil fazer uma [br]animação simples com código.

0:00:26.130,0:00:27.568
E eu irei mostrar como!

0:00:27.568,0:00:30.270
No lado direito, você pode ver que [br]há um carrinho fofo

0:00:30.270,0:00:32.012
em um lindo fundo amarelo.

0:00:32.012,0:00:34.965
E sim, eu mesma desenhei o carrinho, [br]obrigada.

0:00:34.977,0:00:36.655
Aqui você pode ver que estamos

0:00:36.655,0:00:39.313
configurando esta linda [br]cor de fundo.

0:00:39.313,0:00:43.141
E o carro não tem contorno, então [br]chamaremos isto de função noStroke.

0:00:43.141,0:00:46.039
Aqui fazemos uma nova [br]variável, X, a posição do carro

0:00:46.039,0:00:47.307
e atribuindo o valor 10.

0:00:47.307,0:00:49.456
Você verá que se [br]alterarmos este valor,

0:00:49.456,0:00:52.105
o carro se move pra trás [br]e pra frente.

0:00:52.105,0:00:53.311
Vamos trazê-lo para 10.

0:00:53.311,0:00:55.968
Aqui configuramos a cor de [br]preenchimento do carro

0:00:55.968,0:00:58.495
e desenhamos 2 retângulos [br]para o corpo do carro.

0:00:58.495,0:01:00.733
Então, o primeiro retângulo [br]é a parte debaixo

0:01:00.733,0:01:02.524
e este retângulo [br]a parte de cima.

0:01:02.524,0:01:05.027
E então aqui faremos o [br]mesmo com as rodas.

0:01:05.027,0:01:07.299
Configuramos a cor e [br]desenhamos duas elipses:

0:01:07.299,0:01:08.648
Uma em "x + 25"

0:01:08.648,0:01:10.191
e outra "x + 75"

0:01:10.191,0:01:12.828
E finalmente teremos algo novo.

0:01:12.828,0:01:15.099
Isto aqui é chamado de[br]função definição

0:01:15.099,0:01:17.351
Você aprenderá tudo sobre[br]isso mais tarde,

0:01:17.351,0:01:19.721
Por enquanto, basta observar [br]e memorizar.

0:01:19.721,0:01:24.012
As coisas importantes para se observar são[br]esta palavra "desenhar" e estas chaves.

0:01:24.012,0:01:26.740
Esta chave aberta aqui[br]e este chave fechada aqui.

0:01:26.750,0:01:30.210
Este todo é o que nós chamamos de[br]loop de desenho ou loop de animação.

0:01:30.210,0:01:32.587
E tudo o que você coloca[br]dentro destes chaves

0:01:32.587,0:01:35.234
É executado várias vezes,[br]muito, muito rápido.

0:01:35.234,0:01:36.702
Por isso se chama loop.

0:01:36.702,0:01:38.734
E então tudo fora destas chaves

0:01:38.734,0:01:41.656
é executado apenas uma vez[br]bem no início do programa.

0:01:41.656,0:01:45.479
O primeiro passo da animação é mover[br]todo o seu código nas chaves

0:01:45.479,0:01:47.833
então sua imagem será desenhada repetidas[br]vezes.

0:01:47.833,0:01:48.875
Vamos tentar.

0:01:48.875,0:01:52.005
Vou puxar todo o código do desenho

0:01:52.005,0:01:54.261
e então colar dentro do loop.

0:01:54.261,0:01:58.089
Para lembrar que esse bloqueio de códigos [br]vai dentro das chaves,

0:01:58.089,0:02:01.917
vou indentar tudo selecionando [br]e pressionando Tab.

0:02:02.237,0:02:05.016
E agora eu sei que este código [br]está dentro das chaves.

0:02:05.746,0:02:08.730
Então você pode dizer,[br]tudo parece exatamente o mesmo;

0:02:08.730,0:02:10.034
nada mudou.

0:02:10.034,0:02:12.620
Porque a primeira vez que [br]desenharmos em loop,

0:02:12.620,0:02:14.116
O computador vai processar:

0:02:14.116,0:02:18.123
"Faça uma nova variável x, configure para 10, [br]desenhe 2 retângulos e duas elipses".

0:02:18.123,0:02:20.487
E depois ele vai até o [br]começo e processar:

0:02:20.487,0:02:22.653
"Faça uma nova variável x, [br]configure para 10,[br]

0:02:22.653,0:02:25.619
desenhe dois retângulos e duas elipses".

0:02:25.619,0:02:28.298
E assim consecutivamente.[br]

0:02:28.298,0:02:31.301
Nada mudou, e você não verá animação.

0:02:31.301,0:02:34.660
só desenhando retângulos e elipses [br]no topo das anteriores.

0:02:34.660,0:02:37.770
Lembre-se o que: se queremos[br]fazer algo parecer animado,

0:02:37.770,0:02:40.360
você vai precisar mudar seu desenho[br]um pouco cada vez.

0:02:40.360,0:02:42.761
Então se quero meu carro [br]indo para frente,

0:02:42.761,0:02:45.361
devo mudar o valor da variável x, certo?

0:02:45.361,0:02:48.052
É mesmo, então vamos fazer isto...11.

0:02:48.052,0:02:51.117
Ah! Não! Mas agora o valor será [br]11 em cada uma das vezes.

0:02:51.117,0:02:54.427
Que valor de x devo obter para [br]manter a mudança

0:02:54.427,0:02:57.513
quando o computador só executa o [br]mesmo código diversas vezes?

0:02:57.513,0:02:59.707
Okay, veja esse truque de mágica.

0:02:59.707,0:03:02.479
Lembre-se, esta variável x[br]faz uma nova variável.

0:03:02.479,0:03:04.748
Quando temos isto dentro [br]do loop do desenho,

0:03:04.748,0:03:07.737
isto gera uma nova variável[br]chamada "x"cada única vez.

0:03:07.737,0:03:10.764
O que precisamos é fazer esta[br]variável fora do loop do desenho.

0:03:10.764,0:03:13.261
Desta forma, isto será feito somente [br]uma vez.

0:03:13.261,0:03:17.492
Toda vez que o computador executar [br]este código e ver a variável x,

0:03:17.492,0:03:22.483
irá reutilizar a variável anterior, [br]usando o último valor atribuído.

0:03:22.483,0:03:25.079
Então farei o seguinte:[br]vou pegar esta variável

0:03:25.079,0:03:27.483
e faremos isso fora [br]do loop do desenho.

0:03:27.483,0:03:30.267
Então agora ele está fazendo[br]a variável uma vez.

0:03:31.227,0:03:33.483
E toda vez que executa em[br]uma variável x,

0:03:33.483,0:03:35.479
Ele vai reutilizar a mesma variável.

0:03:35.479,0:03:38.117
E agora, o último valor atribuído,[br]foi 11.

0:03:38.117,0:03:39.492
e então será sempre 11.

0:03:39.492,0:03:41.987
E é aqui onde a mágica começa.

0:03:41.987,0:03:43.563
Em algum lugar do loop,

0:03:43.563,0:03:45.139
faremos mudanças no valor de x

0:03:45.139,0:03:47.467
para ser um pouco maior do [br]que costumava ser. Assim:

0:03:47.467,0:03:51.989
x obtém o valor antigo de x[br]mais, digamos, um.

0:03:52.749,0:03:54.271
Opa! Funcionou!

0:03:54.761,0:03:56.893
Exceto, por estar borrado.

0:03:56.893,0:03:59.157
Se você está imaginando[br]porque ele ficou assim,

0:03:59.157,0:04:02.381
é porque nos esquecemos de desenhar [br]este fundo dentro do loop

0:04:02.381,0:04:04.447
Então o carro é desenhado[br]constantemente,

0:04:04.447,0:04:07.073
mas você pode ver todos os carros [br]abaixo do novo.

0:04:07.073,0:04:11.740
Se eu só puxar esta linha dentro do [br]topo do loop do desenho, como este,

0:04:12.040,0:04:15.984
então pressiono "Restart"[br]e posso ver meu carro de novo...

0:04:15.984,0:04:18.029
Uau! Está perfeito!

0:04:18.029,0:04:19.970
Se quisermos fazer o carro[br]ir mais rápido,

0:04:19.970,0:04:22.631
deevemos mudar a quantidade[br]aumentando o valor de x.

0:04:22.631,0:04:24.834
Se nós fizermos 10, uau![br]Ele sai da tela!

0:04:24.834,0:04:28.727
E se colocarmos um valor negativo,[br]como x-10 e ...

0:04:28.727,0:04:29.778
Aqui está!

0:04:30.018,0:04:32.195
Faça isso positivo novamente,

0:04:33.485,0:04:34.542
Aí está!

0:04:34.542,0:04:36.550
Há coisas importantes para [br]se lembrar:

0:04:36.550,0:04:39.157
Isto aqui é chamado [br]de loop de desenho.

0:04:39.157,0:04:41.681
Você deve colocar o código do desenho[br]aqui dentro

0:04:41.681,0:04:43.487
para ele desenhar continuamente.

0:04:43.487,0:04:46.292
E então, você quer fazer[br]a variável fora de seu desenho.

0:04:46.292,0:04:49.249
É super importante fazer a variável[br]fora do loop do desenho.

0:04:49.249,0:04:51.496
Podemos reutilizar todas as vezes.

0:04:51.496,0:04:53.519
Então dentro do loop de desenho, bem aqui,

0:04:53.519,0:04:56.032
vamos mudar a variável um pouco,

0:04:56.032,0:04:58.242
de preferência configurando [br]para um valor antigo,

0:04:58.242,0:05:01.432
mais algum número mais ou [br]menos algum numero.

0:05:01.432,0:05:05.504
Por fim, você quer utilizar sua variável[br]em algum lugar dentro do código

0:05:05.504,0:05:07.019
para que o desenho apareça [br]sempre diferente.

0:05:08.534,0:05:10.046
E ... é isso![br]

0:05:10.046,0:05:14.136
Legendado por [Marcus Abud][br]Revisado por [Cainã Perri]