WEBVTT

00:00:00.359 --> 00:00:03.013
Há muitas formas de fazer com que 
algo pareça animado

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

00:00:05.071 --> 00:00:07.442
Se pegarmos um grupo de 
desenhos ou imagens

00:00:07.442 --> 00:00:09.726
onde cada uma é um pouco
diferente da última,

00:00:09.726 --> 00:00:11.392
e folhearmos as imagens 
bem rápido,

00:00:11.392 --> 00:00:13.417
vai parecer que a imagem está
em movimento.

00:00:13.417 --> 00:00:16.570
De volta aos velhos tempos,
quando desenhávamos a mão livre

00:00:16.570 --> 00:00:19.723
levaria um tempão para uma 
animação de três segundos.

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

00:00:22.877 --> 00:00:26.130
Na verdade é muito fácil fazer uma 
animação simples com código.

00:00:26.130 --> 00:00:27.568
E eu irei mostrar como!

00:00:27.568 --> 00:00:30.270
No lado direito, você pode ver que 
há um carrinho fofo

00:00:30.270 --> 00:00:32.012
em um lindo fundo amarelo.

00:00:32.012 --> 00:00:34.965
E sim, eu mesma desenhei o carrinho, 
obrigada.

00:00:34.977 --> 00:00:36.655
Aqui você pode ver que estamos

00:00:36.655 --> 00:00:39.313
configurando esta linda 
cor de fundo.

00:00:39.313 --> 00:00:43.141
E o carro não tem contorno, então 
chamaremos isto de função noStroke.

00:00:43.141 --> 00:00:46.039
Aqui fazemos uma nova 
variável, X, a posição do carro

00:00:46.039 --> 00:00:47.307
e atribuindo o valor 10.

00:00:47.307 --> 00:00:49.456
Você verá que se 
alterarmos este valor,

00:00:49.456 --> 00:00:52.105
o carro se move pra trás 
e pra frente.

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

00:00:53.311 --> 00:00:55.968
Aqui configuramos a cor de 
preenchimento do carro

00:00:55.968 --> 00:00:58.495
e desenhamos 2 retângulos 
para o corpo do carro.

00:00:58.495 --> 00:01:00.733
Então, o primeiro retângulo 
é a parte debaixo

00:01:00.733 --> 00:01:02.524
e este retângulo 
a parte de cima.

00:01:02.524 --> 00:01:05.027
E então aqui faremos o 
mesmo com as rodas.

00:01:05.027 --> 00:01:07.299
Configuramos a cor e 
desenhamos duas elipses:

00:01:07.299 --> 00:01:08.648
Uma em "x + 25"

00:01:08.648 --> 00:01:10.191
e outra "x + 75"

00:01:10.191 --> 00:01:12.828
E finalmente teremos algo novo.

00:01:12.828 --> 00:01:15.099
Isto aqui é chamado de
função definição

00:01:15.099 --> 00:01:17.351
Você aprenderá tudo sobre
isso mais tarde,

00:01:17.351 --> 00:01:19.721
Por enquanto, basta observar 
e memorizar.

00:01:19.721 --> 00:01:24.012
As coisas importantes para se observar são
esta palavra "desenhar" e estas chaves.

00:01:24.012 --> 00:01:26.740
Esta chave aberta aqui
e este chave fechada aqui.

00:01:26.750 --> 00:01:30.210
Este todo é o que nós chamamos de
loop de desenho ou loop de animação.

00:01:30.210 --> 00:01:32.587
E tudo o que você coloca
dentro destes chaves

00:01:32.587 --> 00:01:35.234
É executado várias vezes,
muito, muito rápido.

00:01:35.234 --> 00:01:36.702
Por isso se chama loop.

00:01:36.702 --> 00:01:38.734
E então tudo fora destas chaves

00:01:38.734 --> 00:01:41.656
é executado apenas uma vez
bem no início do programa.

00:01:41.656 --> 00:01:45.479
O primeiro passo da animação é mover
todo o seu código nas chaves

00:01:45.479 --> 00:01:47.833
então sua imagem será desenhada repetidas
vezes.

00:01:47.833 --> 00:01:48.875
Vamos tentar.

00:01:48.875 --> 00:01:52.005
Vou puxar todo o código do desenho

00:01:52.005 --> 00:01:54.261
e então colar dentro do loop.

00:01:54.261 --> 00:01:58.089
Para lembrar que esse bloqueio de códigos 
vai dentro das chaves,

00:01:58.089 --> 00:02:01.917
vou indentar tudo selecionando 
e pressionando Tab.

00:02:02.237 --> 00:02:05.016
E agora eu sei que este código 
está dentro das chaves.

00:02:05.746 --> 00:02:08.730
Então você pode dizer,
tudo parece exatamente o mesmo;

00:02:08.730 --> 00:02:10.034
nada mudou.

00:02:10.034 --> 00:02:12.620
Porque a primeira vez que 
desenharmos em loop,

00:02:12.620 --> 00:02:14.116
O computador vai processar:

00:02:14.116 --> 00:02:18.123
"Faça uma nova variável x, configure para 10, 
desenhe 2 retângulos e duas elipses".

00:02:18.123 --> 00:02:20.487
E depois ele vai até o 
começo e processar:

00:02:20.487 --> 00:02:22.653
"Faça uma nova variável x, 
configure para 10,


00:02:22.653 --> 00:02:25.619
desenhe dois retângulos e duas elipses".

00:02:25.619 --> 00:02:28.298
E assim consecutivamente.


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

00:02:31.301 --> 00:02:34.660
só desenhando retângulos e elipses 
no topo das anteriores.

