1
00:00:00,370 --> 00:00:01,460
OK, te daremos la bienvenida nuevamente.

2
00:00:01,620 --> 00:00:06,150
Entonces, en este video vamos a tomar lo que ya hemos hecho y vamos a animarlo ligeramente.

3
00:00:06,720 --> 00:00:12,090
Entonces, finalmente, lo que queremos que suceda es que por cada pulsación de tecla obtenemos un círculo en una

4
00:00:14,010 --> 00:00:17,360
ubicación aleatoria con un color y ese color se anima un poco.

5
00:00:18,300 --> 00:00:21,120
Y también obtenemos la animación de tamaño.

6
00:00:21,460 --> 00:00:25,620
Por lo tanto, no sé si podrías apreciar el cambio de color, pero se trata de lindos ajustes por

7
00:00:25,620 --> 00:00:26,980
solo agregar un poco al tono.

8
00:00:27,330 --> 00:00:30,220
Pero cualquiera de esos hará por nosotros para comenzar.

9
00:00:30,210 --> 00:00:34,770
Comenzaremos simplemente cambiando el color de estos círculos y de hecho empezaremos

10
00:00:34,770 --> 00:00:37,950
a simplificar simplemente cambiando el color de un círculo.

11
00:00:38,040 --> 00:00:40,660
Entonces no todos ellos vendrán después.

12
00:00:40,680 --> 00:00:48,150
Entonces, si vamos a Paperchase, regresemos a los tutoriales y verá la animación en la parte inferior.

13
00:00:48,150 --> 00:00:51,400
Lo primero que puedes hacer es echar un vistazo a algunos de los ejemplos.

14
00:00:51,540 --> 00:00:53,180
Aquí hay un ejemplo.

15
00:00:53,730 --> 00:00:57,440
Y puedes ver que realmente es muy simple hacer la animación.

16
00:00:57,440 --> 00:01:01,260
Lo que hacemos es definir algo en este caso un rectángulo.

17
00:01:01,260 --> 00:01:08,310
En nuestro caso, se trata de un círculo y luego está en el cuadro y cualquier código que pongamos

18
00:01:08,310 --> 00:01:11,610
aquí se ejecutará en cada fotograma de la animación.

19
00:01:11,610 --> 00:01:18,360
Entonces, en este caso, cada fotograma de esta animación gira ese rectángulo tres grados o en

20
00:01:18,360 --> 00:01:26,730
este caso, que es lo que vamos a usar en cada fotograma, estamos agregando uno al tono de este círculo

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

22
00:01:28,980 --> 00:01:31,580
Entonces, probemos esto.

23
00:01:31,770 --> 00:01:35,290
Avancemos y creemos un nuevo círculo dentro de la tecla.

24
00:01:35,310 --> 00:01:38,290
Entonces, esto siempre estará allí cuando se cargue la página.

25
00:01:38,430 --> 00:01:50,250
Así que lo llamaremos var. El círculo animado equivale a un nuevo círculo de puntos de trayectoria y tendrá puntos nuevos y

26
00:01:50,250 --> 00:01:55,870
hagamos este círculo a 300 comas 300 y el radio.

27
00:01:56,010 --> 00:01:58,200
Vamos a hacerlo más grande 100.

28
00:01:58,560 --> 00:01:59,870
Así.

29
00:02:00,150 --> 00:02:09,190
Y luego haremos un círculo animado y lo que se llama círculo animado en lugar de color de relleno animado y

30
00:02:09,260 --> 00:02:12,380
lo configuraremos en rojo para comenzar así.

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

32
00:02:13,890 --> 00:02:18,690
un círculo grande y cada vez que presiono una tecla obtenemos círculos más pequeños que son aleatorios.

33
00:02:18,690 --> 00:02:22,260
Por lo tanto, no se va a animar todavía, pero si actualiza, obtenemos

34
00:02:22,260 --> 00:02:31,110
Ahora tenemos que agregar en nuestra animación y es muy simple ya que vimos la función en el marco y podemos pasar o

35
00:02:31,110 --> 00:02:33,640
entrar excepto este argumento de evento.

