1
00:00:00,370 --> 00:00:01,460
OK, vamos receber de volta.

2
00:00:01,620 --> 00:00:06,150
Então, neste vídeo, vamos levar o que já fizemos e vamos animá-lo ligeiramente.

3
00:00:06,720 --> 00:00:12,090
Então, eventualmente, o que queremos acontecer é que, para cada imprensa de chave, nós temos um círculo em

4
00:00:14,010 --> 00:00:17,360
uma localização aleatória com uma cor e essa cor animar ligeiramente.

5
00:00:18,300 --> 00:00:21,120
E também recebemos a animação de tamanho.

6
00:00:21,460 --> 00:00:25,620
Então, eu não sei se você conseguiu mudar a cor, mas é um bom palpite para apenas

7
00:00:25,620 --> 00:00:26,980
adicionar um pouco a tonalidade.

8
00:00:27,330 --> 00:00:30,220
Mas qualquer um desses irá fazer para nós começar.

9
00:00:30,210 --> 00:00:34,770
Vamos começar realmente mudando a cor desses círculos e, na verdade, vamos começar

10
00:00:34,770 --> 00:00:37,950
mais simples simplesmente mudando a cor de um círculo.

11
00:00:38,040 --> 00:00:40,660
Então não todos eles que virão mais tarde.

12
00:00:40,680 --> 00:00:48,150
Então, se vamos para a Paperchase, volte para os tutoriais e você olha a animação na parte inferior.

13
00:00:48,150 --> 00:00:51,400
A primeira coisa que você pode fazer é dar uma olhada em alguns exemplos.

14
00:00:51,540 --> 00:00:53,180
Aqui está um exemplo.

15
00:00:53,730 --> 00:00:57,440
E você pode ver que é realmente muito simples realmente fazer a animação.

16
00:00:57,440 --> 00:01:01,260
O que fazemos é que nós definimos algo neste caso um retângulo.

17
00:01:01,260 --> 00:01:08,310
No nosso caso, será um círculo e, em seguida, haverá um quadro e qualquer código que colocemos

18
00:01:08,310 --> 00:01:11,610
aqui será executado em cada quadro da animação.

19
00:01:11,610 --> 00:01:18,360
Então, neste caso, cada quadro dessa animação estamos rodando esse retângulo em três graus

20
00:01:18,360 --> 00:01:26,730
ou, neste caso, o que vamos usar em cada quadro, estamos adicionando um para a tonalidade desse círculo

21
00:01:26,760 --> 00:01:28,200
que definimos aqui.

22
00:01:28,980 --> 00:01:31,580
Então vamos tentar isso.

23
00:01:31,770 --> 00:01:35,290
Avançemos e façamos um novo círculo não dentro da chave para baixo.

24
00:01:35,310 --> 00:01:38,290
Então, isso sempre estará sempre lá quando a página for carregada.

25
00:01:38,430 --> 00:01:50,250
Então, chamaremos isso de círculo de animação variável igual ao novo círculo de pontos de caminho e terá novos pontos e vamos

26
00:01:50,250 --> 00:01:55,870
fazer esse círculo em 300 vírgulas 300 e o raio.

27
00:01:56,010 --> 00:01:58,200
Vamos torná-lo maior 100.

28
00:01:58,560 --> 00:01:59,870
Bem desse jeito.

29
00:02:00,150 --> 00:02:09,190
E então, faremos animação e o chamado círculo animado, em vez de animar a cor do preenchimento de pontos

30
00:02:09,260 --> 00:02:12,380
e configurá-lo como vermelho para começar assim.

31
00:02:12,540 --> 00:02:13,790
Ótimo.

32
00:02:13,890 --> 00:02:18,690
círculo grande e toda vez que toco uma tecla, ficamos com círculos menores que são aleatórios.

33
00:02:18,690 --> 00:02:22,260
Então, não vai ser animado ainda, mas se você atualizar, obtemos um

34
00:02:22,260 --> 00:02:31,110
Agora, precisamos adicionar nossa animação e é realmente simples, já que vimos a função no quadro e podemos passar dentro ou

35
00:02:31,110 --> 00:02:33,640
fora, exceto este argumento do evento.

