1
00:00:00,359 --> 00:00:03,013
Há muitas formas de fazer com que 
algo pareça animado

2
00:00:03,013 --> 00:00:05,071
mas o princípio básico é sempre o mesmo.

3
00:00:05,071 --> 00:00:07,442
Se pegarmos um grupo de 
desenhos ou imagens

4
00:00:07,442 --> 00:00:09,726
onde cada uma é um pouco
diferente da última,

5
00:00:09,726 --> 00:00:11,392
e folhearmos as imagens 
bem rápido,

6
00:00:11,392 --> 00:00:13,417
vai parecer que a imagem está
em movimento.

7
00:00:13,417 --> 00:00:16,570
De volta aos velhos tempos,
quando desenhávamos a mão livre

8
00:00:16,570 --> 00:00:19,723
levaria um tempão para uma 
animação de três segundos.

9
00:00:19,723 --> 00:00:22,877
Felizmente para nós, vivemos no futuro.

10
00:00:22,877 --> 00:00:26,130
Na verdade é muito fácil fazer uma 
animação simples com código.

11
00:00:26,130 --> 00:00:27,568
E eu irei mostrar como!

12
00:00:27,568 --> 00:00:30,270
No lado direito, você pode ver que 
há um carrinho fofo

13
00:00:30,270 --> 00:00:32,012
em um lindo fundo amarelo.

14
00:00:32,012 --> 00:00:34,965
E sim, eu mesma desenhei o carrinho, 
obrigada.

15
00:00:34,977 --> 00:00:36,655
Aqui você pode ver que estamos

16
00:00:36,655 --> 00:00:39,313
configurando esta linda 
cor de fundo.

17
00:00:39,313 --> 00:00:43,141
E o carro não tem contorno, então 
chamaremos isto de função noStroke.

18
00:00:43,141 --> 00:00:46,039
Aqui fazemos uma nova 
variável, X, a posição do carro

19
00:00:46,039 --> 00:00:47,307
e atribuindo o valor 10.

20
00:00:47,307 --> 00:00:49,456
Você verá que se 
alterarmos este valor,

21
00:00:49,456 --> 00:00:52,105
o carro se move pra trás 
e pra frente.

22
00:00:52,105 --> 00:00:53,311
Vamos trazê-lo para 10.

23
00:00:53,311 --> 00:00:55,968
Aqui configuramos a cor de 
preenchimento do carro

24
00:00:55,968 --> 00:00:58,495
e desenhamos 2 retângulos 
para o corpo do carro.

25
00:00:58,495 --> 00:01:00,733
Então, o primeiro retângulo 
é a parte debaixo

26
00:01:00,733 --> 00:01:02,524
e este retângulo 
a parte de cima.

27
00:01:02,524 --> 00:01:05,027
E então aqui faremos o 
mesmo com as rodas.

28
00:01:05,027 --> 00:01:07,299
Configuramos a cor e 
desenhamos duas elipses:

29
00:01:07,299 --> 00:01:08,648
Uma em "x + 25"

30
00:01:08,648 --> 00:01:10,191
e outra "x + 75"

31
00:01:10,191 --> 00:01:12,828
E finalmente teremos algo novo.

32
00:01:12,828 --> 00:01:15,099
Isto aqui é chamado de
função definição

33
00:01:15,099 --> 00:01:17,351
Você aprenderá tudo sobre
isso mais tarde,

34
00:01:17,351 --> 00:01:19,721
Por enquanto, basta observar 
e memorizar.

35
00:01:19,721 --> 00:01:24,012
As coisas importantes para se observar são
esta palavra "desenhar" e estas chaves.

36
00:01:24,012 --> 00:01:26,740
Esta chave aberta aqui
e este chave fechada aqui.

37
00:01:26,750 --> 00:01:30,210
Este todo é o que nós chamamos de
loop de desenho ou loop de animação.

38
00:01:30,210 --> 00:01:32,587
E tudo o que você coloca
dentro destes chaves

39
00:01:32,587 --> 00:01:35,234
É executado várias vezes,
muito, muito rápido.