36
00:02:33,660 --> 00:02:38,790
Si quisiéramos hacer algo con cada cuadro si queríamos algunos datos al respecto, realmente no

37
00:02:38,790 --> 00:02:39,560
necesitamos eso.

38
00:02:39,840 --> 00:02:48,050
Y luego, todo lo que hay que hacer aquí es el color de relleno de puntos del círculo animado que además es igual a uno.

39
00:02:48,120 --> 00:02:50,750
Y esto es directo de ese ejemplo.

40
00:02:50,820 --> 00:02:57,330
un nuevo marco que no nos corresponde, no estamos decidiendo la velocidad de fotogramas con qué frecuencia se llama este código.

41
00:02:57,480 --> 00:02:59,730
Entonces, cada vez que la animación solicita

42
00:02:59,790 --> 00:03:06,570
Cada vez que hay un nuevo marco del cual el papel se ocupa, estamos agregando uno al tono

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

44
00:03:08,160 --> 00:03:10,650
Vamos a actualizar y ahí vamos.

45
00:03:10,650 --> 00:03:13,720
Es realmente muy simple hacer ese tipo de animación.

46
00:03:13,830 --> 00:03:20,040
También podemos hacer animaciones en cualquier lugar donde cambie la posición de algo y eso es un

47
00:03:20,040 --> 00:03:21,250
poco más complicado.

48
00:03:21,270 --> 00:03:26,760
trata de algo animado de un punto a otro y tampoco se acelera de manera uniforme.

49
00:03:26,760 --> 00:03:31,360
Éste resulta ser aún más complejo en este ejemplo porque no solo se

50
00:03:31,410 --> 00:03:35,630
Entonces es un poco más complejo pero solo tiene unas pocas líneas.

51
00:03:36,600 --> 00:03:39,830
Aquí hay otro ejemplo de cosas en movimiento.

52
00:03:40,500 --> 00:03:42,610
Algunas otras animaciones.

53
00:03:42,610 --> 00:03:48,450
Sin embargo, lo que vamos a hacer es usar algo que no se muestra y los ejemplos aquí que

54
00:03:48,450 --> 00:03:54,840
paso un poco de tiempo investigando en los documentos, lo que queremos hacer es escalar cada uno en cada fotograma.

55
00:03:56,340 --> 00:04:00,360
Entonces, lo que hacemos es básicamente cuando presiono una tecla hacemos un círculo.

56
00:04:00,390 --> 00:04:09,060
personaje en cada fotograma o lo reduzco un poco básicamente escalando por el punto nueve nueve punto nueve ocho.

57
00:04:09,060 --> 00:04:15,680
Digamos que comienza como 300 por 300 o 300 radios discúlpeme cuando golpeo ese

58
00:04:15,720 --> 00:04:22,590
Olvidé el número exacto, pero lo multiplicamos por un tamaño más pequeño en cada fotograma y se

59
00:04:22,590 --> 00:04:24,760
encoge y contrae para que desaparezca.

60
00:04:25,110 --> 00:04:26,940
Entonces te mostraré cómo funciona eso.

61
00:04:27,090 --> 00:04:35,130
Regresemos a nuestro código, tenemos el círculo todavía animado y dentro del marco en lugar de solo

62
00:04:35,250 --> 00:04:36,910
agregar uno al tono.

63
00:04:37,110 --> 00:04:40,370
círculos animados que es un método que encontré

64
00:04:42,910 --> 00:04:51,950
y podemos multiplicar por cualquier fracción que queramos si lo dejamos en uno mantendrá el mismo tamaño para que no lo veamos realmente.

65
00:04:51,950 --> 00:04:55,760
Lo que haremos es hacer una escala de puntos de

66
00:04:55,970 --> 00:05:08,600
Pero si hacemos algo así como el punto nueve y nos refrescamos, vamos todos los fotogramas cambian hewe por 1.

67
00:05:08,960 --> 00:05:14,560
Y escala por punto nueve o 90 por ciento de lo que era en el cuadro anterior.

68
00:05:14,570 --> 00:05:23,960
Entonces, si cambiamos eso a algo como el Punto 9 9 para que sea una transición más lenta hacia abajo y