36
00:02:33,660 --> 00:02:38,790
Se quisermos fazer algo com cada quadro se quisermos alguns dados sobre isso, na verdade não

37
00:02:38,790 --> 00:02:39,560
precisamos disso.

38
00:02:39,840 --> 00:02:48,050
E então, tudo o que faz aqui é a cor de preenchimento de ponto de círculo animado que você mais é igual a um.

39
00:02:48,120 --> 00:02:50,750
E isso é direto desse exemplo.

40
00:02:50,820 --> 00:02:57,330
uma nova moldura que não depende de nós, não estamos decidindo a taxa de quadros a que frequência esse código é chamado.

41
00:02:57,480 --> 00:02:59,730
Então, toda vez que a animação solicita

42
00:02:59,790 --> 00:03:06,570
Sempre que haja uma nova moldura em que o papel apenas cuida, estamos adicionando uma à tonalidade

43
00:03:06,570 --> 00:03:08,160
de seu círculo animado.

44
00:03:08,160 --> 00:03:10,650
Vamos atualizar e lá vamos nós.

45
00:03:10,650 --> 00:03:13,720
Então, realmente é muito simples fazer esse tipo de animação.

46
00:03:13,830 --> 00:03:20,040
Nós também podemos fazer animações, independentemente de onde mudar a posição de algo e isso é um

47
00:03:20,040 --> 00:03:21,250
pouco mais complicado.

48
00:03:21,270 --> 00:03:26,760
apenas animados de um ponto para outro e também não estão acelerando uniformemente.

49
00:03:26,760 --> 00:03:31,360
Este é um exemplo ainda mais complexo, porque eles não são

50
00:03:31,410 --> 00:03:35,630
Então, é um pouco mais complexo, mas ainda apenas algumas linhas.

51
00:03:36,600 --> 00:03:39,830
Aqui está outro exemplo de mover coisas.

52
00:03:40,500 --> 00:03:42,610
Algumas outras animações.

53
00:03:42,610 --> 00:03:48,450
O que nós vamos fazer é usar algo que eles não mostram e os exemplos aqui que eu

54
00:03:48,450 --> 00:03:54,840
gasto um pouco de tempo cavando nos documentos o que queremos fazer é simplesmente escalar cada um de cada quadro.

55
00:03:56,340 --> 00:04:00,360
Então, o que fazemos é basicamente quando eu pressiono uma chave que fazemos um círculo.

56
00:04:00,390 --> 00:04:09,060
esse personagem em todas as moldura ou encolhendo-o um pouco basicamente escalando-o no ponto nove nove nove e nove.

57
00:04:09,060 --> 00:04:15,680
Digamos que ele começa como 300 por 300 ou 300 raio, desculpe-me quando acertei

58
00:04:15,720 --> 00:04:22,590
Eu esqueci o número exato, mas estamos multiplicando-o por um tamanho menor em cada quadro e ele apenas

59
00:04:22,590 --> 00:04:24,760
encolhe e encolhe, então ele desaparece.

60
00:04:25,110 --> 00:04:26,940
Então eu vou mostrar-lhe como isso funciona.

61
00:04:27,090 --> 00:04:35,130
Voltemos ao nosso código, temos o círculo ainda animando e dentro do quadro em vez de apenas

62
00:04:35,250 --> 00:04:36,910
adicionar um ao matiz.

63
00:04:37,110 --> 00:04:40,370
animado, que é um método que encontrei e que

64
00:04:42,910 --> 00:04:51,950
podemos multiplicar por qualquer fração que queremos, se a deixarmos em uma, ela permanecerá do mesmo tamanho, de modo que na verdade não a veremos.

65
00:04:51,950 --> 00:04:55,760
O que faremos é fazer uma escala de ponto de círculo

66
00:04:55,970 --> 00:05:08,600
Mas se fizermos algo como o ponto nove e nós atualizamos, nós vamos, cada quadro modifica Hewe por 1.

67
00:05:08,960 --> 00:05:14,560
E escala pelo ponto nove ou 90 por cento do que era no quadro anterior.

68
00:05:14,570 --> 00:05:23,960
Então, se mudarmos isso para algo como o Ponto 9 9 para ser uma transição mais lenta para baixo e se