40
00:01:35,234 --> 00:01:36,702
Por isso se chama loop.

41
00:01:36,702 --> 00:01:38,734
E então tudo fora destas chaves

42
00:01:38,734 --> 00:01:41,656
é executado apenas uma vez
bem no início do programa.

43
00:01:41,656 --> 00:01:45,479
O primeiro passo da animação é mover
todo o seu código nas chaves

44
00:01:45,479 --> 00:01:47,833
então sua imagem será desenhada repetidas
vezes.

45
00:01:47,833 --> 00:01:48,875
Vamos tentar.

46
00:01:48,875 --> 00:01:52,005
Vou puxar todo o código do desenho

47
00:01:52,005 --> 00:01:54,261
e então colar dentro do loop.

48
00:01:54,261 --> 00:01:58,089
Para lembrar que esse bloqueio de códigos 
vai dentro das chaves,

49
00:01:58,089 --> 00:02:01,917
vou indentar tudo selecionando 
e pressionando Tab.

50
00:02:02,237 --> 00:02:05,016
E agora eu sei que este código 
está dentro das chaves.

51
00:02:05,746 --> 00:02:08,730
Então você pode dizer,
tudo parece exatamente o mesmo;

52
00:02:08,730 --> 00:02:10,034
nada mudou.

53
00:02:10,034 --> 00:02:12,620
Porque a primeira vez que 
desenharmos em loop,

54
00:02:12,620 --> 00:02:14,116
O computador vai processar:

55
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".

56
00:02:18,123 --> 00:02:20,487
E depois ele vai até o 
começo e processar:

57
00:02:20,487 --> 00:02:22,653
"Faça uma nova variável x, 
configure para 10,


58
00:02:22,653 --> 00:02:25,619
desenhe dois retângulos e duas elipses".

59
00:02:25,619 --> 00:02:28,298
E assim consecutivamente.


60
00:02:28,298 --> 00:02:31,301
Nada mudou, e você não verá animação.

61
00:02:31,301 --> 00:02:34,660
só desenhando retângulos e elipses 
no topo das anteriores.

62
00:02:34,660 --> 00:02:37,770
Lembre-se o que: se queremos
fazer algo parecer animado,

63
00:02:37,770 --> 00:02:40,360
você vai precisar mudar seu desenho
um pouco cada vez.

64
00:02:40,360 --> 00:02:42,761
Então se quero meu carro 
indo para frente,

65
00:02:42,761 --> 00:02:45,361
devo mudar o valor da variável x, certo?

66
00:02:45,361 --> 00:02:48,052
É mesmo, então vamos fazer isto...11.

67
00:02:48,052 --> 00:02:51,117
Ah! Não! Mas agora o valor será 
11 em cada uma das vezes.

68
00:02:51,117 --> 00:02:54,427
Que valor de x devo obter para 
manter a mudança

69
00:02:54,427 --> 00:02:57,513
quando o computador só executa o 
mesmo código diversas vezes?

70
00:02:57,513 --> 00:02:59,707
Okay, veja esse truque de mágica.

71
00:02:59,707 --> 00:03:02,479
Lembre-se, esta variável x
faz uma nova variável.

72
00:03:02,479 --> 00:03:04,748
Quando temos isto dentro 
do loop do desenho,

73
00:03:04,748 --> 00:03:07,737
isto gera uma nova variável
chamada "x"cada única vez.

74
00:03:07,737 --> 00:03:10,764
O que precisamos é fazer esta
variável fora do loop do desenho.

75
00:03:10,764 --> 00:03:13,261
Desta forma, isto será feito somente 
uma vez.

76
00:03:13,261 --> 00:03:17,492
Toda vez que o computador executar 
este código e ver a variável x,

77
00:03:17,492 --> 00:03:22,483
irá reutilizar a variável anterior, 
usando o último valor atribuído.

78
00:03:22,483 --> 00:03:25,079
Então farei o seguinte:
vou pegar esta variável

79
00:03:25,079 --> 00:03:27,483
e faremos isso fora 
do loop do desenho.