69
00:05:23,960 --> 00:05:30,540
si lo cambiamos a algo así como el punto cinco, va a reducirse muy rápidamente.

70
00:05:30,680 --> 00:05:34,090
Entonces cada fotograma es la mitad de grande que en la pasada anterior.

71
00:05:34,280 --> 00:05:37,180
Así que creo que lo que fui fue el punto 9 para comenzar.

72
00:05:37,370 --> 00:05:39,040
Así que lo dejaremos así.

73
00:05:39,140 --> 00:05:45,680
Y ahora tenemos un solo círculo cambiando de color y reduciendo lo que queremos hacer a continuación es cuando pulso

74
00:05:45,680 --> 00:05:46,530
estas otras teclas.

75
00:05:46,730 --> 00:05:52,300
Quieres que esos círculos hagan lo mismo y eso es un poco más complicado.

76
00:05:52,490 --> 00:05:58,730
Pero honestamente, el código aquí seguirá siendo el mismo, todo lo que es diferente es que tenemos que hacer esto

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

78
00:06:01,790 --> 00:06:06,410
Y este es probablemente el cambio más drástico que hará que lo que hagamos realmente sea tener

79
00:06:06,410 --> 00:06:12,950
una serie de círculos y cada vez que presionemos una tecla, agregaremos ese círculo en esa nueva matriz porque en este momento no estamos

80
00:06:12,950 --> 00:06:17,380
haciendo un seguimiento de todos los círculos que necesitamos para salvarlos a todos de alguna manera.

81
00:06:17,420 --> 00:06:24,830
De modo que en el marco de esta función, podemos referirnos a cada círculo que ya existe

82
00:06:24,890 --> 00:06:26,240
y está animado.

83
00:06:26,840 --> 00:06:28,210
Así que guardaremos este código.

84
00:06:28,610 --> 00:06:33,770
Pero lo que queremos hacer es recorrer un conjunto que no existe, así que simplemente lo llamaremos círculos.

85
00:06:33,770 --> 00:06:42,230
Entonces para var i es igual a cero Ayas menos que Circle StarLink.

86
00:06:42,690 --> 00:06:47,420
Además de lo que queremos hacer es hacer círculos.

87
00:06:47,580 --> 00:06:50,260
Lleno el color aquí.

88
00:06:50,260 --> 00:06:54,130
Empezaremos con el color de relleno al principio.

89
00:06:54,140 --> 00:06:56,500
Entonces copiaré esta línea.

90
00:06:58,550 --> 00:07:01,050
Entonces no va a funcionar porque el círculo no existe.

91
00:07:01,070 --> 00:07:08,780
Pero la idea es que en cada fotograma recorramos todos los círculos de esta matriz y agreguemos una

92
00:07:08,780 --> 00:07:11,590
a cada matiz en cada fotograma.

93
00:07:12,470 --> 00:07:17,900
Y podrías pensar que es bastante intenso y es que están sucediendo muchas cosas, pero el papel simplemente se

94
00:07:17,900 --> 00:07:18,760
encarga de eso.

95
00:07:18,890 --> 00:07:25,550
Pero también agregaremos una pequeña optimización hacia el final, así que le mostraré lo que quiero decir en un video

96
00:07:25,550 --> 00:07:25,910
futuro.

97
00:07:25,910 --> 00:07:27,780
Pero por ahora esto es lo que haremos.

98
00:07:28,340 --> 00:07:35,660
Y todo lo que tenemos que hacer ahora es agregar este círculo que estamos creando en la matriz de

99
00:07:35,660 --> 00:07:42,590
círculos para que podamos definir que la matriz de nuestros círculos es una matriz vacía para comenzar y

100
00:07:42,590 --> 00:07:51,830
luego, cuando presione una tecla en la tecla, simplemente hacer círculos empujar este nuevo círculo en círculo detener empuje este nuevo círculo de salida en

101
00:07:51,830 --> 00:07:53,140
este punto al azar.

102
00:07:53,240 --> 00:07:58,180
En este momento tenemos un radio de 10 y restablecemos el color de relleno de muerte como naranja.