69
00:05:23,960 --> 00:05:30,540
nós o mudarmos para algo como o ponto cinco, isso vai diminuir muito rapidamente.

70
00:05:30,680 --> 00:05:34,090
Então, cada quadro fica meio tão grande como era na corrida anterior.

71
00:05:34,280 --> 00:05:37,180
Então eu acho que o que fui com o ponto 9 para começar.

72
00:05:37,370 --> 00:05:39,040
Então vamos deixar isso.

73
00:05:39,140 --> 00:05:45,680
E agora, temos um único círculo que altera a cor e o encolhimento do que queremos fazer depois é quando eu toco

74
00:05:45,680 --> 00:05:46,530
essas outras chaves.

75
00:05:46,730 --> 00:05:52,300
Você quer que esses círculos façam o mesmo e isso seja um pouco mais complicado.

76
00:05:52,490 --> 00:05:58,730
Mas, honestamente, o código aqui permanecerá o mesmo, tudo diferente é que precisamos fazer isso

77
00:05:58,760 --> 00:06:01,410
para cada círculo que está na página.

78
00:06:01,790 --> 00:06:06,410
E esta é provavelmente a mudança mais drástica que fará o que realmente vai fazer é

79
00:06:06,410 --> 00:06:12,950
ter uma série de círculos e toda vez que pressionamos uma chave Vamos adicionar esse círculo naquela nova matriz porque agora não

80
00:06:12,950 --> 00:06:17,380
estamos realmente rastreando tudo os círculos que precisamos para salvar todos eles de alguma forma.

81
00:06:17,420 --> 00:06:24,830
Então, no quadro aqui mesmo nesta função, podemos voltar a cada círculo que já

82
00:06:24,890 --> 00:06:26,240
existe e animado.

83
00:06:26,840 --> 00:06:28,210
Então, manteremos esse código.

84
00:06:28,610 --> 00:06:33,770
Mas o que queremos fazer é percorrer uma matriz que não existe, então vamos chamá-la de círculos.

85
00:06:33,770 --> 00:06:42,230
Então, para var i, é igual a zero Ayas do que o Circle StarLink.

86
00:06:42,690 --> 00:06:47,420
Além disso, mais o que queremos fazer é fazer círculos.

87
00:06:47,580 --> 00:06:50,260
Eu preenchho a cor aqui.

88
00:06:50,260 --> 00:06:54,130
Então, vamos começar com a cor de preenchimento apenas no início.

89
00:06:54,140 --> 00:06:56,500
Então, vou copiar essa linha.

90
00:06:58,550 --> 00:07:01,050
Então, não vai funcionar ainda porque o círculo não existe.

91
00:07:01,070 --> 00:07:08,780
Mas a idéia é que, em cada quadro, fazemos um loop em todos os círculos nesta matriz e adicionamos

92
00:07:08,780 --> 00:07:11,590
um a cada matiz em cada quadro.

93
00:07:12,470 --> 00:07:17,900
E você pode pensar que isso é bastante intenso e é que muitas coisas acontecem, mas o papel

94
00:07:17,900 --> 00:07:18,760
apenas cuida disso.

95
00:07:18,890 --> 00:07:25,550
Mas também vamos adicionar uma pequena otimização para o final, então vou mostrar o que quero dizer em um futuro

96
00:07:25,550 --> 00:07:25,910
vídeo.

97
00:07:25,910 --> 00:07:27,780
Mas, por enquanto, é isso que faremos.

98
00:07:28,340 --> 00:07:35,660
E tudo o que temos que fazer agora é realmente adicionar este círculo que estamos fazendo na matriz de círculos

99
00:07:35,660 --> 00:07:42,590
para que possamos definir essa matriz para nossos círculos é uma matriz vazia para começar e então, quando você

100
00:07:42,590 --> 00:07:51,830
pressiona uma tecla na chave, vamos apenas faça círculos para cima, empurre este novo círculo em círculo, pare empurrar este novo caminho para fora do

101
00:07:51,830 --> 00:07:53,140
círculo neste ponto aleatório.

102
00:07:53,240 --> 00:07:58,180
Neste momento, temos um raio de 10 e restabelecemos a cor de preenchimento como laranja.

