Animar con la API de animaciones web de Javascript

1. Introducción: Las animaciones simples son bastante fáciles con CSS. Pero tan pronto como quieras animar algunas cosas a la vez o en secuencia, pronto puede llegar a ser problemático. No hay forma sencilla de CSS de decir cuando esta animación está terminada, corre, esta otra, por ejemplo. No obstante, eso es algo que puedes hacer fácilmente con la API de JavaScript Web Animations. Y de eso vamos a aprender en este curso. Ahora bien, si eres un principiante completo con desarrollo web, este probablemente no sea el curso para ti, pero si conoces HTML y CSS y tienes una comprensión moderada de JavaScript, creo que tienes que hacerlo bien. No obstante, me estoy adelantando. Soy Ben Frain, desarrollador web y autor del diseño web más vendido Responsive Web Design con HTML5 y CSS. Si tomas este curso te voy a mostrar cómo escribir animaciones con JavaScript Web Animations API. Y vamos a hacer de todo, desde animaciones simples que estarías acostumbrado a usar y CSS hasta una serie de animaciones secuenciadas en una pieza de interacción que construirá juntos. Todo lo que necesitas para este curso es un editor de texto, un navegador, y una tolerancia para chistes de calidad inferior. Así que ponte cómodo, consíguate una buena bebida. Y empezaremos en el siguiente video. 2. El proyecto construye: Antes de que construyamos esta cosa, quiero mostrarles dónde vamos a terminar. Para que se pueda ver aquí a la derecha mi pantalla, tenemos este tipo de lo que estoy friendo abominablemente el área del escenario. Y tenemos un conjunto de botones en la parte inferior. Y a medida que hacemos clic, se puede ver por dónde estamos corriendo un par de secuencias, especie de desplazamiento de texto de Star Wars que están cruzando cohete. Y se puede ver que como número de animaciones corriendo suma conjunto y algunas también en secuencia. Entonces las tres de estas escenas de batalla, y se puede ver nuestra especie de Rocky entra y atraviesa. Y luego nuestra escena final al final, estos son cohetes Londres. Se apagan los Jets. Y luego después de sólo un breve retraso, aparece la pequeña amiga de UCL que amorosamente han llamado a eddy. Lo que construyes no tiene que ser lo mismo que esto. Puede ser esto. Podría ser algo similar a esto, o podría ser algo completamente diferente. Todo es importante es que aprendas y entiendas la API de animaciones web lo suficientemente bien como para que puedas empezar a mover cosas por la pantalla con JavaScript. Ahora, antes de ir más lejos, creo que vale la pena mirar por qué queremos hacer esto con JavaScript en lugar de CSS. Ahora soy un fanático masivo del CSS. A veces Se trata de, de elegir la herramienta adecuada para el trabajo correcto. Entonces vamos a echar un vistazo a eso en el siguiente video. 3. ¿Por qué no solo usar CSS?: Echemos un vistazo a una animación muy sencilla con CSS. Tengo recarga en vivo pasando aquí y tengo una herramienta llamada guapa, los reformatos, ese impuesto ¿va? Llegaremos a eso muy pronto. Por ahora, sólo vamos a hacer una animación muy sencilla. Entonces ella va a hacer, vamos a darle a palo un div en la página. Vamos a darle una clase de cosas. Y luego veamos si con el poder del CSS, podemos ante todo, hacer una bonita caja. En la página. Ancho, 100 píxeles de alto, 200 píxeles, color de fondo. Tendremos un bonito naranja brillante. Eso es sólo cheque. Tenemos R-cuadrado, ¿de acuerdo? Y ahora vamos a ejecutar una animación. Entonces solo voy a escribir primero la declaración de animación y luego escribiremos el fotograma clave después. Entonces no te preocupes por el hecho de que no hay marco clave ahí al minuto. Entonces Animación, y lo vamos a llamar movimiento, ¿verdad? Se va a llevar 1 segundo y es ir hacia adelante. Y nos iremos relajando. Esa es la función de sincronización. Si no sabes lo que 0s adentro, afuera es, estaremos cubriendo que pronto se apague, no te preocupes por eso. De acuerdo, entonces ahora necesitamos escribir la jugada real, ¿verdad? Fotogramas clave. Vamos a coger ese poco rápido. Y sólo vamos a ir, esto va a pasar a. Entonces cuando se utiliza, en esta situación, no se puede escribir nada por ciento 200% o algo así. Pero es más fácil si, si solo quieres pasar a la animación a algo nuevo. Si lo escribes así, simplemente se moverá directamente a donde lo, donde quieres que termine. Entonces en este caso, solo quiero mover nuestra casita. Vamos a traducir, y nos vamos, vamos a ir 300 píxeles a la derecha. Y me voy a mover hacia abajo. Y mientras estamos aquí, sólo cambiemos el radio fronterizo al 50%. Entonces con un poco de suerte, ¿qué ayuda a enloquecer? Y cambiemos el color de fondo. Y vamos a ir a, vamos a ir a un bonito gris oscuro. Ok, veamos qué hace esto por nuestras fortunas. Cualquier cosa que Dunya hacer no quiere eso a regla o buscó esperar que se fuera. Necesito escribir un movimiento de fotogramas clave, ¿verdad? Está bien. Porque la sonrisa en mí, vale, para que veas que estamos saliendo de una plaza brillante, moviéndonos a la derecha, conviértala en círculo, bien. ¿ Y si ahora quisiéramos esperar de un segundo y luego mover todo en círculo hacia abajo y convertirlo de nuevo en una plaza es un par de maneras en las que se podría hacer esto. Podrías agregar otra animación a todo selector o podríamos construirla en los fotogramas clave. Entonces si vamos a construirlo en los fotogramas clave, Echemos un vistazo a eso primero. Si vamos a construir en los fotogramas clave, Supongamos que vamos a ir solo copiar esto y ese va a ser nuestro nuevo. Entonces va a ir 0, que iba a ir 33%. Queremos que termine. Entonces 0 no va a tener ninguna transformación en él. No va a tener un radio de ébola. Esta es esencialmente nuestra posición inicial, y esta es r. Así que vamos a ir por nuestro brillante tercio naranja del camino a través. Nos vemos así. Y luego queremos esperar ahí otro 2.5º. Entonces de todo el camino al 66%, esto funciona en mi cabeza de donante para muestra, el trabajo En la vida real aquí. Y va a ser lo mismo. Porque cuando llegamos al 60, 66% a través de nuestra animación, quería estar en el mismo lugar. Entonces, así que entre 3366 esperemos que vaya a ser una pausa y luego solo agarra este bit. Soy un idiota, lo siento. Agarramos eso. Entonces esto va a ser todo al 100%. Y luego a un 100% queremos seguir terminando a la derecha. Vamos a bajar 300. Vamos a dar vuelta a una plaza. Nos fijamos de manera diferente. Y luego vamos a volver a nuestra plaza. Eso va a pasar bastante rápido a 1 segundo. Entonces solo voy a hacer que la duración sea la animación un poco más larga. Entonces voy a cambiar el 1 segundo a tres segundos. Entonces deberíamos conseguir ahora algo así como 1 segundo a través, 1 segundo pausa, 1 segundo abajo. Tales se hacen algo mal. Ahí vamos. Y vuelve a intentarlo. Espera abajo. Bueno, nosotros p, OK, así que eso estuvo bien. Pero supongamos ahora, mientras que los diseñadores que aman lo que hemos hecho con esta plaza sin embargo, me noquearon la fiesta, uh, pero en realidad quieren 1 segundo a través, dos segundos de retraso y 1 segundo abajo. Podemos trabajar en torno a esto no podía esperar. Podríamos, podríamos cambiar nuestros fotogramas clave. Podrías arreglarlo, trabajar donde estaría el porcentaje para el, para las albercas y luego cambiar tu libro. Empieza a ponerse bastante difícil de manejar. Y esta es solo una animación que estamos ejecutando aquí. Dije antes que pudiéramos hacer esto de otra manera. Entonces intentemos eso. Si nosotros, si volvemos a donde estábamos hace un momento, donde sólo tenemos que mover la animación correcta. En lugar de hacer esto con fotogramas clave, Supongamos que lo que hicimos es hacer otro conjunto de fotogramas clave. Voy a llamar a este movimiento hacia abajo. Y este lo va a hacer es que va a ir de MEA, eso no va a funcionar. Entonces vamos a ir de sólo para ser claros, cuando queremos bajar, sabemos que vamos a estar 300 a través 0 abajo. Vamos a ser un círculo. Y vamos a estar en los 3s, que es el tipo de gris oscuro. Y entonces para cuando lleguemos a completar, nos gustaría estar de vuelta y luciendo como una plaza. Al parecer una plaza, ideal todo el tiempo. 300 Darrow, Xero, radio fronteriza. O, pero dos. 90. Entonces esos serán nuestros fotogramas clave para bajar. Entonces podríamos poner aquí, nos mudamos. Y queremos que eso diga 1 segundo. Y queremos un retraso de 500 milisegundos. Y queremos dar un delanteros y vamos a salir con facilidad. Aquí hay un error obvio por qué esto no va a funcionar. Yo lo voy a ejecutar. Y los dedos en las poses. Me puedes decir si sabes lo que es. Vamos a correr eso desde el principio. ¿Viste eso? Ni siquiera atraviesa antes de que empiece a bajar. Y la razón de eso, y es por eso que las animaciones CSS, CSS pueden ser problemáticas, es porque en un todo, para que toda la segunda animación se ejecute, tenemos que tener en cuenta cuánto tiempo se despega primero para completar. No hay manera de que NCSS diga cuándo se termine ese primero, luego haz este siguiente. Entonces lo que tendríamos que hacer aquí es que nos tenemos que ir, vale, entonces nuestro retraso, queremos que a cinco, hicimos un retraso 2.5 después de que atravesara. Entonces no es un retraso de 500 milisegundos, en realidad es un 1500 milisegundos, 1.5, así que puedo retrasar. Entonces ahora esto debería ser algo más como queremos ver. Tenemos el retraso y luego se mueve hacia abajo. hemos trabajado en torno a este tema. Pero la realidad es, no es una manera fantástica de pensar estas cosas a través. decirse que podría hacer esto un poco más fácil con propiedades personalizadas, lo que podría hacer eso seguro, podríamos ir. La duración es de 300 milisegundos. Y esto, esto podría ayudar. Depende de tu preferencia o supongamos, pero podríamos hacer duración. Y esta también va a ser la duración. Duración. Y luego por nuestro retraso, ni siquiera estoy convencido de que esto sea mejor y ciertamente no estoy convencido de que sea el tipo de cosas que es fácil razonar. Si volvieras a este código en seis meses, tomaría un poco de rascarse la cabeza. Por lo que será duración tiempos 1.5. No, eso no está bien. Ok. Cerrado en el lugar equivocado. Eso es raro. Esperemos que esto haga lo mismo y vamos a probarlo. Sí, vale, entonces, así que eso funciona. Haciéndolo así. Sí hace que sea un poco más fácil cambiar la animación general porque en lugar de tener que entrar y recalcular o retrasar, está hablando en general Aquí podemos mostrar y esto anotar 1 segundo. De acuerdo, entonces tenemos una casa de 1 segundo. Podría retrasar 1 segundo hacia abajo. Ahí lo hemos trabajado y hemos mirado cómo potencialmente podrías hacer ese poquito más fácil. Estoy usando propiedades personalizadas, pero todavía no hay manera fácil decir cosa de rudeza que cuando esta cosa está terminada ruinosa. Siguiente cosa, cuando eso esté terminado, corre, esta otra cosa. Y también hay que ni siquiera hemos tocado aquí. Si quisiéramos pausar animaciones y luego reanudarlas, repente las hará volver en la otra dirección. La verdad es que CSS simplemente no tiene una buena respuesta para eso. ¿ Y sabes lo que voy a decir? El API de Animaciones Web sí tiene una buena respuesta para ello. Probablemente estés consciente de que hay un montón de paquetes de animación de JavaScript de terceros que puedes descargar y usar en tu proyecto, que encuentras, hay algunos muy buenos por ahí. Estoy pensando en cosas como calcetín verde. Pero el problema es que eso es algo que luego tienes que poner en tu página web, la aplicación que estás construyendo. Todas y cada vez que quieras ejecutar una animación. Y también es, estás teniendo que aprender una pieza personalizada de sintaxis que puede o no estar dentro de diez años. Con la API de Animaciones Web, esto es un estándar, esto no va a ir a ninguna parte. Entonces lo que aprendas con una API de Animaciones Web te va a soportar en muy buen lugar adelante. Esperemos que eso se aborde el por qué querríamos usar JavaScript. Y veamos cómo lo hacemos con JavaScript en el siguiente video. 4. ¿Incluso es una API?: Antes de escribir nuestra primera animación con JavaScript, solo quiero cubrir el término API. Api, el acrónimo significa interfaz de programación de aplicaciones. Todo lo que significa para lo que estamos haciendo aquí es que hay una interfaz de JavaScript incorporada en el navegador web que nos permite controlar animaciones con JavaScript ya que es un estándar web, hay una especificación que puedes ir y leer. Las especificaciones difieren mucho cuando se trata de características web. Tan fácil de meter la cabeza alrededor y entender a los demás menos celular. Encuentro la especificación API de animaciones Web poco intensa. Ahora, esperemos, si aquí hago un trabajo medio decente, no deberías tener que ir a mirar mucho esa especificación. A menos que quieras, lo cual, ya sabes, eso depende enteramente de ti. Yo no juzgo. Mucho en cuanto a soporte de navegador. Ya que grabo este tardío 20-20. Y si usamos, puedo usar.com tipo en Web Animations API, entonces el soporte se ve algo como esto. Tienes un apoyo decente justo en todo lo que puedes desear usar con sensatez. Ausentes notables, IE 11 y adjunto a la versión 18. Pero obviamente cada vez hay menos preocupación en este punto. También hay polifenoles. Si sientes que necesitas hacer eso, obviamente ya es bastante bueno. Y sólo va a mejorar. Eso es suficiente de intro. Sigamos con la derecha en nuestra primera animación con JavaScript. En el siguiente video. 5. Un simple ejemplo de animación web: Correcto, corramos primero la animación con la API de Animaciones Web. Vamos a empezar con la forma que teníamos hace un par de videos que nos movíamos con CSS. Entonces si recuerdas, Don era muy sencillo y un solo elemento con una clase de cosas. Y solo estoy vinculando aquí a las animaciones ab.js. Ahora, las animaciones puntan JS al minuto es muy sencillo. No hay nada que tenga solo un registro de consola para que puedas ver eso haciendo algo. Y el primer trabajo es solo deshacernos de todos los estilos que tenemos antes que estaban haciendo esta animación. Si te acuerdas. Yo sólo voy a despejar algunas de estas otras cosas del camino. Entonces lo siento, sólo una vez más, tenemos la plaza pasando por diez hasta un círculo y luego regresando hacia abajo. Ahora, queremos deshacernos de cosas de animación Olof para mí porque no necesitamos nada de esto. Ahora. Lo que tenemos ahora es r-cuadrado haciendo nada. Y vamos a rehacer esa animación con JavaScript. Y solo para mostrarte, vamos a conseguir la apertura de devtools para que puedas ver a la consola Jess reportando para el deber. Sabemos que todos los archivos JavaScript enganchados, no hay problema. Lo primero que vamos a hacer, y déjame usar la palabra clave const aquí para hacer una variable de tipo al elemento de la página. Te vendría bien menos. Puedes usar VAR para lo que estamos haciendo. Realmente no importa. Simplemente me gustaría meterme en el hábito de usar cons 20 es algo que es constante y no voy a cambiar. Entonces otro documento, selector de consulta de puntos. No es necesario hacer selector de consultas todo porque solo hay uno de ellos en la página. Y su cosa, cool es pensar en cosa igual a documento, consulta, selector. Todos. Sólo para comprobarlo, tenemos eso en la página. Vamos a hacer esto con todo, pero sólo para asegurarnos de que entren estos primeros bits. Está bien. Para que se pueda ver aquí abajo en la consola, hemos agarrado todo elemento. Ok, entonces ahora lo tenemos. Queremos más animados. Y así vamos a ir cosa. Y que el primer método que el método que usarás la mayor parte del tiempo, es animado. Animar. De acuerdo, así que estoy sobre todo para animar toma dos sets, bueno, dos argumentos, no te preocupes en absoluto en este video, si esto suena como gobbledygook, vamos a repasar estas cosas en una gran cantidad de detalle en breve. Sólo voy a mostrarte cómo se ve esa misma animación que hicimos en CSS cuando lo haces con JavaScript. El primer argumento será una matriz de fotogramas clave. Por lo que nuestro primer fotograma clave es la ganancia para ser forma trans. Y notarás aquí que estamos usando una cadena para lo que sucede en la transformación. Entonces creo que fue traducir 300 píxeles, nada de trazar funciones de temporización aquí y vamos a decir que va a tomar tiempos en JavaScript. Y la API de JavaScript siempre se hace en milisegundos. Por lo que podría estar acostumbrado en CSS, digamos en 1 segundo es 1S. Eso es un no-go. En JavaScript, siempre es en milisegundos. Por lo que 1 segundo, 1000 milisegundos. No necesitas ponerte las unidades. Siempre se asume que estarías usando milisegundos, fill. Van a ser las dos. Por si acaso vamos otra vez en cualquier dirección, no te preocupes por eso por ahora. Feasing, vamos a ir en Justinian JavaScript también que la API de Web Animations, la función de temporización predeterminada en CSS es una facilidad, mientras que en JavaScript lo aterriza, el valor predeterminado es A-lineal. Entonces si queremos hacer algo que no sea una animación lineal cuando en realidad hay que decir eso. Entonces digamos que vamos 0s y aquí fuera solo para una especie de mostrarte cómo se ve eso cuando guardo esto ahora esto va a ser reformateado un poco por más guapa. Entonces ahí lo tienes. Para que se pueda ver el primer pedacito que hemos metido es sólo esa transformación. Y diremos mudarse a través. Y diremos que hagamos cada 1000 milisegundos que queríamos llenar para que consigamos los estilos del punto final de la animación persistentes. Y estamos usando una función de facilidad y tiempo fuera. Ahora también teníamos, lo cambiamos de un cuadrado a un círculo como iba a la derecha. Entonces lo que realmente necesitamos hacer aquí, vamos a ir desde el radio fronterizo. Y también estás en JavaScript uso de suelo, CamelCase, nombres de propiedad. Entonces en CSS tendríamos guión fronterizo, radio en JavaScript es frontera y luego radio con un R. mayúscula Así que un radio fronterizo está llegando a ser sin opex y vamos a transformar no lo es. Entonces ese va a ser nuestro punto de partida. Y entonces vamos a cambiar eso para que sea radio constructor. Y entonces eso va a ser del 50%. Echemos un vistazo. De acuerdo, entonces algo por aquí. Si bien nos equivocamos. Me falta una coma ahí. Con tus marcos clave, puedes ver aquí usan estas llaves. Y después de cada conjunto de llaves, esto es, estos son por cada fotograma clave individual. Y después de cada uno de esos necesitas poner una coma. De acuerdo, entonces ahí vamos. Y de nuevo, pienso en el que construimos con CSS, nosotros también, transformamos el y el color de fondo. Por lo que sería de nuevo color tierra así. Y otra vez, pasas en cuerda y un agradecimiento fue de tres. Entonces ahí vamos. Esa fue la primera parte de lo que hicimos con el CSS. Lo interesante de esto es que ahora podemos decir, podemos secuenciar cosas. Entonces podemos decir cuando esto esté terminado, entonces. Entonces cuando termine esa animación, vamos a partir en una nueva. Y vamos a decir cosa punto, y yo tengo ocho años. Y otra vez vamos a pasar en dos cosas. El primero es nuestra matriz de fotogramas clave. De nuevo, no, no te cuelgues de esto por ahora. Y va a entrar en forma de tendencias. Y es como maldita debajo de píxeles. Vamos a comprobar lo que sucede aquí y se puede ver cómo se secuencian esto. Y así me iré por ahora. Vamos, vamos a llenar esto con más detalle en un momento. Y esto de nuevo dirá que aquí hay un retraso de 2.5a. Y luego haremos lo mismo que antes. Usando de nuevo fácilmente y fuera. Ok, duración. Nuevamente, se puede ver que no hay órdenes específicas a estas cosas. Mientras tengas las cosas adecuadas ahí dentro, va a funcionar bien. Está bien. Entonces veamos qué hace eso por nosotros. De acuerdo, entonces puedes ver cómo uno corre tras otro, pesar de que ahí tengo los valores equivocados. Entonces al minuto me estoy transformando de 300 por aquí para luego ser 0 y el eje x. Por lo que necesito asegurarme de que ese 300 esté ahí dentro. Y vamos a hacer eso 200 por ahora. Está bien. Entonces veamos qué hace eso por nosotros. De acuerdo, y entonces si recuerdas, también queríamos darle vuelta a una plaza. Entonces otra vez, lo que tenemos que hacer aquí, ya que vamos a hacer que nuestro color de fondo vuelva a lo que era. Y ese fue F9 0. Y vamos a maquillar el radio de frontera de nuevo a 0 píxeles. O podríamos usar porcentajes que se superponen phi. De nuevo, no espero que entiendas esto ahora esto solo te está dando una visión general de cómo escribirías animación simple con la API de animaciones web de JavaScript. De acuerdo, así que esa es una visión muy breve hecha con y ahora podemos meternos en la basura arenosa. 6. Actualizar el proyecto: Bienvenido de nuevo. Entonces, solo refresquemos nuestros recuerdos en cuanto a cuáles son los principales proyectos que vamos a estar construyendo juntos. Tenemos un área de escenario will canvas, si se quiere, no debe confundirse con el elemento de lienzo en el que se mete. También puedes usar un JavaScript para pintar cosas con. No estamos usando el elemento de lienzo. Sólo estoy llamando a esto, um, este elemento de que vamos a mover todo a Canvas. Y también tenemos estos botones abajo. Entonces tenemos al lado para saltarnos las cosas. Y luego también tenemos como tira Boston, y luego tenemos agujero negro, que vendrá demasiado después. Tenemos un poco de configuración que hacer aquí. Tenemos esta pequeña lectura de cualquier escena en la que se ponga también. Nos vamos a montar, en realidad construyendo la concha, esto primero en el siguiente video. Ahora bien, si te interesa principalmente solo entender y meterte en el bit donde realmente usamos la API. Quizás quieras saltar un poco, pero en los próximos videos, aparte de construir esta estructura, aparte de construir esta estructura, también vamos a cubrir cosas como funciones de temporización y animaciones de fotogramas clave. En términos generales, así como una especie de refresco en caso de que sea algo que nunca has hecho antes o algo que solo necesitas un poquito de un me vuelvo a poner al día con. Entonces si no te preocupa la facilidad en las funciones de temporización, duraciones, cómo hacer iteraciones, cualquiera de ese tipo de cosas por todos los medios salta adelante. De lo contrario, quédese por ahí para los próximos videos y nos sacaremos a través del elasto y luego conseguiremos construir o proyecto real juntos. 7. Configuración básica: Vamos a empezar con la configuración más simple que puedas imaginar. Tenemos un archivo HTML prácticamente en blanco. Nada más que una consola inicie sesión en nuestro archivo JavaScript. Y voy a estilos y obviamente esas dos hojas de estilos y el archivo JavaScript ambos enlazan a la hoja de estilos. Y estaban llamando a nuestro guión de animación. No necesitamos, y no necesitas ninguna herramienta de compilación con el fin de seguir esto y conseguir que las cosas funcionen. Voy a utilizar una herramienta llamada Browser Sync a lo largo de estos videos, sólo porque me da automáticamente recargas y significa que podemos movernos rápido sin que yo refresque continuamente la página. Ahora, también puedes obviamente instaladores tú mismo. Si te diriges a BrowserSync dot IO, puedes ver aquí las instrucciones de instalación para hacerlo. No hace falta un par de cosas extra como npm y node, que si no estás familiarizado con esas herramientas, creo que mi consejo en este punto sería simplemente olvidarte de esta parte. No te empantanes y conseguir que estas herramientas de compilación estén funcionando eso. Ese no es el foco de lo que estamos haciendo aquí. Queremos meternos en lo bueno y hacer las animaciones web. Entonces si estás familiarizado y cómodo, tal vez esculpe media hora y tratando de que esta cosa funcione libro. No trabajes este punto, no es súper importante. Todo lo que requiere es hacer una instalación MPI, instalar la sincronización del navegador a nivel mundial. Y luego puedes ver si haces click, empieza. De nuevo, será diferente dependiendo del sistema operativo en el que estés. Aquí soy un Mac. Usted puede ser Windows, usted tal vez Linux. Y una vez que tienes eso abierto y en ejecución, es un caso sencillo de que abras un terminal y lo pasas en un comando, BrowserSync, que básicamente estás diciéndole a BrowserSync que inicie un servidor local. Y se puede ver aquí, le estoy diciendo esto a cosas que aquí lo estoy diciendo. Estoy ejecutando la sincronización del navegador como el comando, iniciar, detener la sincronización del navegador. Y luego los dos tipos de argumentos, si te gusta eso estoy pasando a servir y lo siento, servidor y archivos. Y esas dos opciones te permiten decirle dónde estará la raíz del servidor, que se va a girar y dónde están los archivos que quieres que vea. Ahora, en este ejemplo de aquí, mi culpa, mis archivos que estamos viendo aquí en una carpeta llamada vid siete. Entonces a partir de este punto, estoy ejecutando este comando y haga clic en Entrar y los me giran hacia arriba un servidor local aquí. Y entonces es simple como si quisiera cambiar esto para favorecer el color naranja. Estoy recibiendo estas recargas instantáneas. Por lo que es solo una herramienta muy útil si te iteran rápidamente en las cosas. Te ahorrará bastante tiempo del comando y todo para refrescar tu o usar tu ratón para hacerlo, grandes herramientas solo tú puedes ponerlo en marcha rápidamente. No te estreses al respecto si vas. Además, probablemente verás aquí estoy usando una herramienta llamada bonita. Y vamos a más guapa hace, es que toma la forma realmente código esencialmente. Entonces en lugar de preocuparse por la sangría o si poner punto punto y comas y todo el resto de ella. Bonito solo se encarga de eso por ti. Por lo que puedes ver aquí es un ejemplo. Si no he sangrado correctamente este archivo, solo puedo guardarlo. Y bonita va a hacer que se vea bonita. Tan guapa si no lo estás familiarizado. Yo sí lo recomiendo mucho. Punto más bonito IO. Y de nuevo, es otra herramienta que va a necesitar nodo va a necesitar MPM. No te estreses si está tomando tiempo o es difícil levantarte y correr, salta sobre él. Siempre puedes volver a ello más tarde, pero no dejes que eso te impida seguir adelante con animar algunas cosas. Entonces con eso dicho, sigamos en el siguiente video y realmente construyamos nuestra estructura básica. 8. Crear la escena y los controles: Entonces en este video, vamos a mirar por encima del tipo de lecho rock, si quieres, de lo que estamos a punto de construir. Entonces si empezamos con HTML, puedes ver lo único que he agregado de nuestro archivo en blanco. Él es, tengo un elemento principal aquí, que de nuevo, podría ser fácil de buscar en las herramientas de desarrollo en realidad. Entonces tenemos un elemento principal. Tenemos aquí, se puede ver el área de lona, no el verdadero Lienzo. Tan solo un div que soy 6'2 y Canvas, ahí es donde vamos a cambiar un asunto de ley. Y se puede ver por aquí, sólo tiene un borde fijo de ancho y altura alrededor del fondo exterior color. Y se puede ver importante, tiene desbordamiento oculto no una posición de relativa. El desbordamiento oculto es importante porque una vez que empecemos a cambiar las cosas, queremos eso como una especie de cámara de cine, si quieres. Y así cuando las cosas van a cualquiera de los lados, no queremos pasar el rato por el costado de nuestra zona escénica. Y el relativo de la posición es importante porque a medida que avanzamos, verás que cuando añadamos cosas a nuestro lienzo, vamos a estar típicamente posicionándolas absolutamente lo cubriremos en breve. Pero el relativo es importante porque lo contrario las cosas que se posicionaron absolutamente se posicionarían contra la ventana gráfica en lugar de nuestra zona escénica. Aquí puedes ver que acabamos obtener elementos de botón estándar para cada uno de nuestros controles en la parte inferior, cada uno de ellos tiene un botón tipo ID. Siempre me meto en el hábito de escribir Botón de tipo en botones porque el comportamiento predeterminado de un elemento de botón es enviar, lo que en este caso no haría ninguna diferencia. Pero si por casualidad tenías un botón que estaba dentro de un formulario y no escribes el tipo, puede enviar el formulario. Entonces eso es sólo un lado qué explicación como por qué siempre pongo el tipo igual botón en elementos extraños. Tenemos una clase de botón Annie Dash, como en botón de animaciones. En cada uno de esos artículos. El primero escucha el botón Anterior y nuestro botón agujero negro, que vendrá demasiado más adelante. puede ver que están empezando la vida con elementos discapacitados sobre ellos porque cuando la página se carga por primera vez, no se puede ir hacia atrás ni arrancar el agujero negro. Y así por defecto están desactivados en nuestros estilos. Bastante simple otra vez, estilo básico para todos o elementos principales, lo que nos da este tipo de ancho de página de 800 lienzos básicos Dan, como expliqué antes. Y hay botones acaban de conseguir el estilo de botón fantasma estándar, si quieres. No hay nada realmente de consecuencia ahí dentro. Todo es cosas muy básicas. Animaciones en este punto. Todo lo que hemos hecho es que hemos hecho constantes para cada uno de los botones. Entonces si recuerdas, tenemos control previo, que es ese, siguiente, que es ese un agujero negro y se derrama aquí abajo. Y luego la lectura es el trozo de texto que aparece ahí. Entonces mientras saltamos por las escenas, dirá uno de dos, lo siento, uno de 32 de 3.3.3. Entonces hemos agregado dos oyentes de eventos que a estas alturas, tenemos, no estamos, no estamos listos para hacer cosas alrededor, jugar pausa, y no nos interesa hacer cosas alrededor del agujero negro. Nosotros somos. lo primero que nos interesa hacer es cablear este botón siguiente y anterior. Y lo que eso va a hacer es que eso nos va a dar un mecanismo para cambiar la escena hacia adelante, si quieres. Y les mostraré la mecánica de eso a medida que avanzamos. Pero esencialmente solo necesitamos crear un oyente o una función que se ejecute cuando se hace clic en esos elementos. Y podríamos igualmente, en lugar de clint, podrías usar apuntado ahí abajo si lo prefieres, bajando de los oyentes que tenemos en esos dos bosones. Se puede ver aquí hay un idx max, que es el índice máximo que he puesto en tres. Ahora ese va a ser el límite de cuántas escenas. Lo que tenemos va a tener. Eso estoy codificando duro aquí. Pero puede haber instancias en las que estás construyendo algo donde tiene más sentido hacer eso dinámicamente. Entonces podrías hacerlo, podría ser una lectura DOM que tienes que hacer. Podría estar basado en los datos entrantes. Eso te está diciendo que estos siete diapositivas por recorrer en este punto es sólo hardcoded. También hemos fijado un par de vueltas para el índice anterior en el índice actual. Y eso es para que podamos averiguar si vamos hacia adelante o hacia atrás, lo que ojalá tenga algo más de sentido a medida que pasemos por esta función de click de dirección de proceso. Ahora he dejado deliberadamente esta función de click de dirección de proceso plegada porque es bastante densa, aunque ojalá, bien comentada. Ahora si recuerdas, solo estamos disparando disfunción cuando o haces clic en el botón Siguiente, al hacer clic en el botón Anterior. Y así lo primero que tenemos que hacer es determinar cuál de esos dos en los que hiciste clic. Esta cosa que estamos haciendo funciona en principio al tener un número conjunto de escenas en las que puedes hacer click Siguiente para pasar por una vía y previa para combatir por lo contrario. El primero que determinamos es lo que estoy llamando polaridad aquí. Y quiero saber si has hecho clic en el primero o lo siento, si has hecho clic en anterior o siguiente. Y sobre esa base, estamos estableciendo polaridad a un 0 o a uno. También lo es un operador ternario aquí, que es como un condensado if else declaraciones. Y todo lo que estamos haciendo, estamos diciendo es la identificación de lo que hace clic en este control priv. Si lo es, entonces nuestra polaridad es 0, IE vamos hacia atrás. Y si pinchaste a continuación o, o, ya sabes, si no es eso entonces básicamente es uno lo que significa que vamos hacia adelante. También queremos fijar el índice anterior a donde estemos actualmente. Eso parecía confuso porque al hacer clic esto se movía en una dirección u otra. Tenemos que ahorrar donde estamos actualmente en caso de que quieras volver por ello. O más bien podemos decir en qué dirección estamos viajando. Eso lo pusimos ahí. Y luego en base a si nuestra polaridad como uno o un 0, si es uno, Vamos hacia adelante. Y así si donde estamos actualmente es lo mismo que el índice máximo, que si recuerdas, establecemos MaxIndex aparecen en la parte superior. Entonces, básicamente, dejar de fumar. Eso significa que estamos justo al final de nuestro conjunto de escenas. De lo contrario, queremos eliminar deshabilitado del botón. Puede que no haya desactivado activado en ese punto, pero si lo tiene, se eliminará. Y luego queremos fijar el índice actual. Por lo que esto va a funcionar para la próxima vez. Vamos a establecer el índice actual, hacer una adición al mismo. Lo vamos a contar. Vamos a dar un paso más a ese entero. Entonces si fuera distinto de cero, va a estar caliente. Pero antes que nada, tenemos que revisar. Entonces vamos a decir si el índice actual, cuando tenga uno agregado a él, es el mismo que o igual 12 MaxIndex. Después lo configuramos en MaxIndex. De lo contrario, establecemos el índice actual para que sea índice actual más un recableado de magnitud que, escuche eso de nuevo, suena confuso. Trámites de confianza. Entonces también si el índice actual es el maxIndex, queremos configurarlo para que se deshabilite. Entonces, básicamente si hemos pasado a la última, queremos poner al lado para ser deshabilitados porque no se puede seguir adelante. contrario es lo mismo, pero yendo hacia atrás. Entonces si vas al revés, queremos sacar a discapacitados hacia adelante porque si vamos hacia atrás, entonces obviamente podemos ir hacia adelante. Si el índice actual es 0, podemos dejar de fumar porque estamos justo al principio. De lo contrario, vamos a eliminar todo el estado deshabilitado del botón, lo siento, atributo deshabilitado del botón. Y luego vamos a establecer el índice actual para que sea el índice actual menos uno. Si eso es menor o igual a 0, entonces vamos a ponerlo en 0. De lo contrario, vamos a establecer el índice actual para que sea índice actual menos uno. Entonces solo recuerda si, si no estás acostumbrado a los operadores de declaraciones ternarias en JavaScript, solo piensas en estos como condensados si elses, eso es esencialmente lo que son. Y lo que estás haciendo es decir si, si algo es cierto, pero ahí está tu condición básicamente. Y si esa condición es cierta, haz esto primero, lo contrario, haz esta segunda cosa. Y luego sólo por el bien de ver cuáles son esos valores, vamos a consola cerrar sesión eso. Esta sección inferior aquí volverá a más tarde. Se trata de cómo vamos a hacer animaciones y dejar de hacer lo que están haciendo cada vez que haces clic hacia adelante y hacia atrás. Entonces no te preocupes por eso. Pero por ahora para ponerte al día en este video. Y de nuevo, esto obviamente no lo es, esto no es esencial para la API de Animaciones Web. Esto es sólo para el proyecto que estamos construyendo ya que sólo nos dan un marco para disparar estas diferentes animaciones y escenas. Tan solo para comprobar, este pequeño funciona con nuestra sincronización de navegador corriendo desde el último video. Si hago clic en Siguiente, era distinto de cero y ahora es uno, estaba en uno y ahora es demasiado no era demasiado y ahora son tres. Y hay estados discapacitados pateados como si no pudiera ir más allá hacia adelante regresando al revés. Yo estaba en tres y ahora es demasiado no era demasiado. Ahora es agua tibia en uno y ahora es 0 cuando no puede ir más atrás. Esa fue mucha herramienta para lo que parece no mucho en la página, pero eso va a ser esencialmente lo que queremos hacer en los próximos videos. Ahora, antes de que empecemos a animar con JavaScript propiamente, todavía hay un par de temas más sobre los que solo necesitamos tener un control primero. Y eso son los encuadres clave en principio. Y luego también las diferentes funciones de temporización. Entonces los vamos a ver en los próximos videos de pareja. Te veré en un momento. 9. Teoría de animación web: fotograma clave: Sólo para estar seguros de que estamos saliendo en la caída correcta. Voy a repasar ahora los fundamentos de lo que queremos decir por Keyframe y preadolescentes y animaciones y todo ese tipo de cosas. Entonces justo en la posibilidad de que no estés familiarizado con la idea de los fotogramas clave. Si tenemos una animación muy básica y vamos, supongamos, supongamos que tenemos un balón aquí. Y queremos que se mueva hacia aquí y luego termine aquí. En términos de animación, lo que veríamos en realidad como el uso final o si lo miras, una llamada a, verías que no sólo verías que la cosa se movía instantáneamente de ahí para allá para allá. Lo que verías es el camino del balón moviéndose de 1 a otro, y luego finalmente a ese punto. Y la terminología para estas cosas, o escuchar o tus marcos clave. Y luego los bits en el medio, o de donde viene la palabra interpolación, interpolación. Es el entretejido entre estos marcos clave. Entonces lo que nos preocupa sobre todo cuando estamos animando si eso es a través de efectos posteriores o si eso es a través de JavaScript o CSS, es que estamos interesados en hacer estos puntos clave y dejar que el computadora descifrar los in-entreweens. Entonces eso es lo básico del fotograma clave. Entonces cuando hablamos de organizar fotogramas clave y escribir fotogramas clave, recuerda que eso es todo lo que estás haciendo es que estás, estás especificando dónde están estos puntos. Donde hay un cambio distinto entre el movimiento de la cosa que estás animando, cómo eso se manifiesta, ve y piensa en algo. En realidad no vamos a animar algo. Pero supongamos que la clase div es igual a caja. Entonces supongamos que aquí tenemos una caja y vamos a decir ancho de caja. Pixeles de maravilla, ¿verdad? En los píxeles. Esa cola molida. A quien no le gusta un poco, rosa caliente, rosa, rosa. Está bien. Ahí está nuestra caja. Y si quisiéramos mover esta cosa alrededor, la forma en que estos bloquean en términos de JavaScript es diríamos const cuadro igual a consulta, Lo sentimos, selector de consulta de punto de documento. Y hay una caja. Y entonces diríamos Box dot animate. Esta es la forma en que la API, Web Animations API tiene este método animate. Y se puede ver aquí el herraje interior de Sublime me está diciendo que esto toma dos argumentos, un conjunto de marcos clave. Y luego qué son las opciones de enfriamiento o las opciones de animación de fotogramas clave. Y pasaremos a esos en el próximo video. De lo primero que nos interesaría pasar. Entonces lo vas a pasar. Por lo general, dos objetos o una matriz de objetos y un conjunto de objetos. Lo que este primer bit antes del primer argumento de que lo pasaremos siempre son los fotogramas clave, ya sea un solo fotograma clave o un conjunto de fotogramas clave pasados como una matriz. Entonces estarías típicamente, si este fuera un fotograma clave, así que esto pasaría cuando algunas cosas ya en algún otro lugar del DOM. Y digamos que queremos transformarlo a, vamos a decir traducir su val se hace tarde y siempre es una cuerda aquí. Y diríamos 500 píxeles, 200 píxeles. Esa es sólo la soltera. Si quisiéramos moverlo. Algunos marcos clave como este tipo de increíble obra de arte que te mostré antes. Tendrías que pasar en una matriz de objetos. Entonces, en cambio, lo que haces aquí es que nos aseguremos en ese minuto superior, me voy a quitar estos porque no tienes que preocuparte por esos por ahora. En lugar de pasar un solo objeto, pasaría en una matriz de objetos. Por lo que sólo se necesita esto hasta un poco en los impulsos grasos tiene más sentido para bajarnos completamente. Entonces u, b y el segundo bit y transformamos y llegamos a escalar a tres veces su tamaño. Entonces en esta instancia, ese fotograma clave, ese pasando dos fotogramas clave ahí dentro. En primer lugar se traduce. Cualquier segundo está cambiando la escala. Ahora, podrías, por defecto sólo pasar en una duración. Esto debería Roma. Entonces si acabamos de pasar en dos mil dos mil milisegundos a segundos, y nos deshicimos de este bit. Por lo que ahora solo estamos configurando en enviar sintientes todos los fotogramas clave con duración. Ahí puedes ver nuestra maravillosa pieza de animación. No obstante, esta segunda apuesta aquí es donde normalmente lo haríamos, y más a menudo que no, estarás enviando un objeto con un montón de opciones de manojo de funciones de temporización. Y lo veremos en el próximo video. 10. Opciones de Timing: En el último video, miramos los fotogramas clave, la teoría de los fotogramas clave, y cómo se aplican básicamente con la API de Animaciones Web. En este video, vamos a ver el segundo argumento que pasamos a la función animate. Aquí es donde dejamos el último video. Y teníamos, si te acuerdas, tenemos el animate en el que pasamos. El primer argumento que pasamos fue una matriz de fotogramas clave. Dejamos esto al final del último video y el segundo argumento se quedó en blanco. Esencialmente, sí intentamos si recuerdas, estableciendo esto en una duración que ejecutará todo por defecto, pero con una duración en sus 3 mil milisegundos, tres segundos. Y puedes ver aquí, ese es el efecto que obtenemos cuando ejecutamos eso. No obstante, típicamente, no estarás enviando solo en la duración. Estarás queriendo mandar otras cosas también. Ahora bien, si solo necesito arriba, ojalá un poco aquí para que veas lo que está pasando un poco mejor. Es la apertura y cierre de toda función animada. Lo primero que estamos haciendo que miramos el último video, es enviar en este array de fotogramas clave. Y lo que nos interesa este video es lo que viene después de la coma, el segundo conjunto de argumentos. Y típicamente Eso va a ser un objeto. Ahora bien, las cosas que puedes pasar a este objeto son todo para ver con la forma en que quieres la animación a Roma. Entonces cosas que puedes enviar o duración, que de nuevo, milisegundos y lo escribes no como una cadena, sino como un entero. Por lo que 3 mil nos darían 33 segundos de retraso. Podrás optar por establecer un retraso para que esa cosa no huya de inmediato. Se retrasa también un entero. Por lo que 500 milisegundos te darían un retraso 2.5. Iteraciones. Si quisieras ejecutar algo un número determinado de veces, podrías decir, ya sabes, para, para que se ejecute cuatro veces en CSS will, si quieres ejecutar una animación infinitamente, usarías infinito. Ligeramente diferente. Y la API de JavaScript, en realidad pondrías el infinito como el número de JavaScript infinito así con un I. mayúscula Y el infinito, modo de relleno toma, no escribiste película avena o es solo llenar y tienes que pasarlo una cadena. Por lo que podrías tener el defecto. En JavaScript, una función de temporización lineal. Css es diferente y CSS es una facilidad. Para que eso te pueda atrapar. Por lo que sólo ten en cuenta eso. Y lo que puedes enviar dentro y fuera. O si querías ponerte fantasía, tal vez haya algo bonito, lo has visto fácil gana, y elegamos uno, elegamos este tipo de. Por lo que podrías elegir usar una curva de campana. Y de nuevo, solo pasas eso como una cuerda. Entonces si cotizas alrededor de ella y lo envías adentro. Entonces como la cosa ahora va a ir, van a tardar tres segundos, voy a quitar ese retraso porque vamos a ser aburridos. Asentimiento para ver. Dos segundos. Se va a llevar una eternidad y tenemos esta película fuera dando por vencido. También puedes decirle que se mueva. También puedes establecer la dirección de animación, que si has hecho alguna de este tipo de cosas en CSS, ya sabes, puedes ir normal, reversa, definitiva, una inversa alterna. A primera vista podrías pensar por qué es el reverso y por qué es el, lo siento, Y es el último reverso. Tan normal iría desde el telón de fondo, pero el vapor, lo normal iría en esa dirección. reverso obviamente iría en esa dirección. Último es de ida y vuelta. Último invertido ahí. La diferencia clave ya que comenzaría por el final, se movería de esa manera, y luego seguir adelante. Y tú escribirías esa dirección. Y de nuevo, eso es una cuerda. Por lo que sería normal o sería reverso o último reverso. Vamos a deshacernos de eso. Vamos a deshacernos de eso. Y a ver qué hace eso. No mucho. De acuerdo, entonces un botch algo. Ahora vamos a echar un vistazo rápido y a ver si podemos determinar qué he hecho mal. Ese editor editado. De acuerdo, así que como un idiota, he puesto el modo de relleno para que sea una curva en forma de campana donde lo que debería ser se está relajando. Es eso o llenar. Phil no hemos cubierto. Phil podría ser normal al revés. Aquí vamos. Se ha ido. Auto hacia atrás, ambos hacia adelante, no a menudo. Tienes que usar al menos los delanteros. Entonces cuando se ejecuta la animación, se desea conservar los estilos que existen al final de esa animación. A lo mejor tú no. El otro que tiendo a encontrarme usando mucho es ambos, lo que significa que sea cual sea la dirección que ejecute esta animación, quiero que los estilos de ambos extremos se apliquen dependiendo de la dirección que sea redonda. Entonces en este caso morirías. Yo sólo me voy a meter los dos ahí. Entonces veamos qué hace eso por nosotros. Y se puede ver ahí que la facilidad en un poco inusual consiguió este tipo de función de popping y temporización pasando ahí. Entonces, en general, si has hecho este tipo de cosas con CSS, esto debería sentirse al instante familiar. Pocas diferencias, pero en general, debería ser lo que solías hacer. Ahora hemos mirado los fundamentos de estas cosas. Tanto los fotogramas clave en el video anterior como las funciones y opciones de temporización en este video. Esperemos que tenga un poco más de sentido a medida que avanzamos en hacer las cosas con esta API. 11. La misma animación hecha con CSS y JS: En los dos últimos videos, miramos escribir los fotogramas clave para una animación en JavaScript. Y luego también miramos las opciones que puedes pasar a una animación Duración Funciones de temporización de retardo. En este video, solo quiero conducir a casa cómo escribir una animación comparable tanto en CSS como en JavaScript. Entonces vamos a, vamos a poner dos artículos en la página. Vamos a hacer un spinner una vez con CSS, y luego hago exactamente el mismo spinner con JavaScript. Entonces clase div, y vamos a llamar a esta clase de CSS spinner. Probablemente adivinarías spinner JS. Ambos compartirán algunos estilos. Entonces vamos a establecer los estilos comunes. En primer lugar, no terriblemente spinner ish esteras de libro porque hemos dejado aquí, radio de frontera 50%. Y esto hará que nuestro rectángulo circule. Y de hecho, sólo a un poco de espacio alrededor estos quiere meter un poco de margen en el exterior. Y luego girar CSS. Digamos animación. Ojalá tenga al menos 102 animaciones CSS escritas. De no ser así, ojalá esto tenga algún sentido. Vamos a hacer la propiedad de animación, o la propiedad de corto plazo que vamos a pasar a nuestro nombre de animación, que va a ser y me haga girar. Y va a decir 1 segundo. Va a tener delanteros y por lo tanto retener los estilos a medida que va y se va a ir infinito. Y luego si recuerdas, y la animación en CSS utiliza a facilidad función de sincronización por defecto. Y vamos a querer, bueno, de hecho, te voy a mostrar lo que hace esto por defecto y luego vamos a poner que inició la diferencia. Entonces los fotogramas clave giran también. Y ojalá recuerdes en CSS, si es el estado predeterminado es de donde quieres moverte. No necesitas definir eso, así que solo puedes decir a dónde quieres ir. Entonces en este caso voy a ir a hacer una transformación que es una rotación 359 grados. De acuerdo, ahora puedes ver aquí esa es la función predeterminada de temporización CSS, que es una forma fácil, que es este tipo de movimiento staccato que se llega ahí. Entonces podemos resolver eso y CSS para nuestras necesidades aquí solo diciendo lineal. Y eso nos dará un, un tiempo lineal y funciones de la espinaca simplemente sigue adelante. Entonces ese es nuestro CSS uno ordenado. Veamos cómo escribiríamos la misma animación con JavaScript. En realidad, girarlo así no es un buen caso de uso para una animación JavaScript con la API de Animaciones Web. Estamos haciendo esto realmente solo para conducir a casa el formato que ahora nos estamos acostumbrando en JavaScript del método animate, pasando en los fotogramas clave. Y entonces las diversas opciones de temporización que queremos también tienen que asignar a este contexto, nuestro spinner J S es igual a documento. Entonces solo voy a agarrar esto y el documento primero. Y luego vamos a animar y vamos a pasar en dos objetos. En este caso, estas van a ser nuestras opciones, incluyendo la función de temporización. Y este primero va a ser nuestro fotograma clave. Entonces de nuevo, palabra clave no es como una cadena, pero el valor de la propiedad es, así que vamos a conseguir rotar 359 grados. Y entonces aquí vamos a decir duración. Si recuerdas, en JavaScript con la API de JavaScript, no son segundos, son milisegundos y lo pasamos como un entero. Entonces ahí está nuestro 1 segundo es milisegundos. No queremos retrasar. Sí queremos nuestro relleno. Y vamos a decir otra vez, pasando como una cuerda, dispuestos a decir hacia adelante, porque hay cosas que sólo van hacia adelante, forzando iteraciones. Y JavaScript, lo pasamos infinito en lugar de infinito. Y luego como discutimos hace un momento, función de temporización predeterminada de JavaScript es una lineal, por lo que no deberíamos tener que establecer eso. Se puede ver que son exactamente iguales. Gira animada una vez con CSS y una vez con JavaScript. Ahora un problema común con las animaciones CSS es cuando quieres tomar dos transformaciones, por ejemplo, y ejecutarlas simultáneamente en el mismo elemento. Eso no es algo que puedas hacer con CSS, pero es algo que puedes hacer con JavaScript Web Animations API. Entonces en el siguiente video, vamos a ver cómo podríamos agregar algo simple, como una escala. Además de esto, transformar girar. Y veremos cómo eso es posible con JavaScript. 12. Agrega animaciones juntos: Al final del último video, nos habíamos hecho a los spinners. Uno animando con CSS y el otro animando con JavaScript. Y mencioné que uno de los problemas comunes que obtendrías con CSS es si estás intentando aplicar a fotogramas clave que usan Transform, por ejemplo, al mismo tiempo al mismo elemento. Entonces antes que nada, voy a hacer eso con el CSS. Y se puede ver el problema que se presenta. Entonces supongamos que tenemos nuestro spinner de autopsia aquí está la versión CSS. Y supongamos que junto a esta cosa está girando, también quiero que pulse. Por lo que va un poco más pequeño, un poco más grande ya que se está produciendo el giro. Por lo que podrías pensar que podrías hacer algo como esto. Entonces tengo otra transformación y se te perdonaría por creer que esto debería funcionar con otro fotograma clave hecho que y todo lo que hace es escalar el elemento al que se aplica. Ahí está nuestra primera, solo copiaré eso. Él es yo segundo. Y éste será Scale me. ¿ Se puede ver cómo se confunde? Forma de una palabra mejor? Está tratando de hacer ambas animaciones son unas. Raza no sabe cómo resolver eso. No puede, no puede averiguar cómo aplicar ambas transformaciones juntas. Ahora, en la actualidad, como nos pillan esto a finales de 2020, no hay solución para esto en CSS. Hay, sin embargo, una solución para ello en JavaScript solo para evitar que ese top sea silencioso, tan molesto. Y voy a apagar la animación del CSS. Da la vuelta al archivo JavaScript, y luego veremos cómo podríamos hacer eso con JavaScript. De hecho, podemos, podemos ahorrar tiempo aquí por, tomemos ese. Y llegamos a cambiar este bit para ser escala 0.8. Ahora esta es exactamente la misma situación que tuvimos con todo CSS uno. Pero la API de Javascript Web Animations como truco llamó hasta la manga. También puedes dentro de tus opciones, puedes usar compuesto. Y Hay unos cuantos. Aquí puedes ver, cadenas que puedes pasar a compuestas acumular en reemplazo, reemplaza el valor predeterminado que toma cualquier animación anterior que se estuviera ejecutando y lo reemplaza por esta nueva. Lo que queremos hacer aquí es elegir. Y lo que esto va a hacer es tomar nuestra segunda animación y añadirla con la primera. Acumular es similar pero ligeramente diferente. No vamos a meternos en las diferencias de eso. Ahora solo quiero mostrarles lo que pasa cuando lo metemos también. Se podría pensar que esto todavía está roto, no es en realidad es sólo porque lo que no he hecho es que no he puesto dirección para ser definitivo en el minuto. Se está restableciendo. Pero al hacer esto, puedes ver que obtenemos esta encantadora combinación de estas dos animaciones separadas, algo que simplemente no puedes hacer eso con CSS. Otra cosa que vale la pena señalar en este punto es que puedes ver como estas animaciones están escritas aquí, juegan de inmediato. Ahora eso puede o no ser lo que quieres hacer. Entonces hay un, hay un par de formas en que puedes resolver ese problema. La forma más fácil sería asignarme, girarme como la otra. Y éste va a ser Scale me. Y lo que podríamos hacer entonces es ir spin may dot pools. Y deberían apagar uno de ellos. Y entonces también podrías hacer Escala me dipolos. Y lo que puedes hacer aquí es que puedes, tan pronto como hayas definido una animación, puedes inmediatamente porque hemos, hemos asignado a una const ahí. Entonces podemos usar eso para decir, esta cosa está apegada, es una animación y de inmediato pausar. Y entonces podrías optar por despedir eso. Y otros eventos como un botón que se está haciendo clic o algún otro acabado de animación mientras miramos esto ahora, así como también una oportunidad para ordenar esto un poco. Cada vez que hemos mirado estas animaciones hasta ahora, acabamos de pasar todo directamente a la función de animación, que aquí está bien. Pero cuando estás haciendo algo un poco más grande a escala, rápidamente se hace difícil administrar todos estos fotogramas clave y diferente función de sincronización. Entonces en el siguiente video, solo vamos a pasar un poco de tiempo mirando cómo podrías refactorizar esto para que sea un poco más fácil de lidiar. 13. WAAPI 13: Echa tu mente de nuevo a ojalá hace milisegundos. En el último video, habíamos llegado a este punto donde habíamos, habíamos hecho para girarnos casi CSS o JavaScript. Y miramos la alegría de esta propiedad compuesta que puedes usar en JavaScript para combinar dos animaciones juntas. Si puedes recordar, esto nos estaba dando la capacidad de tener una escala corriendo en una animación, una rotación corriendo en otra animación, y conseguir el resultado de esos dos juntos en el DOM. Aproveche la oportunidad mientras tenemos relativamente poco código en la página que simplemente refactorizar esto ligeramente y hacerlo más manejable. En la actualidad. Cada vez que corremos en esta función de animación, pasando en los fotogramas clave y las funciones de temporización igual que, como objetos. Entonces, probablemente lo más simple que puedes hacer si tienes un montón de animaciones es que puedes nombrar tus fotogramas clave y separarlos. Entonces en este caso, aunque esto es muy sencillo, podríamos decir const, spin kf y obviamente no tenemos que nombrarlos de esta manera. Yo solo, tiendo a poner kf, kf al final o al principio sólo para que sepa que es un fotograma clave Miss viene. Y todo lo que vamos a hacer es sólo tomar esto y público así. Y luego pasaremos. En cambio, pasaremos esto en latín, esta primavera k, f. Y luego esta cosa podemos sacar y podemos decir const, spin timing. Y luego con mejor mirada, sí, ahí vamos. Por lo que todo sigue funcionando igual. Pero lo que estamos haciendo es que estamos, estamos separando nuestros fotogramas clave en un objeto diferente y nos estamos separando todo nuestro tiempo en para esa animación, típicamente, se tiende a hacer esto porque con fotogramas clave, no se siempre estar pasando en sólo una cosa como esta. Por lo general, será una matriz y un montón de marcos clave. Y ver todo eso dentro de la función de animación puede ponerse un poco desordenado. Entonces vamos a hacer lo mismo ahora con este de aquí. Y podrías apilar todas estas pero la parte superior si quisieras. Entonces supongamos que creceremos esta escala KF Wiki frames. Y diremos, ponlo aquí abajo justo a allá en una const auditoria sensata, escala, tiempo. Y de nuevo, sólo agarraremos estos. Y entonces si te imaginas aquí, sólo ha hecho que sea un poco más sensato pensar en estos como irracionalmente. Entonces aquí está nuestra función de animación y vamos a pasarla, lo siento, escala o sólo aquí, pasando todos los fotogramas clave. Y nuestro tiempo y guardar eso sólo para que bonita haga lo suyo. Y entonces lo que puedes encontrar es si estás trabajando con él, una gran pieza de interacción. Una vez que te hayas dado cuenta de los fotogramas clave, puedes pegarte más en otro lugar y simplemente importar hombres y mantener el, mantener la lógica de lo que estás haciendo la animación a estas bonita, sucinta pequeña causa a la función animate. Verás este tipo de patrón más a medida que nos ponemos a construir un pequeño proyecto juntos. Para darles algún ejemplo, supongamos que tenemos un botón, agregar evento, oyente, escucha. Y luego simplemente hace que sea más fácil hacer llamadas así. En lugar de cómo en todo el tiempo significa y más viejo. Los fotogramas clave o dentro de eso si y si lo has hecho este otoño, creo que ya sabes, todo lo que necesitas, para empezar a construir este proyecto junto conmigo. Entonces en el siguiente video, vamos a echar un vistazo en profundidad al proyecto va a estar construyendo y vamos a ir línea por línea sección a sección a través del artículo terminado. Y ojalá en este punto, quede bastante claro lo que está pasando. Así que ve y consíguete una taza de tu bebida favorita. Es probable que sea una larga. Te veré ahí en un momento. 14. Descripción de archivos de animación: En este video, vamos a cubrir todo aparte de escribir las animaciones mismas. Entonces te voy a llevar por toda la estructura de este proyecto. Sólo para que entiendas la mecánica de todo lo que está pasando alrededor las animaciones mismas y cómo llegué a eso, este punto con las diversas cosas en el DOM y cómo se posicionan. No quiero que parezca que estoy briendo sobre ninguna parte de la implementación. Entonces esto es todo lo que está consiguiendo el HTML y cómo llegó ahí, los SVG de cómo se optimizaron y pusieron en el DOM, el estilo básico en y cómo se configuró eso. Entonces si, si todas esas cosas puedes vivir sin, por supuesto, salta al siguiente video donde hablamos de las animaciones reales en este proyecto. Pero por lo demás quédate y te llevaré a través de todo lo que hicimos. Se puede ver que aquí tenemos un elemento principal. Y en videos anteriores te mostramos semana. Te mostré estos controles en la parte inferior, que es el, los diversos botones que tenemos aquí. También puedes ver aquí hay este elemento aparte aquí donde es justo donde estoy dando crédito a la obra de arte y de donde eso ha sido proveniente. El, el tipo de bit interesante en cuanto al proyecto en sí y a las cosas que puedes ver pasando mientras saltas por estas escenas. Todos los activos gráficos que se obtuvieron de un sitio llamado vector easy. Entonces si te diriges al vector fácil, busca algo que esté en el tipo de cosas que te interesen usar. Entonces obviamente elegí algo temático espacial, pero podrías elegir algo, bueno, lo que quieras. El elemento clave que hay que hacer, dos cosas que tener en cuenta. Necesitas la pantalla un poco más ancha. Necesitas asegurarte de que tomas editor compatible. Y luego cualquiera de estas cosas en las que luego haces clic, puedes ver que obtienes este pequeño botón de edición aquí. Por razones no entiendo cuando la pantalla es pequeña o que las capacidades se quitan. Tan necesitado que un poco más ancho, haga clic en el botón de edición. Y entonces lo que puedes hacer es que en realidad solo puedes descargar el activo directamente de este editor aquí. Eso es efectivamente lo que hice. Entonces si te imaginas he agarrado el efecto de aplicaciones SVG fácil. Y entonces lo que hice es que lo hice todo tablero. Estoy usando sketchier, pero obviamente podrías estar usando espejo falso o lo que sea tus paquetes gráficos favoritos, péguelo en cada uno de los activos que son No, era probable que necesitara y les di un título. Y luego una cosa que siempre me gusta hacer, si alguna vez voy a poner el activo SVG en la web, entonces siempre lo pasaré. Ahí hay una herramienta llamada SVG, que básicamente optimiza los archivos SVG. Y aún mejor que incómodo. Y ese tipo llamado Jake Archibald miter, una herramienta que envuelve SVG, que es una herramienta de línea de comandos, lo pone en una bonita interfaz gráfica. Entonces en este caso, conseguiría mi get my art board aquí, copiar el código SVG. Abre SVG, pega en mi marcado, y luego te da estas dos pestañas aquí, las tabletas de imagen, solo compruebas que nada ha salido mal después de que se hayan hecho las optimizaciones. Pero aquí se puede ver la diferencia en el código. Simplemente haré esta pantalla completa por un momento. Este es el código optimizado. Y entonces ese fue el original. Entonces puedes ver que está quitando muchos de los espacios en blanco, normalizando todos los números, eliminando cualquier elemento que no sea necesario. El resultado es siempre y cuando la cosa parezca que quieres que se vea. Aquí puedes ver tenemos un 64% de ahorro en el tamaño del archivo. Entonces no era masivo antes por ningún tramo, pero ha bajado un poco justo. Ya puedes copiar eso de ahí. Y este era nuestro Moss. Y entonces lo que estaba haciendo está dentro del HTML. Simplemente mueve esto por ahí. Entonces sí, dentro del HTML, todo lo que estoy haciendo es por cada uno de los activos gráficos de envolverlos en un elemento. Y acabo de pegar ese código SVG directamente dentro del elemento. Y esta clase sobre el elemento rápido es solo para que podamos poner algún CSS de posicionamiento básico en que se ha hecho para cada uno de estos elementos aquí. se puedan ver estos llamados exactamente los mismos centros comerciales de la luna de Saturno, planificación de ataques de cohetes, Eddie. Ahí vas. Ah, al otro lado de la luna, estrellas atrás tierra. Se puede apenas hacer capa, pero eso fue una especie de escape estelar si quieres, que se puede ver detrás de cada una de las escenas. Por lo que solo puedes hacer esa por ahí con estas amalgamaciones sin usarlo como elemento de fondo, lo cual verás en un minuto. Y entonces este div aquí es solo nuestro tipo inicial de texto de desplazamiento de Stowe's ask. Él es el tipo de carne y patatas de lo que estaremos lidiando cuando vengamos a animar en cosas y los estilos básicos para cuidar eso. Puedes ver aquí tenemos algunos conceptos básicos a de HTML. Y nuestro lienzo de elemento rápido es lo que estamos llamando a esta área aquí. Ahí está nuestro fondo de tiendas y cada set para darnos nuestro escape estrella. Pensé que valía la pena llamar esta línea porque posteriormente pasé por esto. Pero pensé que era lo suficientemente interesante para hablar brevemente al principio para tener las estrellas de fondo, estas cosas aquí. Tenía esos más brillantes que tú viéndolos ahí. Y lo que estaba haciendo es que los estaba pegando. Eso fue usando el elemento de fondo, pegando los estilos en la parte posterior y luego con el fin poner un lavado más oscuro sobre la parte superior y oscuro y esas estrellas hacia abajo. Estaba siendo perezoso y haciéndolo en código en lugar de solo hacerlo en el editor de gráficos. Pero mientras estaba haciendo es usar un gradiente lineal, que efectivamente no era gradiente, pero eso te permite poner una superposición semitransparente en la parte superior de una imagen con CSS. Es una especie de truco CSS. No obstante, lo que encontré cuando hice eso es que la calidad de la animación, no la calidad, que empezó a sufrir el rendimiento de la animación. Por lo que yo diría de vez en cuando son el tipo de cosas que podrías hacer una elección. No se dio cuenta por qué nuestra animación la aleja en tratar de mantener tus elementos lo más simples posible, cosas a las que estás agregando capacidad y filtros. Y CSS son menos propensos a animar Bueno cuando los cambias por la pantalla, el limpiaparabrisas, que puedes ver aquí que ahí es cuando cada CNN, puedes ver que tenemos varios tipos de transiciones. De nuevo, especie de desprendido de la pantalla estilo estufa se disuelve. Y la parte blanca es lo que usamos para hacer eso. Y es solo un solo elemento que nos estamos moviendo por la página otra vez con el y p, puede ver que había un, había una sombra de caja ahí a la 1 donde otra vez, terminé sacando eso porque realmente no sumaba mucho. Y de nuevo, es más y requiere más poder computacional. Si tienes un render, una sombra a la pantalla y tu película sobre nosotros, obviamente más intensiva para que lo haga la computadora. Todo lo demás que puedes ver se posiciona todos nuestros activos gráficos. estoy colocando dentro del lienzo. Absolutamente posición. Entonces por defecto, todos se sentarán en la parte superior izquierda de ese elemento rápido. Supongamos que las cosas están a la mitad de la izquierda para filtrar porque sentí que valía la pena. Entonces si quieres llevarte de vuelta al principio aquí, me gustó este pequeño tipo de resplandor de la luna, un lleno que fue todo un activo que quedó que en sin embargo todos estos elementos se posicionan, algunos de ellos básicos transforman en solo para colocarlos en algún lugar razonable en la página. Y luego vamos a animar de ahí a otro lugar. Vale la pena enfriarlo por si no estás consciente cuando usamos posición absoluta en NCSS, de nuevo esos elementos, para posicionarse en relación con su padre de elemento no estático más cercano. Entonces en nuestro caso, se puede ver aquí arriba todo Canvas que es el padre para todos estos activos gráficos. Nosotros hemos dado a eso una posición de relativa, lo que significa que nuestros elementos absolutamente posicionados se posicionarán en relación con eso. El otro bueno de en cuanto a animación es que no tienes que usar una transformación y no afectará a otros elementos. Normalmente, si lo estás, si eres elementos están en flujo normal de documentos y los mueves con márgenes, remates y todo ese tipo de cosas, van a interferir con cualquier otra cosa que también esté en el flujo de documentos. Entonces por lo que estamos haciendo aquí, acabo de hacer todo absolutamente posicionado para que todos puedan moverse forma independiente y no afectar a ningún otro elemento. Entonces sólo un poco más abajo en el CSS, se puede ver aquí, tenemos alguna transformación por defecto en ese tipo inicial de impuesto de Star Wars solo para renunciar a ella perspectiva retorcida. Por lo que usando algunas transformaciones, lo estaban girando y traduciéndolo. Cómic de cualquier otra palabra que rime con eso. Eso es lo que le estamos haciendo. Y entonces también hemos llegado aquí, se pueden ver los agujeros negros girando cuando entramos al agujero negro. Ya verás que cuando apagamos el agujero negro, gira alrededor. Y solo estoy usando una animación CSS aquí para hacer eso en lugar de hacerlo en JavaScript. Solo para mostrarte, puedes mezclar y emparejar estas dos cosas juntas bastante felizmente. Cuando se trata del JavaScript. Mucha de estas cosas que ya habrás visto en los videos anteriores en cuanto a la configuración básica de este archivo, estamos asignando todos nuestros botones a conciertos. Y tenemos algunos oyentes clics pasando, en el siguiente y anterior. Tenemos uno en los poros, al que llegaremos en un video posterior y, y también en el botón de agujero negro. Todos tenemos todos los elementos en la página para los activos gráficos que hemos obtenido atrapados en el DOM. Todos acaban de referenciar aquí. Y luego nos metemos en las variables que configuramos en el video anterior para nuestra funcionalidad siguiente y anterior. Por lo que podemos avanzar a través de esto, estas secuencias de animaciones en los pocos videos también. Si recuerdan, miramos a refactorizar ese código para que nuestros fotogramas clave y los tiempos de fotogramas clave estuvieran en científicos separados, variables separadas o constantes en este, en este caso. Entonces aquí hay un montón de nuestros marcos clave y no, no te preocupes por esos por ahora. Los tiempos aquí ofrecen cada una de las escenas y te explicaré por qué lo hemos hecho aquí a medida que avanzamos en el siguiente video. O animaciones para las diferentes escenas se manejan todas en esta función simple y m, que fui demasiado perezoso para escribir animación. No quería que se confundiera con animate que obviamente eran un método real para la API. Enemigos donde sucede toda la magia. Y luego aparte de eso, tenemos la función de click de dirección procesada, que hemos pasado antes. Entonces no necesitamos preocuparnos por eso. Toggle play back es lo que usamos para hacer una reproducción y pausa. Y de nuevo, llegaremos a eso en breve. Y luego voy a función agujero negro otra vez, que llegará a más adelante. En cuanto a nuestro archivo JavaScript. Sólo estamos haciendo referencia a nuestros controles. Estamos conectando los controles a funciones que vamos a volarlo para hacer lo que necesitamos que hagan. También estamos haciendo referencias a cada uno de los elementos gráficos que podríamos querer animar. Y luego principalmente, Tenemos una carga de barcos de diferentes fotogramas clave asignados a constantes. Y luego tenemos una función, función principal, que va a empezar a animar esos elementos. Y eso es a lo que finalmente llegamos ahora y vamos a ver en el siguiente video. 15. Escribir las animaciones: Asumiendo que no has comenzado en este video en particular, sabrás lo que estamos viendo en el lado izquierdo de la pantalla aquí. Se trata de un montón de diferentes animaciones de fotogramas clave. El cover off todos los posibles bits de animación serán los diferentes fotogramas clave que necesito ejecutar en varios elementos con el fin de que este conjunto de animaciones funcione. O pergamino lo suficientemente gravados son rocosos volando a través con los planetas, se mueven ligeramente. El pequeño título que se acerca, el WIP moviéndose a través. Eso. Por qué estrecharse ahí abajo que el cohete que sube y cruza Marte, moviéndose a través del rastro del cohete, impulsores, apagándose y alittle alienígena apareciendo también. Cada uno de esos está cubierto por estos diferentes conjuntos de marcos clave aquí. Por lo que he tratado de nombrarlos un tanto sensatez. Pero lo clave aquí es decir que no hay, no hay habilidad mágica que se pueda aprender a hacer esto bien. Es solo mucho tiempo, prueba y error, conseguir que las cosas funcionen de la forma en que quieres que funcionen. A lo único que no hemos mirado hasta ahora, Vale la pena llamar es como estás abajo estos fotogramas clave, verás ocasionalmente compensada aquí. Ahora, lo que hace offset es que te permite hacer el equivalente de porcentajes en animaciones CSS. Y animación CSS. Podríamos decir que no, hacemos este 50%, hacemos esto a un 100%, Hacemos esto. Eso podría igual de fácilmente ser 73, lo siento, no 730, 73%. Y en eso, obviamente eso es lo que haces en ese punto en particular ya que los fotogramas clave están pasando. Y, si son cinco segundos de duración, será en un punto en particular. Y si la animación se ejecutara durante diez segundos, estaría en 73% de diez segundos. que puedas hacer lo mismo en húmedo con la API de Web Animations usando esta palabra clave offset, puedes ver que no es una cadena, es un entero y está entre nada y uno, siendo uno una nota al 100% siendo 0%. Por lo que 0.2 está al 20%. Entonces es tan simple como eso es cuando los fotogramas clave, y crucialmente son los fotogramas clave con los que se pasa, no las opciones de tiempo. Ya verás eso salpicado por aquí dentro, pero eso es esencialmente lo que es. Aquí no hay nada que no hayas visto ya es que pasaremos por un par de ejemplos. Tan cruel ofertas de texto o el texto de Stowe. Y se puede ver aquí, Ahí es donde empezamos. Y entonces sólo estamos usando el traductor Y para sacar a Feng fuera a la distancia. La mayoría de estos sólo tienen dos fotogramas clave, es una especie de punto inicial y final. Hay unos pocos que tienen más como este que acabamos de mirar aquí por lo general, aunque se vean, pongamos un poco más de espacio aquí. A pesar de que se ven, puede parecer un poco intimidante al principio, pero no hay nada a lo que no te acostumbrarás a hacer en CSS si no hicieras animaciones CSS en absoluto. Es sólo un montón de ellos. Una vez todo el total de todo lo que pasa. De nuevo, este patrón, Se debe utilizar para corchetes para los fotogramas clave de matriz, separados por comas o un objeto cada uno. Entonces aquí vamos. Corchetes como nuestro objeto para el primer fotograma clave y como segundo fotograma clave. Y se puede ver, a pesar de que estos están escritos de manera diferente en diferentes lugares, es exactamente el mismo patrón. Ahora tú para hacer esto, has hecho un par de lecciones, Mark. Creo que ya tienes esto. Entonces en la siguiente lección, vamos a ver cómo en realidad ejecutamos estos fotogramas clave juntos y en realidad construimos las animaciones ope. 16. Secuenciación de animaciones: Último video nos estábamos metiendo en el grueso de todo el archivo principal de JavaScript que ejecuta todas estas animaciones para nuestro proyecto que estamos construyendo juntos. Miramos a través de estos fotogramas clave y podemos ver que lo son, mientras que hay muchos de ellos. Y puede parecer confuso al principio. Es el mismo patrón básico que tenemos, hemos usado un par de veces a lo largo y es esencialmente el mismo que lo que estarías haciendo con CSS. Más allá de eso, queremos mirar ahora nuestra función principal de animación. Y si recuerdas, este pequeño proyecto funciona por nosotros teniendo un simple contador que recorre las escenas que queremos ejecutar. Y sobre la base entonces de qué número en particular eran escena Ohno en la que estamos íbamos a secuenciar un montón de estas animaciones y fotogramas clave a R1. C1 es efectivamente lo que sucede aquí. El texto del Stowe se apaga. Un cohete se mueve a través, pero entra un texto y estos planetas se mueven suavemente. Lo primero que verás aquí dentro de la, la sección C1 es que en realidad estoy restableciendo sobre cosas de barco aquí. Entonces la razón que se hace aquí es porque puede que estés regresando a escena para escena uno de s2. Y si ese es el caso, necesitamos atender eso barajando todos los bits y piezas que necesitamos de vuelta en el lugar correcto. Ahora, se puede ver aquí con todos estos testamentos, estos que son restablecidos, la duración está configurada en 0, por lo que en realidad no se ve la animación sucediendo. Es solo una forma rápida de conseguir que todo vuelva donde necesita estar listo para ejecutar la animación adecuada. Esta función animada está haciendo todo lo que ya has visto muchas veces. Ahora, estamos eligiendo el elemento. Estamos ejecutando el método animate en él. Y luego lo pasamos en nuestros fotogramas clave los cuales, ya sabes, se desplazan, se desplaza, apaga el texto o se desvanecen. Entonces eso es hacer referencia a nuestros fotogramas clave aparecen. Y entonces estamos pasando nuestras opciones de animación o funciones de temporización o duraciones y cosas por el estilo. Y en este caso, todos estos dicen correr con 0 duración solo para restablecerlos de nuevo a la normalidad. Por lo que las cosas interesantes empiezan un poco más abajo aquí. Y se puede ver aquí ese cruel texto textil de Stowe. Empezamos corriendo por tres segundos. El modo de relleno es hacia adelante por lo que los estilos se conservan a medida que se apaga. Y entonces curiosamente, puedes ver aquí que lo siguiente que obtenemos, recuerda al principio cuando intentaba venderte la idea de aprender estas cosas. Algo que podrías hacer con una API de JavaScript que no puedes hacer con las animaciones CSS. Como secuenciación. Se puede ejecutar una animación de la parte posterior de otra animación. Y eso lo hacemos con la API de JavaScript Web Animations mediante la utilización de una adición bastante reciente al lenguaje, que es promesas. Y lo que hacen las promesas es que nos dejen decir terminado, que es básicamente como cuando esta cosa está terminada, entonces ve y haz esta otra cosa. Ahora en el siguiente video, voy a luchar y tratar de darte una versión de laico de cómo funcionan exactamente las promesas y por qué son tan importantes para lo que estamos haciendo aquí. Pero por ahora, solo considera algunas de las otras cosas que son posibles aquí en JavaScript que no son posibles o no tan fáciles con CSS. Se puede ver en algunas de estas animaciones que se están ejecutando en términos de la duración, podemos decir C1 duración dividida por cierta cantidad. Y eso no es sólo para ser inteligente Coyle. Es porque si decidimos cambiar la duración del C1 a diez segundos o 15 segundos, no tenemos que volver a nuestra animación y todo en tiempo real. El hecho de que todo esto esté basado en ese valor inicial significa que no tenemos que preocuparnos por ello. Se puede ver aquí que estamos diciendo cuando esta cosa está terminada, cosa la realness, cuando esta cosa está terminada, cosa de la equivocación. Y en y en él va. Y se puede ver aquí al final usamos el terminado no correr otra animación era en realidad simplemente cambiar algo en la cúpula. A pesar de que puedo apreciar si no estás acostumbrado a escribir animación a JavaScript, esto podría parecer bastante complicado, bastante intimidante libro creció el código. Tómate tu tiempo y mira a través de él y verás que en realidad es sólo un montón de cosas que ya sabes hacer. Entonces con todo lo dicho, quiero enfatizar lo importante y útil que es esta idea de encadenar las animaciones usando estas promesas que forman parte de la API de Animaciones Web. En el siguiente video, hablaremos de promesas en general y por qué eso nos resulta tan útil. 17. Llames y prometas de llama de lo básico explicador: Si estás viendo este video y sí sabes lo que promete JavaScript, o un a para ti viendo el video equivocado. Entra al siguiente. Para todos los demás. Voy a intentar de la manera más simple que pueda explicar qué promesas son en JavaScript. Ahora déjame ser claro. Esto no me va a ganar un lugar que Google, me interesa aquí, no en la precisión técnica, sino más bien sólo transmitir los fundamentos del concepto de promesas. En JavaScript. Normalmente, el analizador baja línea por línea y ejecuta cada línea de código en el archivo JavaScript. Lo que no hace por defecto es saber esperar algo. Entonces, por ejemplo, golpearía Align. Dirá, ve y tráeme este trozo de texto de internet. Normalmente no espera a que ese trozo de texto regrese antes de pasar a la siguiente línea, ni debería hacerlo, donde tendríamos algún JavaScript muy, muy lento en la naturaleza. No obstante, anteriormente, nos dimos vuelta a este tema con algo llamado callbacks. Una función de devolución de llamada es simplemente el término que usamos para describir cuando se pasa una función como argumento a una función diferente, que luego se ejecuta desde dentro de la función de autor. Y verías un patrón por el cual algo va a entrar. Están, habrá un poco de código y luego recibirías tu devolución de llamada aquí. Y esto tendría el nombre que necesite tener. Esto va a correr después de este primer bit. Por lo que podrías tener opciones en su, Angie iría, Aquí está mi cuerpo de función principal. Y haces todas las cosas que necesitabas hacer dentro de tu función ahí, usando las opciones que se habían pasado. Y luego cuando todo lo que se había hecho, harías algo así para correr. La segunda función en la que estás pasando cuando la llamas. Eso ha funcionado bastante bien. A pesar de que sí termina con código qué tipo de abrigo la pirámide de la perdición, donde se va triangular, inferior, triangular, realmente pista. Va a través de la página. Podemos hacer mejor que eso ahora con promesas en JavaScript, todos podemos identificarnos con el hecho de que hemos hecho promesas a la gente. A veces esas promesas se llenan y a veces no lo están. Y funcionan exactamente igual en JavaScript. En una promesa te permite representar algo que puede o no quedar cumplido o rechazado. Por qué eso nos interesa con una API de animaciones de JavaScript es porque una de las cosas fundamentales que hemos estado queriendo hacer con las animaciones y CSS está mal. Una animación del dorso de otra animación sin tener que hacer la gimnasia mental de averiguar los retrasos correctos para que las cosas se ejecuten en secuencia. Y usamos esto ampliamente en nuestro pequeño proyecto para hacer que una cosa suceda. Y una vez que eso se hace, otra cosa pasa y sigue y sigue y sigue. Y la sintaxis o todo lo que necesitas entender con el propósito de usar esta API de JavaScript es este punto terminado luego palabras clave, palabras clave, sintaxis. Cuando se termina una animación, tú, puedes verla si este espacio en blanco no es necesariamente, es solo la forma en que se formatea. Ejecutarías el método animate. Y luego de inmediato te vas punto terminado punto entonces. Y puedes ver aquí usamos una función de flecha para que puedas pasar algo por ahí si quieres poner típicamente no lo eres. Y luego le das una función de flecha. Y luego está el cuerpo de lo siguiente que quieres que suceda. Entonces en este caso, el texto se desplaza, eliminando un atributo en el DOM, y luego estoy ejecutando otra animación. Y entonces otra vez, tengo una promesa aquí en esta. Y cuando ese termine, hago lo siguiente. Con la API de Animaciones Web de JavaScript. No necesitas meterte en las complejidades típicamente de si una promesa está pendiente o si es rechazada. Ese es el tipo de cosas de las que te preocupas cuando estás haciendo programación real, si quieres, en lugar de simplemente mover cosas en la interfaz de usuario. Pero este concepto de promesas sigue siendo muy útil para nosotros por esta misma razón. Entonces las únicas cosas que realmente necesitas tomar de esto o aquello promete cosa increíble en JavaScript que nos permite hacer las cosas de forma asíncrona. Y la sintaxis para que hagamos eso con animaciones y para secuenciar animaciones es dot terminado dot van llaves, función flecha. Siguiente cosa que quieras hacer. Y puedes encadenar esos sobre y sobre y sobre todo lo que quieras. Ahora, otra cosa realmente grandiosa de la API de Animaciones Web es el hecho de que es muy sencillo pausar y reiniciar las animaciones. Y ya veremos cómo hacerlo en el siguiente video. Usando nuestras nuevas promesas de mejor amigo. 18. Pausar y recrear las Animaciones: Una de las grandes cosas. Otra gran cosa de la API de animaciones web es que hace que sea sencillo pausar y luego reproducir videos. Recuerda de vuelta al principio cuando hicimos nuestra página de índice, teníamos un botón que habíamos titulado inventivamente pools. Y vamos a ver eso ahora y ver cómo eso está bien abierto, Ve cómo se detiene y reproduce la animación. Entonces solo para darte una idea de lo que está pasando. Por lo que a medida que se reproduce nuestra animación, podemos hacer click en pausa. Y cuando vuelvas a hacer clic en él para dejar de que las cosas vuelvan a funcionar. Y la forma en que funciona aparece en la parte superior de todo archivo. Acabamos de agregar un oyente de eventos al botón de pausa. Y puedes ver aquí que al hacer clic en él, estamos ejecutando una función llamada toggle play back. He colapsado todas las demás funciones que no son relevantes. Y es una función bastante pequeña que estamos viendo aquí. Por lo que abajo en la parte inferior de nuestro archivo aquí puedes ver aquí está nuestra función de reproducción total. Todo lo que guardan. Hay un método que forma parte de la API de animaciones web, que se ejecuta en los documentos, y se llama Obtener animaciones. Y lo que hace es recolectar cualquier animación que se esté ejecutando en ese documento. Y entonces puedes hacer básicamente lo que quieras hacer con esas animaciones. Se pueden inspeccionar las profecías de esas animaciones y también se pueden hacer cambios en esas animaciones. Entonces en este caso, lo que estamos haciendo aquí es que te da el método de mapa de puntos, que es un método que puedes ejecutar en matrices típicamente. Pero porque hay un montón de estas animaciones que puedes mapear, que es básicamente, si no sabes qué es el mapa, es, es como correr un bucle sobre una serie de cosas. Te deja iterar sobre algo. Entonces en nuestro caso, estamos diciendo que consiga todas las animaciones y luego queremos recorrer sobre ellas. Y se puede ver aquí que he, he titulado cada una de las animaciones, he titulado inventivamente animación. Y lo que eso me deja hacer es decir, si el estado de reproducción de la animación se está ejecutando, IE hace una animación sucediendo, entonces lo que quiero hacer es pausarla. No obstante, si la animación ya está en pausa, entonces quiero reproducirla. Entonces es solo un toggle muy simple, pero está usando estos métodos que obtenemos con esta API. Entonces sólo para pasarlo una vez más, estamos diciendo, tráeme todas las animaciones, que está aquí. Y entonces debemos mapear sobre ellos para iterar sobre todas esas animaciones que encontramos en el documento. Estamos nombrando. Cada instancia de esas animaciones. Podrías llamar salchichas si quieres, o abrigo o una ventana. Realmente no importa, es solo un identificador para como iteramos sobre ellos. Y entonces digo, si esta animación en particular tiene un estado de juego de Rodin, se puede ver. Esta es una cadena y estoy usando igualdad aquí para decir que básicamente son tres signos iguales. Si estamos corriendo, pauselo. Entonces de nuevo, es este punto poros corchetes llama a esa función, la detiene. De lo contrario, si la animación en sí ya estaba en pausa, entonces queremos que se reproduzca. Y es realmente tan simple como eso. Eso te permite reunir cualquier cosa. Animaciones sabias, si fue escrito en CSS, JavaScript, y luego pausar placa. Y también hay otros métodos que tenemos disponibles como consejo de puntos, acabado de puntos. Y vamos a aprovechar la oportunidad en el siguiente video, vamos a intentar refactorizar lo que tenemos al minuto que el resultado final sea exactamente el mismo o muy cercano. Pero lo que quiero hacer es mirar lo que pasaría si refactorizamos el código que tenemos y tratamos de básico más alrededor de asignar las animaciones a variables y ejecutar esas y cuáles son las cosas con las que podríamos prescindir no nos dan cualquier economía escribiendo las cosas de una manera diferente. Entonces vamos a hacer eso en el próximo video. 19. Refactoring de nuestro código: En el último video, miramos cómo podríamos pausar y reproducir fácilmente todas las animaciones que están ocurriendo en cualquier momento en el documento. Y como consecuencia de eso, miramos métodos de la API como poros y juego de puntos. Y también mencionó que había cosas como punto amueblar y cancelar punto. Y eso me llevó a pensar, me pregunto cómo sería este archivo si lo refactorizamos, para basarlo más redondo usando o configurando las funciones con variables. Por lo que eso podría llamarse con el juego de puntos y los poros de puntos y el reverso de puntos, en lugar del tipo de forma declarativa que hemos hecho hasta ahora. Entonces vamos a comprimir el siguiente par de horas abajo en una muy rápida y timelapse, si quieres, de mí refactorizando este código. Y luego examinaremos lo que tengo dorm y veremos si hay algún beneficio al hacer eso y cuáles son las compensaciones, todo el resto. Entonces nos vemos en unos 40 segundos en tiempo real, pocas horas para mí. Tengo todas estas animaciones y probablemente va a haber más que solo necesito correr el mismo tiempo actual equivale a 0 y arriba poros para parar y así sucesivamente. Tengo más sentido si solo busco una especie de abstracto esta funcionalidad de bit hacia fuera en una función. Entonces voy a hacer reinicio de funciones y animaciones. Y eso va a tomar una serie de animaciones, animaciones para cada una. Y yo sólo voy a recorrer estos. Básicamente, nosotros Animación, digamos animación punto tiempo actual es igual a 0 y animación no. Y entonces aquí debería poder simplemente hacer animaciones VSAT. Y luego voy a pasar en este array de todas las cosas que quiero ejecutarlo en auto se pusieron en el texto off de Stowe y la planeación de tráfico de fase M en él. Porque se desvanecen y evaden. Mi panel. Intro. De acuerdo, otra cosa debería funcionar exactamente igual. Tengo que contarte de lo más aficionado al calor en dos o tres horas. Comparemos ahora los dos archivos. Entonces esto es lo que teníamos antes. Y luego lo compararemos con éste, que es el que ha sido refactorizado. La mayoría de las cosas arriba en la parte superior es exactamente lo mismo. Se puede ver mientras miramos cosas como los fotogramas clave que acabo de agregar kf en lo grande, al principio. Sólo para que no me confunda entre lo que es una función para toda la animación y lo que son solo los fotogramas clave. Nada se cambia materialmente ahí, sólo, sólo ligeramente renombrado. Donde se pone un poco diferente es una vez que se pasa el, las duraciones de tiempo aquí, se puede ver, bueno en realidad me voy a saltar más allá de esto un minuto. Si se llega a nuestra función de animación principal funcional anime ahora, se ve bastante diferente en comparación con nuestra función principal como lo era antes. Se puede ver que antes de eso estábamos restableciendo cosas como esta. Y luego describimos a cada uno ahí mismo en la función. Y luego pasaremos a usar nuestras promesas para secuenciar la siguiente animación que se ve ligeramente diferente. Ahora, qué, lo que hemos hecho está tomado, tomado algo como limpiaparabrisas animar eso. Y lo he envuelto en algo como esto. Entonces este bit aquí es esencialmente lo que estás obteniendo. El. Y entonces lo que estoy haciendo es que lo estoy asignando con un nombre para que pueda llamar con el juego de puntos o pueda detenerlo con poros de puntos. Por lo que más adelante abajo se puede ver que la función de animación real sí misma es mucho más concisa porque solo estamos haciendo cosas como esa cosa juegan cuando no se termina nada. Animación Roma que animación Rona y luego ejecutar esa animación. Y aunque eso es bonito y compacto, en realidad he encontrado eso más difícil de razonar y pensar. Obtiene esencialmente el mismo resultado. Quedan unos pedacitos y piezas aquí donde yo, no creo que funcione del todo igual de bien, pero fue suficiente de un refactor para hacerme darme cuenta de que en realidad lo prefiero de la manera original. Lo que es importante aquí sin embargo, es que ilustra que hay una serie de formas en que puedes escribir estas cosas para obtener resultados muy similares. Realmente solo depende de tu caso de uso y de tus preferencias. Pero puedes ver aquí cosas divertidas aquí que tú, que no hemos mirado antes. Hay formas de revertir una animación donde puedes usar el reverso de puntos, pero eso siempre invierte la dirección en la que solo está corriendo. tanto que una velocidad de reproducción de uno siempre es hacia delante y una tasa de reproducción de, de minús1, que hemos conseguido algunos lugares aquí, siempre es inversa. Entonces tengo eso de vez en cuando. Cancelar, donde tenemos este método de cancelación de puntos. De lo que es el método de cancelación de puntos las puertas básicamente termina esa animación y caminar. Es, está muerto. No queda nada de esa cosa de ahí. Acabado de puntos, empuja y animación hacia su punto final, impulsa inmediatamente la animación hacia adelante hasta su punto final. Por lo que se puede ver que algo así como una escena tres, muy, muy compacta de esta manera. Y nosotros usando esa función de animaciones recientes para simplemente recorrer cualquier cosa que queramos volver al principio. Entonces si comparas viendo tres, así es como lo teníamos antes. Eso. Entonces aquí está. En su totalidad, totalidad, en total. Esta forma de hacerlo. No obstante, mientras esto se ve compacto, una vez que se tiene en cuenta el hecho de que hay que reescribir todos estos, todos los bits de piezas aparecen y asignarlos a constantes o variables. El tamaño total del archivo real del refactorizado es de alrededor de 565 líneas. Y el original venía en alrededor de 459. Por lo que en realidad es más largo de algunas maneras, pero puede ser mejor que vaya a dejar esto en los archivos para que tengas un vistazo a mi preferencia, la forma en que lo hemos hecho originalmente. Pero de esta manera es igualmente válida si esa es tu preferencia. Ahora hemos estado en esa pequeña excursión de refactorización. Vamos a volver atrás y usar el código original, el código que miramos todo el tiempo. Y lo que vamos a hacer a continuación es mirar cómo se puede inspeccionar una transformación, algo que solía tener que usar algo llamado la matriz para sacar los valores de una transformación CSS. Y hay algo que podemos hacer ahora con la API que nos permite recoger cosas en otro lugar de la página ya se transforman y moverlas a un nuevo lugar. Entonces vamos a ver eso en el siguiente video. 20. No más Matriz: No más matriz. Ahora, eso no quiere decir que no puedas seguir viendo películas de Keanu Reeves, posiblemente sobrevaloradas, de los años noventa. No obstante, lo que podemos hacer es dejar de usar la matriz CSS para intentar averiguar qué está pasando con la transformación. Si no tienes idea de lo que estoy hablando, Considera la situación existente con animaciones CSS donde pondrás una transformación a un elemento y en base a su posición actual, quieres leer eso con JavaScript, obtén las coordenadas de dónde está en este momento y moverlo o cambiarlo de alguna manera. Con JavaScript. Históricamente, hemos tenido que usar la propiedad matricial. Ahora la propiedad matricial es lo que el navegador compone todas las diferentes transformaciones que puede haber puesto en un elemento en una sintaxis temible. Por lo que hay un vehículo de herramientas, es enojado tools.com, CSS, generador de guiones slash transform. Y esto nos deja ir bonita, sencilla interfaz de usuario. Simplemente puedes agregar un poco de en algunas transformaciones diferentes en un elemento aquí. Y ahora lo que es importante señalar es lo que se genera. Aquí abajo. Puedes ignorar los prefijos de proveedor utilizados para mirar esta línea superior aquí. Este es el valor de matriz ahí es el resultado de todas estas otras transformaciones separadas. Y es una forma sucinta de que el navegador comunique exactamente cómo funciona cosa que mirar. No obstante, cuando se llega a leer eso en JavaScript, es muy difícil tratar de averiguar qué bits la rotación, qué bits la, la transformación x, que bits la escala. La buena noticia es que, con la API de animaciones web, puedes simplificar ese tipo de proceso de ganancias con solo usar Get Computed Style. Puedes pasar la lección a la API de animaciones web y utilizarla como punto de partida para otra animación. Vamos a usar eso cuando veamos cómo hacemos que funcionen todos los agujeros negros. Cuando haces eso en el siguiente video. 21. Nuevas animaciones en medio de la transformación: Esto es potencialmente entrar un poco en las malas hierbas, pero quería mostrarte el tipo de cosas que es posible cuando animas con JavaScript en lugar de animar con CSS, si eso es a lo que estás acostumbrado. Por lo que dentro de nuestro pequeño proyecto de animación, puedes ver que cuando hacemos click al lado desde el frente, pagamos cada uno, este botón de agujero negro se ilumina para que lo utilicemos. Ahora solo volveré a refrescar esto. Te mostraré lo que pasa cuando presionemos eso. Por lo que el jabón ligero agujero negro, hago clic agujero negro, aparece un agujero negro y chupa muchos de los elementos que están en la página en él. Ahora bien, cómo se logra eso es lo siguiente. Hemos conectado nuestro botón de agujero negro para crear la función de agujero negro, que es lo que vamos a ver ahora. Por lo tanto, anote el fondo del archivo del proyecto, el último archivo del proyecto. Aquí se puede ver, esta función de agujero negro de caja. Ahora, solo voy a pasar por el tipo de las piezas de configuración de esta función primero. A pesar de que en realidad no tienen que ver con la API de Animaciones Web, solo para que entiendas lo que está pasando. En primer lugar, sólo estamos diciendo que tenemos un booleano el cual sentamos agujero negro activo, que está configurado para ser cierto cuando se activa el agujero negro. Si eso ya está activado, no queremos volver a iniciarlo. Entonces si los agujeros negros ya entran, o el índice actual e no dejaría de ver uno, entonces básicamente estamos regresando la función estamos haciendo un retorno temprano ahí. Entonces lo que estamos haciendo es por todas estas otras cajas, para el siguiente, previo y pausa. Si los agujeros negros corriendo, queremos hacer una pausa. Había justo para que algunos se convirtieran en un lío algo para arriba y detener las animaciones se reunieron fluir, algo así. Entonces lo que estamos haciendo es que estamos consiguiendo el área de lona ya sea por el tipo de área de escena. Y estamos consiguiendo la caja del rectángulo del cliente. Por lo que nos da toda la información de geometría que podríamos necesitar. Tenemos entonces un flotador aleatorio de función, que si le alimentas un mínimo y un máximo, te va a devolver una figura aleatoria entre esos dos puntos. Las coordenadas aleatorias son solo otra pequeña función que nos permite generar un valor X y un valor Y basado en nuestro tamaño de lienzo. Tenemos entonces esta cosa llamada artículos aplicables. Y esto es sólo una matriz que he agregado en cualquiera de los elementos que estoy feliz de que me succionen en el agujero negro. Entonces eso significa que quería que el Rocky siguiera adelante y no me succionaran al agujero negro. Entonces al hacer esto, significa que tengo algún control sobre lo que sí se mete en. Entonces conseguimos una pequeña función que solo comprueba para ver si el elemento que actualmente se está animando como parte de esa lista o no. Y entonces lo que estamos haciendo es crear un div y anexar al DOM con una clase de lienzo agujero negro. Y ahí abajo en el CSS, puedes ver aquí que acabamos de tener algunos estilos básicos para esta cosa. Tiene 50 pixeles por 50 pixeles de ancho. Tenemos este JPEG agujero negro, y solo estamos ejecutando una animación CSS estándar en eso. Y se puede ver que eso es, eso es lo que nos da este tipo de agujero negro giratorio, especie de OK. Entonces de vuelta en nuestro JavaScript, esa cosa se agrega al dom. Entonces posicionamos nuestro DOM en base a las coordenadas que o generadas aleatoriamente por esta función. Y el menos 25 es sólo porque el propio Baco tiene 50 píxeles de tamaño. Por lo que queremos que el centro de eso esté fuera de eso en ambos ejes. Ahora estamos en el bit donde realmente estamos usando la API de Animaciones. Entonces recuerda en el video anterior, cuando miramos pausa y reproducción, usamos este document.write animaciones, dot map para recorrer annette cualquier animaciones que se estén ejecutando actualmente. Entonces, en primer lugar, estoy comprobando que si una de las animaciones que la arruinan es parte de la lista de cosas. Yo estoy feliz de hacer algo con este poco, si solo son cheques eso, entonces estamos en conseguir los elementos mismos. Entonces cuando recorremos las animaciones con esa API get Animations, podemos sacar información de ahí también. Entonces estoy obteniendo el elemento toggle aquí del elemento que se está animando. Y luego a su vez, y estoy haciendo cosas o consiguiendo la geometría de ese artículo, me queda su posición a la izquierda, su posición superior. Y luego estableciendo algunas coordenadas nuevas, que son las nuevas coordenadas aleatorias menos la coordenada existente, tal tipo de la distancia que necesitamos mover. Y luego para cada elemento, cada elemento objetivo. Para que puedas volver a ver, estoy adivinando que esa es la animación. Y luego subiré y encontraré al objetivo. Entonces I0 el elemento en el que se está ejecutando la animación. Y luego estoy ejecutando una nueva animación que utiliza Estoy pasando en esta ventana get computed style Anan element transform. Y eso es básicamente cuando miramos en el video anterior sobre la matriz. Y en el pasado, tendrías que leer ese valor en y tratar determinar qué transformaciones se están aplicando actualmente a un elemento. Podríamos hacer mejor que eso con esta API porque solo podemos decir, Ve y encuéntrame este elemento en la página y usa su transformación actual dentro del fotograma clave que luego se mueve. Por lo que puedes ver aquí, la primera sección de este fotograma clave es básicamente decir, empieza desde donde estás al minuto. Y luego estamos traduciendo el elemento a sus nuevas coordenadas y reduciéndolo. Entonces estas dos partes del fotograma clave que estamos haciendo aquí. Entonces aquí está nuestro nuevo marco clave. Partimos de donde está y luego lo estamos traduciendo de ahí a algunas nuevas coordenadas. Y donde terminamos con el elemento con una opacidad de 0. Por lo que básicamente es agarrarlo, moverlo a donde necesita ir y encogerlo hacia abajo. Por lo que da el tipo de apariencia de ser chupado en un agujero negro, o al menos eso es lo que iba a buscar. Y esto sucede a lo largo de una 2.5ª y obviamente eso podría ser lo que quisieras que fuera. Entonces eso es lo que estamos tratando, esa función de agujero negro. Nuevamente, solo veamos cómo se ve eso. Ahora lo has tenido explicado al agujero negro aparece, todo se empapa y la animación CSS sigue corriendo girando agujero negro. De acuerdo, siguiente video, sólo vamos a cubrir y hablar unos pedacitos y piezas que realmente no hemos cubierto en detalle hasta ahora. Antes de llegar al final de nuestro tiempo juntos. 22. Comprometer en el DOM: Una última pepita que te puede resultar útil cuando estás usando esta API. Existe un método llamado estilos commit. Y lo que te permite hacer es cuando una animación llega a su fin, aplica los efectos de esa animación como estilos en línea en el elemento. Entonces sólo voy a mostrarles el efecto de eso. Ahora, estamos usando la función de agujero negro aquí que miramos en el video anterior. Y todo lo que voy a hacer ya que bucles sobre cada uno de nuestros elementos que están animados. Sólo me voy a quedar aquí en el fondo. Después de que este elemento haya animado, voy a decir animación. Uops, estilos de animation.com. Y así cada vez que recorre una de estas cosas, lo que espero que suceda es que voy a ver es estilos en línea el resultado final de todas esas animaciones. Entonces vamos a guardar eso y echar un vistazo a lo que sucede aquí. Entonces Vamos a poner las cosas en movimiento aquí. Y luego presionaremos el agujero negro. Y luego echemos un vistazo hacia abajo. Y puedes ver aquí que el método commit styles ha aplicado el lugar de descanso final, si quieres, los resultados de todo lo que está pasando en la animación. Ahora bien, no he usado tanto en absoluto. Lo que hemos construido aquí juntos, pero puede que te resulte muy útil en lo que usarías para construir. Entonces eso es solo un breve informe sobre ese método y para qué podrías usarlo. 23. Conclusión: Aquí vamos, amigo mío. Al final. Ojalá, si lo sigues a lo largo de todo este curso, ahora tendrás una mejor comprensión de cómo puedes animar las cosas en la web con la API de JavaScript Web Animations. Sólo recuerda, hemos pasado de no tener animaciones en JavaScript a escribir algunas animaciones simples, unas que normalmente haríamos en CSS. Para entonces un proyecto donde tenemos toda una serie de animaciones secuenciadas una tras otra. Hemos tocado cosas como recoger transformaciones de un lugar en el DOM, movernos en ellos a otro lado. Aprender a pausar y reproducir animaciones, a asesorarlas, moverlas justo al final. Si has logrado seguir adelante y construir algo propio o incluso este producto en sí. Conforme hemos pasado por estos videos, debes sentirte muy orgulloso de ti mismo cuando pruebes por primera vez. Si te encuentras tropezando, remontada, dame un refresco. Es como cualquier otra cosa en la web. Sólo te vas a poner bien en ello practicándolo y usándolo en la naturaleza. Nadie escoge este defecto de inmediato. Este es el primer video, por supuesto, que han hecho. Por lo que sería realmente útil tener tus comentarios Bueno, incluso malo. Entonces por favor encuéntrame en Twitter en Ben deshilachado. O puede enviarme un correo electrónico a contacto en Ben frame.com. Y me encantaría escuchar tus pensamientos. De lo contrario, te volveré a ver la próxima vez.