80
00:03:27,483 --> 00:03:30,267
Então agora ele está fazendo
a variável uma vez.

81
00:03:31,227 --> 00:03:33,483
E toda vez que executa em
uma variável x,

82
00:03:33,483 --> 00:03:35,479
Ele vai reutilizar a mesma variável.

83
00:03:35,479 --> 00:03:38,117
E agora, o último valor atribuído,
foi 11.

84
00:03:38,117 --> 00:03:39,492
e então será sempre 11.

85
00:03:39,492 --> 00:03:41,987
E é aqui onde a mágica começa.

86
00:03:41,987 --> 00:03:43,563
Em algum lugar do loop,

87
00:03:43,563 --> 00:03:45,139
faremos mudanças no valor de x

88
00:03:45,139 --> 00:03:47,467
para ser um pouco maior do 
que costumava ser. Assim:

89
00:03:47,467 --> 00:03:51,989
x obtém o valor antigo de x
mais, digamos, um.

90
00:03:52,749 --> 00:03:54,271
Opa! Funcionou!

91
00:03:54,761 --> 00:03:56,893
Exceto, por estar borrado.

92
00:03:56,893 --> 00:03:59,157
Se você está imaginando
porque ele ficou assim,

93
00:03:59,157 --> 00:04:02,381
é porque nos esquecemos de desenhar 
este fundo dentro do loop

94
00:04:02,381 --> 00:04:04,447
Então o carro é desenhado
constantemente,

95
00:04:04,447 --> 00:04:07,073
mas você pode ver todos os carros 
abaixo do novo.

96
00:04:07,073 --> 00:04:11,740
Se eu só puxar esta linha dentro do 
topo do loop do desenho, como este,

97
00:04:12,040 --> 00:04:15,984
então pressiono "Restart"
e posso ver meu carro de novo...

98
00:04:15,984 --> 00:04:18,029
Uau! Está perfeito!

99
00:04:18,029 --> 00:04:19,970
Se quisermos fazer o carro
ir mais rápido,

100
00:04:19,970 --> 00:04:22,631
deevemos mudar a quantidade
aumentando o valor de x.

101
00:04:22,631 --> 00:04:24,834
Se nós fizermos 10, uau!
Ele sai da tela!

102
00:04:24,834 --> 00:04:28,727
E se colocarmos um valor negativo,
como x-10 e ...

103
00:04:28,727 --> 00:04:29,778
Aqui está!

104
00:04:30,018 --> 00:04:32,195
Faça isso positivo novamente,

105
00:04:33,485 --> 00:04:34,542
Aí está!

106
00:04:34,542 --> 00:04:36,550
Há coisas importantes para 
se lembrar:

107
00:04:36,550 --> 00:04:39,157
Isto aqui é chamado 
de loop de desenho.

108
00:04:39,157 --> 00:04:41,681
Você deve colocar o código do desenho
aqui dentro

109
00:04:41,681 --> 00:04:43,487
para ele desenhar continuamente.

110
00:04:43,487 --> 00:04:46,292
E então, você quer fazer
a variável fora de seu desenho.

111
00:04:46,292 --> 00:04:49,249
É super importante fazer a variável
fora do loop do desenho.

112
00:04:49,249 --> 00:04:51,496
Podemos reutilizar todas as vezes.

113
00:04:51,496 --> 00:04:53,519
Então dentro do loop de desenho, bem aqui,

114
00:04:53,519 --> 00:04:56,032
vamos mudar a variável um pouco,

115
00:04:56,032 --> 00:04:58,242
de preferência configurando 
para um valor antigo,

116
00:04:58,242 --> 00:05:01,432
mais algum número mais ou 
menos algum numero.

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

118
00:05:05,504 --> 00:05:07,019
para que o desenho apareça 
sempre diferente.

119
00:05:08,534 --> 00:05:10,046
E ... é isso!


120
00:05:10,046 --> 00:05:14,136
Legendado por [Marcus Abud]
Revisado por [Cainã Perri]