103
00:07:58,220 --> 00:08:03,660
Então, estamos apenas empurrando esse círculo que já tivemos na matriz deste círculo.

104
00:08:04,040 --> 00:08:06,830
E então estamos atualizando cada círculo.

105
00:08:06,830 --> 00:08:09,950
Então, pode haver um círculo, pode haver 20 círculos.

106
00:08:10,070 --> 00:08:12,270
Pode haver 100 círculos em qualquer momento.

107
00:08:12,320 --> 00:08:19,790
Passamos por todos eles e adicionamos um a cada fila e, se olharmos agora e

108
00:08:19,790 --> 00:08:21,670
atualizarmos, ainda não funciona.

109
00:08:21,770 --> 00:08:25,550
E isso traz um ponto realmente interessante sobre como o push funciona.

110
00:08:25,550 --> 00:08:33,650
Então, se eu abrir o console, ele me diz que não consigo ler a matiz Prakriti da mente indefinida 24 que está

111
00:08:33,650 --> 00:08:34,570
aqui mesmo.

112
00:08:35,150 --> 00:08:41,150
Então não é de alguma forma que não está lendo essa propriedade de Hugh da cor de Phil dizendo que o código de Phil não existe.

113
00:08:41,540 --> 00:08:43,870
Então, vamos fazer um círculo de log constante.

114
00:08:44,330 --> 00:08:48,390
E você verá qual é o problema.

115
00:08:49,100 --> 00:08:53,610
Se eu abrir isso, ele é parado porque nós tivemos um erro.

116
00:08:53,780 --> 00:09:00,390
Mas, na verdade, adicionamos a linha laranja na cadeia não o novo círculo atual.

117
00:09:00,530 --> 00:09:06,710
E é por isso que o que estamos envolvendo não é apenas um novo círculo em que estamos fazendo o novo círculo.

118
00:09:06,740 --> 00:09:09,470
E então estamos definindo a cor de preenchimento para ser laranja.

119
00:09:09,500 --> 00:09:13,010
Então, a última coisa que foi devolvida foi a linha de laranja.

120
00:09:13,010 --> 00:09:16,780
Então, o resultado final é que estamos apenas empurrando laranja sempre.

121
00:09:16,850 --> 00:09:18,530
O que não é o que queremos.

122
00:09:19,190 --> 00:09:28,310
Então, vamos fazer uma nova variável, vamos chamá-la de nosso novo círculo e então faremos um novo círculo de

123
00:09:28,310 --> 00:09:35,920
cor de preenchimento de pontos, separadamente, igual a laranja e então vamos pressionar o Novo Círculo.

124
00:09:35,990 --> 00:09:40,480
Então, ao invés de editar isso, acho que é um erro importante para ver.

125
00:09:40,760 --> 00:09:44,870
Totalmente me deteve desprevenido por um momento, mas é importante entender como isso funciona

126
00:09:44,870 --> 00:09:51,760
onde nós temos esses métodos encadeados em cima uns dos outros, onde nós passamos nesse círculo e, em seguida, a cor de preenchimento

127
00:09:51,770 --> 00:09:56,450
de pontos é laranja e acabamos de adicionar essa coisa em A matriz com push.

128
00:09:56,560 --> 00:09:57,800
Nós estávamos apenas adicionando laranja.

129
00:09:57,830 --> 00:09:59,980
Então precisamos corrigi-lo.

130
00:10:00,110 --> 00:10:01,290
Então, espero que isso faça isso.

131
00:10:01,310 --> 00:10:08,300
E, na verdade, eu sei que sim, mas se estamos frescos e dê uma olhada agora, adicione novos

132
00:10:09,700 --> 00:10:15,290
círculos colocados aleatoriamente e todos os inimigos que o Heugh anime tão simplesmente perfeito.

133
00:10:15,290 --> 00:10:17,450
Agora vamos atualizar isso para trabalhar com o tamanho.

134
00:10:17,570 --> 00:10:21,550
Então, é exatamente essa exatamente a mesma linha que temos aqui.

135
00:10:22,280 --> 00:10:23,860
Vou livrar-se da nossa constante não log.

136
00:10:23,930 --> 00:10:26,140
Exceto que queremos círculos.