00:02:34.660 --> 00:02:37.770
Lembre-se o que: se queremos
fazer algo parecer animado,

00:02:37.770 --> 00:02:40.360
você vai precisar mudar seu desenho
um pouco cada vez.

00:02:40.360 --> 00:02:42.761
Então se quero meu carro 
indo para frente,

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

00:02:45.361 --> 00:02:48.052
É mesmo, então vamos fazer isto...11.

00:02:48.052 --> 00:02:51.117
Ah! Não! Mas agora o valor será 
11 em cada uma das vezes.

00:02:51.117 --> 00:02:54.427
Que valor de x devo obter para 
manter a mudança

00:02:54.427 --> 00:02:57.513
quando o computador só executa o 
mesmo código diversas vezes?

00:02:57.513 --> 00:02:59.707
Okay, veja esse truque de mágica.

00:02:59.707 --> 00:03:02.479
Lembre-se, esta variável x
faz uma nova variável.

00:03:02.479 --> 00:03:04.748
Quando temos isto dentro 
do loop do desenho,

00:03:04.748 --> 00:03:07.737
isto gera uma nova variável
chamada "x"cada única vez.

00:03:07.737 --> 00:03:10.764
O que precisamos é fazer esta
variável fora do loop do desenho.

00:03:10.764 --> 00:03:13.261
Desta forma, isto será feito somente 
uma vez.

00:03:13.261 --> 00:03:17.492
Toda vez que o computador executar 
este código e ver a variável x,

00:03:17.492 --> 00:03:22.483
irá reutilizar a variável anterior, 
usando o último valor atribuído.

00:03:22.483 --> 00:03:25.079
Então farei o seguinte:
vou pegar esta variável

00:03:25.079 --> 00:03:27.483
e faremos isso fora 
do loop do desenho.

00:03:27.483 --> 00:03:30.267
Então agora ele está fazendo
a variável uma vez.

00:03:31.227 --> 00:03:33.483
E toda vez que executa em
uma variável x,

00:03:33.483 --> 00:03:35.479
Ele vai reutilizar a mesma variável.

00:03:35.479 --> 00:03:38.117
E agora, o último valor atribuído,
foi 11.

00:03:38.117 --> 00:03:39.492
e então será sempre 11.

00:03:39.492 --> 00:03:41.987
E é aqui onde a mágica começa.

00:03:41.987 --> 00:03:43.563
Em algum lugar do loop,

00:03:43.563 --> 00:03:45.139
faremos mudanças no valor de x

00:03:45.139 --> 00:03:47.467
para ser um pouco maior do 
que costumava ser. Assim:

00:03:47.467 --> 00:03:51.989
x obtém o valor antigo de x
mais, digamos, um.

00:03:52.749 --> 00:03:54.271
Opa! Funcionou!

00:03:54.761 --> 00:03:56.893
Exceto, por estar borrado.

00:03:56.893 --> 00:03:59.157
Se você está imaginando
porque ele ficou assim,

00:03:59.157 --> 00:04:02.381
é porque nos esquecemos de desenhar 
este fundo dentro do loop

00:04:02.381 --> 00:04:04.447
Então o carro é desenhado
constantemente,

00:04:04.447 --> 00:04:07.073
mas você pode ver todos os carros 
abaixo do novo.

00:04:07.073 --> 00:04:11.740
Se eu só puxar esta linha dentro do 
topo do loop do desenho, como este,

00:04:12.040 --> 00:04:15.984
então pressiono "Restart"
e posso ver meu carro de novo...

00:04:15.984 --> 00:04:18.029
Uau! Está perfeito!

00:04:18.029 --> 00:04:19.970
Se quisermos fazer o carro
ir mais rápido,

00:04:19.970 --> 00:04:22.631
deevemos mudar a quantidade
aumentando o valor de x.

00:04:22.631 --> 00:04:24.834
Se nós fizermos 10, uau!
Ele sai da tela!

00:04:24.834 --> 00:04:28.727
E se colocarmos um valor negativo,
como x-10 e ...

00:04:28.727 --> 00:04:29.778
Aqui está!

00:04:30.018 --> 00:04:32.195
Faça isso positivo novamente,

00:04:33.485 --> 00:04:34.542
Aí está!

00:04:34.542 --> 00:04:36.550
Há coisas importantes para 
se lembrar:

00:04:36.550 --> 00:04:39.157
Isto aqui é chamado 
de loop de desenho.

00:04:39.157 --> 00:04:41.681
Você deve colocar o código do desenho
aqui dentro

00:04:41.681 --> 00:04:43.487
para ele desenhar continuamente.

00:04:43.487 --> 00:04:46.292
E então, você quer fazer
a variável fora de seu desenho.

00:04:46.292 --> 00:04:49.249
É super importante fazer a variável
fora do loop do desenho.

00:04:49.249 --> 00:04:51.496
Podemos reutilizar todas as vezes.

00:04:51.496 --> 00:04:53.519
Então dentro do loop de desenho, bem aqui,

00:04:53.519 --> 00:04:56.032
vamos mudar a variável um pouco,

00:04:56.032 --> 00:04:58.242
de preferência configurando 
para um valor antigo,

00:04:58.242 --> 00:05:01.432
mais algum número mais ou 
menos algum numero.

00:05:01.432 --> 00:05:05.504
Por fim, você quer utilizar sua variável
em algum lugar dentro do código

00:05:05.504 --> 00:05:07.019
para que o desenho apareça 
sempre diferente.

00:05:08.534 --> 00:05:10.046
E ... é isso!


00:05:10.046 --> 00:05:14.136
Legendado por [Marcus Abud]
Revisado por [Cainã Perri]