OK, te daremos la bienvenida nuevamente.
Entonces, en este video vamos a tomar lo que ya hemos hecho y vamos a animarlo ligeramente.
Entonces, finalmente, lo que queremos que suceda es que por cada pulsación de tecla obtenemos un círculo en una
ubicación aleatoria con un color y ese color se anima un poco.
Y también obtenemos la animación de tamaño.
Por lo tanto, no sé si podrías apreciar el cambio de color, pero se trata de lindos ajustes por
solo agregar un poco al tono.
Pero cualquiera de esos hará por nosotros para comenzar.
Comenzaremos simplemente cambiando el color de estos círculos y de hecho empezaremos
a simplificar simplemente cambiando el color de un círculo.
Entonces no todos ellos vendrán después.
Entonces, si vamos a Paperchase, regresemos a los tutoriales y verá la animación en la parte inferior.
Lo primero que puedes hacer es echar un vistazo a algunos de los ejemplos.
Aquí hay un ejemplo.
Y puedes ver que realmente es muy simple hacer la animación.
Lo que hacemos es definir algo en este caso un rectángulo.
En nuestro caso, se trata de un círculo y luego está en el cuadro y cualquier código que pongamos
aquí se ejecutará en cada fotograma de la animación.
Entonces, en este caso, cada fotograma de esta animación gira ese rectángulo tres grados o en
este caso, que es lo que vamos a usar en cada fotograma, estamos agregando uno al tono de este círculo
que definimos aquí.
Entonces, probemos esto.
Avancemos y creemos un nuevo círculo dentro de la tecla.
Entonces, esto siempre estará allí cuando se cargue la página.
Así que lo llamaremos var. El círculo animado equivale a un nuevo círculo de puntos de trayectoria y tendrá puntos nuevos y
hagamos este círculo a 300 comas 300 y el radio.
Vamos a hacerlo más grande 100.
Así.
Y luego haremos un círculo animado y lo que se llama círculo animado en lugar de color de relleno animado y
lo configuraremos en rojo para comenzar así.
Estupendo.
un círculo grande y cada vez que presiono una tecla obtenemos círculos más pequeños que son aleatorios.
Por lo tanto, no se va a animar todavía, pero si actualiza, obtenemos
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
entrar excepto este argumento de evento.
Si quisiéramos hacer algo con cada cuadro si queríamos algunos datos al respecto, realmente no
necesitamos eso.
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.
Y esto es directo de ese ejemplo.
un nuevo marco que no nos corresponde, no estamos decidiendo la velocidad de fotogramas con qué frecuencia se llama este código.
Entonces, cada vez que la animación solicita
Cada vez que hay un nuevo marco del cual el papel se ocupa, estamos agregando uno al tono
de su círculo animado.
Vamos a actualizar y ahí vamos.
Es realmente muy simple hacer ese tipo de animación.
También podemos hacer animaciones en cualquier lugar donde cambie la posición de algo y eso es un
poco más complicado.
trata de algo animado de un punto a otro y tampoco se acelera de manera uniforme.
Éste resulta ser aún más complejo en este ejemplo porque no solo se
Entonces es un poco más complejo pero solo tiene unas pocas líneas.
Aquí hay otro ejemplo de cosas en movimiento.
Algunas otras animaciones.
Sin embargo, lo que vamos a hacer es usar algo que no se muestra y los ejemplos aquí que
paso un poco de tiempo investigando en los documentos, lo que queremos hacer es escalar cada uno en cada fotograma.
Entonces, lo que hacemos es básicamente cuando presiono una tecla hacemos un círculo.
personaje en cada fotograma o lo reduzco un poco básicamente escalando por el punto nueve nueve punto nueve ocho.
Digamos que comienza como 300 por 300 o 300 radios discúlpeme cuando golpeo ese
Olvidé el número exacto, pero lo multiplicamos por un tamaño más pequeño en cada fotograma y se
encoge y contrae para que desaparezca.
Entonces te mostraré cómo funciona eso.
Regresemos a nuestro código, tenemos el círculo todavía animado y dentro del marco en lugar de solo
agregar uno al tono.
círculos animados que es un método que encontré
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.
Lo que haremos es hacer una escala de puntos de
Pero si hacemos algo así como el punto nueve y nos refrescamos, vamos todos los fotogramas cambian hewe por 1.
Y escala por punto nueve o 90 por ciento de lo que era en el cuadro anterior.
Entonces, si cambiamos eso a algo como el Punto 9 9 para que sea una transición más lenta hacia abajo y
si lo cambiamos a algo así como el punto cinco, va a reducirse muy rápidamente.
Entonces cada fotograma es la mitad de grande que en la pasada anterior.
Así que creo que lo que fui fue el punto 9 para comenzar.
Así que lo dejaremos así.
Y ahora tenemos un solo círculo cambiando de color y reduciendo lo que queremos hacer a continuación es cuando pulso
estas otras teclas.
Quieres que esos círculos hagan lo mismo y eso es un poco más complicado.
Pero honestamente, el código aquí seguirá siendo el mismo, todo lo que es diferente es que tenemos que hacer esto
para cada círculo que está en la página.
Y este es probablemente el cambio más drástico que hará que lo que hagamos realmente sea tener
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
haciendo un seguimiento de todos los círculos que necesitamos para salvarlos a todos de alguna manera.
De modo que en el marco de esta función, podemos referirnos a cada círculo que ya existe
y está animado.
Así que guardaremos este código.
Pero lo que queremos hacer es recorrer un conjunto que no existe, así que simplemente lo llamaremos círculos.
Entonces para var i es igual a cero Ayas menos que Circle StarLink.
Además de lo que queremos hacer es hacer círculos.
Lleno el color aquí.
Empezaremos con el color de relleno al principio.
Entonces copiaré esta línea.
Entonces no va a funcionar porque el círculo no existe.
Pero la idea es que en cada fotograma recorramos todos los círculos de esta matriz y agreguemos una
a cada matiz en cada fotograma.
Y podrías pensar que es bastante intenso y es que están sucediendo muchas cosas, pero el papel simplemente se
encarga de eso.
Pero también agregaremos una pequeña optimización hacia el final, así que le mostraré lo que quiero decir en un video
futuro.
Pero por ahora esto es lo que haremos.
Y todo lo que tenemos que hacer ahora es agregar este círculo que estamos creando en la matriz de
círculos para que podamos definir que la matriz de nuestros círculos es una matriz vacía para comenzar y
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
este punto al azar.
En este momento tenemos un radio de 10 y restablecemos el color de relleno de muerte como naranja.
Así que solo estamos empujando ese círculo que ya teníamos en la matriz de este círculo.
Y luego estamos actualizando cada círculo.
Entonces, podría haber un círculo que podría tener 20 círculos.
Puede haber 100 círculos en un momento dado.
Recorrimos todos y agregamos uno a cada cola y si echamos un vistazo ahora mismo y lo
actualizamos aún no funciona.
Y esto trae a colación un punto realmente interesante sobre cómo funciona el empuje.
Entonces, si abro la consola, me dice que no puedo leer el tono Prakriti de la mente indefinida 24, que
está aquí.
Entonces, de alguna manera, no está leyendo esa propiedad de Phil Hugh, que dice que el código Phil no existe.
Así que hagamos un círculo de registro constante.
Y verás cuál es el problema.
Si abro esto, se detiene porque tuvimos un error.
Pero en realidad agregamos naranja a la cadena en la matriz, no al nuevo círculo real.
Y eso es porque lo que estamos presionando no es solo un nuevo círculo, sino un nuevo círculo.
Y luego estamos configurando el color de relleno para que sea naranja.
Entonces, lo último que se devolvió fue la cadena naranja.
Entonces, el resultado final es que solo estamos presionando naranja cada vez.
Que no es lo que queremos
Así que crearemos una nueva variable que llamaremos nuestro nuevo círculo y luego haremos que el nuevo círculo de
relleno de puntos por separado sea igual a naranja y luego empujaremos en Nuevo círculo.
Entonces, en lugar de editar esto, creo que es un error importante de ver.
Me pilló desprevenido por un momento, pero es importante entender cómo funciona
cuando tenemos esos métodos encadenados uno encima del otro donde pasamos ese círculo y luego el color del relleno de puntos
es igual al naranja y acabamos de agregar todo eso la matriz con empuje.
Estábamos agregando naranja en.
Entonces tenemos que arreglarlo.
Así que con suerte esto lo hace.
Y, de hecho, sé que sí, pero si estamos frescos y echamos un vistazo ahora agreguemos nuevos
círculos colocados al azar y todos los enemigos, Heugh, animarán de forma perfecta.
Ahora actualizaremos esto para trabajar con el tamaño.
Así que en realidad es exactamente la misma línea que tenemos aquí.
Me desharé de nuestra constante no registrar.
Excepto que queremos círculos.
YO.
DE ACUERDO.
Entonces, antes de mostrarle si funciona, revisemos lo que hicimos.
Entonces, cuando presionas cualquier tecla agregamos un círculo en un punto aleatorio 2, hacemos un punto al azar para hacer un
nuevo círculo con ese punto aleatorio de 10 píxeles y realmente cambiamos eso para que coincida con lo que tenemos en
la solución que es quinientos y luego estamos vendiendo la tarjeta de relleno para que comience en naranja,
lo que eventualmente cambiará.
Y luego empujamos eso en una matriz llamada círculos.
Luego, cada vez que se llama un nuevo fotograma Cada fotograma de animación estamos recorriendo todos los círculos.
Y para cada uno agregamos uno al hewe y estamos multiplicando el tamaño de la escala por el punto nueve.
Así que estamos reduciendo un poco cada fotograma.
Pero hay tantos marcos que en realidad se contrae con bastante rapidez y podemos deshacernos
de nuestro círculo animado ahora que comienza con la carga de la página.
No queremos comenzar con una pantalla negra.
Y luego, cuando tocas una tecla, agregamos un círculo.
Entonces, probemos.
Aquí vamos.
Entonces esto es casi exactamente de la misma manera.
Aquí está el sonido.
Una gran diferencia es que el color dice que todas las teclas tienen un color asignado aquí, así que Q es este azul,
una mitad azul más oscura.
¿Es gris?
Entonces, en nuestro caso, ahora es de color púrpura, aquí estamos configurando a todos para que comiencen en naranja y luego
cambien el tono.
Entonces, tendremos que arreglar eso, pero me refiero a esperar para hacerlo hasta que agreguemos sonido.
Así que hemos terminado por ahora.
Hay una pequeña optimización que lo convertirá en el final porque en este momento nunca eliminaremos
esos círculos de la matriz circular.
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.
Técnicamente todavía está en ese conjunto.
Entonces eso no es ideal.
que habíamos creado y no viéramos ninguno de ellos, no deseamos pasar por encima de todos ellos.
Si tuviéramos diez mil círculos
Entonces, en el último video, le mostraré cómo podemos eliminar un círculo cuando sabemos que ya no está o cuando
sabemos que ya no es posible.
OK así que el próximo vamos a trabajar con sonido