137
00:10:26,160 --> 00:10:28,420
EU.

138
00:10:30,680 --> 00:10:31,370
ESTÁ BEM.

139
00:10:31,730 --> 00:10:36,420
Então, antes de lhe mostrar se funciona, vamos apenas rever o que fizemos.

140
00:10:36,440 --> 00:10:42,860
Então, quando você acerta qualquer tecla, adicionamos em um círculo em um ponto aleatório 2, fazemos um ponto aleatório para criar

141
00:10:42,860 --> 00:10:49,100
um novo círculo com esse raio de pixel de 10 pontos aleatórios e podemos realmente mudar isso para combinar o que

142
00:10:49,100 --> 00:10:54,590
temos na solução que é quinhentos e então estamos vendendo o cartão de preenchimento para começar como laranja

143
00:10:54,590 --> 00:10:55,770
que irá mudar eventualmente.

144
00:10:55,880 --> 00:10:58,840
E então, empurramos isso para uma matriz chamada círculos.

145
00:10:59,060 --> 00:11:07,200
Então, cada vez que uma nova moldura é chamada Todo quadro de animação, estamos fazendo um loop em todos os círculos.

146
00:11:07,520 --> 00:11:13,180
E para cada um, estamos adicionando um ao hewe e estamos multiplicando o tamanho da escala pelo ponto nove.

147
00:11:13,430 --> 00:11:17,260
Então, estamos reduzindo isso apenas por um bit pequeno em cada quadro.

148
00:11:17,360 --> 00:11:22,130
Mas há tantos quadros que realmente encolhe muito rapidamente e podemos nos

149
00:11:22,130 --> 00:11:26,540
livrar de nosso círculo animado agora que começa na página carregar.

150
00:11:26,540 --> 00:11:28,240
Não queremos começar com uma tela preta.

151
00:11:28,250 --> 00:11:30,700
E então, quando você acerta uma tecla, adicionamos um círculo.

152
00:11:30,710 --> 00:11:33,320
Então vamos tentar.

153
00:11:33,320 --> 00:11:37,110
Aqui vamos nós.

154
00:11:37,130 --> 00:11:40,920
Então, isso é quase exatamente da mesma maneira.

155
00:11:40,980 --> 00:11:43,130
Aqui está o som.

156
00:11:43,130 --> 00:11:51,260
Uma grande diferença é que a cor diz que cada uma das chaves tem uma cor atribuída aqui, então Q é este azul

157
00:11:52,220 --> 00:11:54,000
uma metade azul mais escura.

158
00:11:54,110 --> 00:11:55,810
É cinza.

159
00:11:55,980 --> 00:12:02,310
Então, no nosso, é um roxo agora, estamos estabelecendo que todos para começar é laranja e depois mudar

160
00:12:02,310 --> 00:12:03,070
a tonalidade.

161
00:12:03,500 --> 00:12:08,500
Então, precisamos corrigir isso, mas quero dizer, esperar para fazer isso até adicionar som.

162
00:12:08,510 --> 00:12:10,990
Então estamos pronto por agora.

163
00:12:11,210 --> 00:12:16,820
Há uma pequena otimização que o tornará o fim porque agora não estamos removendo

164
00:12:16,820 --> 00:12:19,000
esses círculos da matriz do círculo.

165
00:12:19,040 --> 00:12:25,490
Então, mesmo se você souber após 10 segundos esse círculo foi mesmo depois de três segundos, não o vemos.

166
00:12:25,490 --> 00:12:27,330
Tecnicamente, ainda está nessa matriz.

167
00:12:27,620 --> 00:12:29,540
Então, isso não é ideal.

168
00:12:29,540 --> 00:12:34,640
que tivéssemos criado e não vejamos nenhum deles, não queremos fazer um loop sobre todos eles.

169
00:12:34,640 --> 00:12:36,170
Se tivéssemos dez mil círculos

170
00:12:36,170 --> 00:12:41,360
Então, no último vídeo, vou mostrar-lhe como podemos remover um círculo quando sabemos que ele se foi ou quando

171
00:12:41,360 --> 00:12:43,090
sabemos que não é mais viável.

172
00:12:43,490 --> 00:12:45,320
OK, então, depois, vamos trabalhar com som