103
00:07:58,220 --> 00:08:03,660
Así que solo estamos empujando ese círculo que ya teníamos en la matriz de este círculo.

104
00:08:04,040 --> 00:08:06,830
Y luego estamos actualizando cada círculo.

105
00:08:06,830 --> 00:08:09,950
Entonces, podría haber un círculo que podría tener 20 círculos.

106
00:08:10,070 --> 00:08:12,270
Puede haber 100 círculos en un momento dado.

107
00:08:12,320 --> 00:08:19,790
Recorrimos todos y agregamos uno a cada cola y si echamos un vistazo ahora mismo y lo

108
00:08:19,790 --> 00:08:21,670
actualizamos aún no funciona.

109
00:08:21,770 --> 00:08:25,550
Y esto trae a colación un punto realmente interesante sobre cómo funciona el empuje.

110
00:08:25,550 --> 00:08:33,650
Entonces, si abro la consola, me dice que no puedo leer el tono Prakriti de la mente indefinida 24, que

111
00:08:33,650 --> 00:08:34,570
está aquí.

112
00:08:35,150 --> 00:08:41,150
Entonces, de alguna manera, no está leyendo esa propiedad de Phil Hugh, que dice que el código Phil no existe.

113
00:08:41,540 --> 00:08:43,870
Así que hagamos un círculo de registro constante.

114
00:08:44,330 --> 00:08:48,390
Y verás cuál es el problema.

115
00:08:49,100 --> 00:08:53,610
Si abro esto, se detiene porque tuvimos un error.

116
00:08:53,780 --> 00:09:00,390
Pero en realidad agregamos naranja a la cadena en la matriz, no al nuevo círculo real.

117
00:09:00,530 --> 00:09:06,710
Y eso es porque lo que estamos presionando no es solo un nuevo círculo, sino un nuevo círculo.

118
00:09:06,740 --> 00:09:09,470
Y luego estamos configurando el color de relleno para que sea naranja.

119
00:09:09,500 --> 00:09:13,010
Entonces, lo último que se devolvió fue la cadena naranja.

120
00:09:13,010 --> 00:09:16,780
Entonces, el resultado final es que solo estamos presionando naranja cada vez.

121
00:09:16,850 --> 00:09:18,530
Que no es lo que queremos

122
00:09:19,190 --> 00:09:28,310
Así que crearemos una nueva variable que llamaremos nuestro nuevo círculo y luego haremos que el nuevo círculo de

123
00:09:28,310 --> 00:09:35,920
relleno de puntos por separado sea igual a naranja y luego empujaremos en Nuevo círculo.

124
00:09:35,990 --> 00:09:40,480
Entonces, en lugar de editar esto, creo que es un error importante de ver.

125
00:09:40,760 --> 00:09:44,870
Me pilló desprevenido por un momento, pero es importante entender cómo funciona

126
00:09:44,870 --> 00:09:51,760
cuando tenemos esos métodos encadenados uno encima del otro donde pasamos ese círculo y luego el color del relleno de puntos

127
00:09:51,770 --> 00:09:56,450
es igual al naranja y acabamos de agregar todo eso la matriz con empuje.

128
00:09:56,560 --> 00:09:57,800
Estábamos agregando naranja en.

129
00:09:57,830 --> 00:09:59,980
Entonces tenemos que arreglarlo.

130
00:10:00,110 --> 00:10:01,290
Así que con suerte esto lo hace.

131
00:10:01,310 --> 00:10:08,300
Y, de hecho, sé que sí, pero si estamos frescos y echamos un vistazo ahora agreguemos nuevos

132
00:10:09,700 --> 00:10:15,290
círculos colocados al azar y todos los enemigos, Heugh, animarán de forma perfecta.

133
00:10:15,290 --> 00:10:17,450
Ahora actualizaremos esto para trabajar con el tamaño.

134
00:10:17,570 --> 00:10:21,550
Así que en realidad es exactamente la misma línea que tenemos aquí.

135
00:10:22,280 --> 00:10:23,860
Me desharé de nuestra constante no registrar.

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

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

138
00:10:30,680 --> 00:10:31,370
DE ACUERDO.

139
00:10:31,730 --> 00:10:36,420
Entonces, antes de mostrarle si funciona, revisemos lo que hicimos.

140
00:10:36,440 --> 00:10:42,860
Entonces, cuando presionas cualquier tecla agregamos un círculo en un punto aleatorio 2, hacemos un punto al azar para hacer un

141
00:10:42,860 --> 00:10:49,100
nuevo círculo con ese punto aleatorio de 10 píxeles y realmente cambiamos eso para que coincida con lo que tenemos en

142
00:10:49,100 --> 00:10:54,590
la solución que es quinientos y luego estamos vendiendo la tarjeta de relleno para que comience en naranja,

143
00:10:54,590 --> 00:10:55,770
lo que eventualmente cambiará.

144
00:10:55,880 --> 00:10:58,840
Y luego empujamos eso en una matriz llamada círculos.

145
00:10:59,060 --> 00:11:07,200
Luego, cada vez que se llama un nuevo fotograma Cada fotograma de animación estamos recorriendo todos los círculos.

146
00:11:07,520 --> 00:11:13,180
Y para cada uno agregamos uno al hewe y estamos multiplicando el tamaño de la escala por el punto nueve.

147
00:11:13,430 --> 00:11:17,260
Así que estamos reduciendo un poco cada fotograma.

148
00:11:17,360 --> 00:11:22,130
Pero hay tantos marcos que en realidad se contrae con bastante rapidez y podemos deshacernos

149
00:11:22,130 --> 00:11:26,540
de nuestro círculo animado ahora que comienza con la carga de la página.

150
00:11:26,540 --> 00:11:28,240
No queremos comenzar con una pantalla negra.

151
00:11:28,250 --> 00:11:30,700
Y luego, cuando tocas una tecla, agregamos un círculo.

152
00:11:30,710 --> 00:11:33,320
Entonces, probemos.

153
00:11:33,320 --> 00:11:37,110
Aquí vamos.

154
00:11:37,130 --> 00:11:40,920
Entonces esto es casi exactamente de la misma manera.

155
00:11:40,980 --> 00:11:43,130
Aquí está el sonido.

156
00:11:43,130 --> 00:11:51,260
Una gran diferencia es que el color dice que todas las teclas tienen un color asignado aquí, así que Q es este azul,

157
00:11:52,220 --> 00:11:54,000
una mitad azul más oscura.

158
00:11:54,110 --> 00:11:55,810
¿Es gris?

159
00:11:55,980 --> 00:12:02,310
Entonces, en nuestro caso, ahora es de color púrpura, aquí estamos configurando a todos para que comiencen en naranja y luego

160
00:12:02,310 --> 00:12:03,070
cambien el tono.

161
00:12:03,500 --> 00:12:08,500
Entonces, tendremos que arreglar eso, pero me refiero a esperar para hacerlo hasta que agreguemos sonido.

162
00:12:08,510 --> 00:12:10,990
Así que hemos terminado por ahora.

163
00:12:11,210 --> 00:12:16,820
Hay una pequeña optimización que lo convertirá en el final porque en este momento nunca eliminaremos

164
00:12:16,820 --> 00:12:19,000
esos círculos de la matriz circular.

165
00:12:19,040 --> 00:12:25,490
Así que incluso si sabes después de 10 segundos que ese círculo se ha ido incluso después de tres segundos, no lo vemos.

166
00:12:25,490 --> 00:12:27,330
Técnicamente todavía está en ese conjunto.

167
00:12:27,620 --> 00:12:29,540
Entonces eso no es ideal.

168
00:12:29,540 --> 00:12:34,640
que habíamos creado y no viéramos ninguno de ellos, no deseamos pasar por encima de todos ellos.

169
00:12:34,640 --> 00:12:36,170
Si tuviéramos diez mil círculos

170
00:12:36,170 --> 00:12:41,360
Entonces, en el último video, le mostraré cómo podemos eliminar un círculo cuando sabemos que ya no está o cuando

171
00:12:41,360 --> 00:12:43,090
sabemos que ya no es posible.

172
00:12:43,490 --> 00:12:45,320
OK así que el próximo vamos a trabajar con sonido