Padrino de Lottiefiles

1. Introduccion: Hola y bienvenidos al curso. En este curso, vas a aprender muchas técnicas nuevas, y es muy recomendable que veas las clases anteriores antes de continuar porque estaremos cubriendo muchas nuevas técnicas avanzadas que te harán encabezar el 1% de nuevas técnicas avanzadas que creadores de Lottie ¿Bien? Y como saben, soy Bolt Bite, y he sido certificado creador de LatiflesSurnament por el torneo LatifilsOficial Discord, y Y tengo múltiples insignias que me son dadas por LottieFiles ellos mismos en mi contra y he estado creando animaciones de Lottie durante los últimos cinco años, y estaré compartiendo en estos cursos ese momento donde hubo una falla en un archivo, lo que no sucedió en 100 proyectos, pero sucedió en mi contra y he estado creando animaciones de Lottie durante los últimos cinco años, y estaré compartiendo en estos cursos ese momento donde hubo una falla en un archivo, lo que no sucedió en 100 proyectos, pero sucedió una vez. Entonces este curso está repleto de toneladas de nuevas técnicas, cómo creé múltiples animaciones de personajes complicadas para múltiples proyectos. Vamos a aprender cómo y qué es la pantalla de bienvenida animada y ¿cómo se puede crear una para múltiples aplicaciones móviles? Y también vamos a ver algunos de los proyectos muy complicados que he creado para los clientes para que estés listo para seguir adelante y convertirte el creador de una persona superior en IltiflePlatform Así que vamos a seguir adelante y meternos en ello. 2. 01.¿Qué es la pantalla de salpicadura?: En esta clase, vamos a aprender qué es una Pantalla Splash. Así que vamos a seguir adelante y vamos a averiguar qué es Splash Screen. Entonces, ¿qué es Splash Screen Android? Acabo de agregar Android porque quería mostrarte algunas cosas. En primer lugar, sigamos adelante y hagamos clic en el primer desarrollador de Android oficial Link by Android Development. Entonces verás aquí que hay algunas notas. No voy a entrar en los detalles técnicos porque entonces el curso será demasiado largo. Entonces básicamente, puedes leer todos los datos aquí, y voy a estar básicamente compartiendo mi experiencia porque para el momento de esta grabación, he creado 100 plus para ser exactos 137 pantallas de presentación animadas para aplicaciones móviles. Así que vamos a seguir adelante y echar un vistazo a lo que es una Pantalla de Splash. Verás que aquí está pasando una ligera animación. Ahora, eso es una Pantalla Splash. Algo que aparece cuando abres una app en un teléfono, ya sea IOS o Android, luego hay una breve animación, que básicamente es una especie de animación de logotipo, y puedes usar la misma animación que animación de logo ya que Valvo lo discutirá ahora en detalle, y puedes crear estas animaciones con el logo del cliente o logo tipográfico que te proporcionan y puedes proporcionar algunos servicios realmente buenos en esta categoría porque aquí hay mucho potencial, y ahora todo el mundo está tratando de construir, ya sabes, aplicaciones de movimiento primero, y se ha vuelto muy común que la gente lo use. Así que vamos a aprender que lo que es necesario para crear Lottie animó una Pantalla de Splash Entonces, antes que nada, la animación debe tener 2.5 segundos de duración, o puede llegar hasta 3 segundos. Ahora bien, estos son los nodos, en realidad, y es muy recomendable que la animación esté alrededor de 2.5 segundos. Pero ha habido momentos en los que el desarrollador me ha solicitado una animación que fue de más de 5 segundos. Entonces también hay algunas excepciones. Puede que no haya eso escrito aquí, pero el desarrollador en realidad también puede hacerlo. Entonces, si un cliente te lo solicita, entonces definitivamente también puedes crear animaciones más largas porque incrustar la animación dentro la aplicación es el dolor de cabeza del desarrollador Tu trabajo es crear algo que realmente funcione. Eso es. Y hemos cubierto muchas técnicas en clases anteriores, y ya lo sabes todo, y este es un curso de creador del 1% superior. Entonces es por eso que no vamos a entrar en detalles que qué características son compatibles y no porque esas ya se expliquen en las clases anteriores. Entonces, sigamos adelante y veamos y déjame mostrarte cómo creé una Pantalla de Splash animada. Entonces, antes que nada, sólo puedo previsualizar algunos de mis trabajos. Entonces aquí está y animación que creé para nuestro cliente. Esto es sólo un caso de estudio. Es muy recomendable que también pase por estos procesos cuando esté trabajando en un proyecto cliente. Y se puede ver que la animación está aquí. Ahora bien, esto es lo que creé para la animación final para la Pantalla de Splash animada. Aquí hay otro proyecto donde creé esta Pantalla de Splash animada. Hemos cubierto la animación de iconos en detalle en clases anteriores, así que no vamos a entrar en muchos detalles ahí porque son cosas realmente simples. Y luego hay simulacros de animaciones, obviamente, solo para mostrar a los nuevos clientes que cómo se vería más probable su animación. Bien. Y luego está este lado estatal también donde creé la animación de abordaje. hemos cubierto la animación de personajes en la clase intermedia, así que puedes comprobarlo y sí, eso es básicamente todo. Ahí está la pantalla animada Displash. Y se puede ver que hay dos variantes que he creado, una para su página web y otra para su aplicación móvil. Entonces esto también puede suceder, dependiendo de tu caso. Hay que crear dos palabras y a veces. Así que vamos a echar un vistazo a cómo creo estas animaciones. Yo sólo voy a seguir adelante y abrir mi expediente. Bien, entonces hemos abierto el archivo. Ahora déjame mostrarte algo realmente importante aquí, que es, en la mayoría de los casos escenarios, vas a estar creando la animación en un lienzo cuadrado. Ahora bien, ese no es el caso en este expediente, pero déjeme mostrarle otro archivo para darle otro ejemplo. Ahora bien, este es un estudio de caso realmente agradable. Entonces, repasemos primero éste. Bien, entonces esta es nuestra animación cuadrada, ¿de acuerdo? Y básicamente lo que realmente va a suceder es que esto es muy importante tener en cuenta que el cliente también puede usar esta animación como animación de logotipo. Así que solo puedes proporcionarles un formato MP cuatro también de estos archivos y puedes graficarlos extra que estás creando una Pantalla de Splash más una animación de logotipo, y puedes modificar la animación si es necesario Y eso es básicamente todo. Por ejemplo, puedes crear un logotipo. Por ejemplo, si el logo era, por ejemplo, esta caja, puedes crear la Pantalla de Splash animada a partir de esta y puedes hacer la animación del logo de este logo, derecho, ese logo tipográfico Así que vamos a pasar por ahí y podemos echar un vistazo a cómo y cuál es el proceso de pensamiento por el que paso al crear estas animaciones. Ahora bien, esto es puramente cursos y clases de animación UI, así que no vamos a entrar en los detalles de los principios de la animación. Si realmente quieres que haga eso o cree una clase separada sobre eso, entonces házmelo saber. Pero esa es una discusión separada. O por separado. Entonces aquí está esta caja y es capa SVG. Y luego después de eso, en este punto, la capa básicamente se rompe. Entonces esta capa corta justo en este punto, ¿verdad? Y luego después de eso, tenemos estas cuatro piezas dispersas. Ahora bien, estas son solo máscaras agregadas en cuatro partes. Hay opacidad pasando, como pueden ver, desvaneciéndose, Y luego básicamente, solo hay un marco clave de posición también. Aparte de eso, para darle más impacto a la animación, lo que he hecho extra es que he añadido un poco de piezas de apenas formas rectangulares o triangulares las cuales están dando la sensación de confeti Y aparte de eso, solo está esta animación de splash, que es solo líneas animando con trazado de recorte Cosas bastante simples, nada demasiado complicado pasando. Ahora, centrándonos en el personaje o lo siento, la animación de escritura, lo que tenemos aquí. Ahora solo echemos un vistazo a eso también. Entonces tenemos esta animación de efecto de escritura por aquí. Y verás que están pasando algunos arcos, animaciones de arco, que son solo el movimiento secundario, que se agrega más tarde en realidad Entonces primero, solo tienes que hacer el efecto de animación de escritura. Y luego después de eso, solo hay que dibujar algunos básicos, solo adelante. No tienes que diseñar estas cosas en Illustrator. Simplemente puede elegir su herramienta de pluma, simplemente dibuje un trazado simple y luego agregue trazados de recorte encima de ella. Y eso es más o menos todo. Y luego también puedes agregar rutas de recorte encima de esas Y si notas que hay este efecto de escritura verde también pasando detrás de nuestra animación. Entonces, ¿qué es esto? Primero, permítanme bloquear estas capas para que podamos enfocarnos en esto. Entonces tenemos nuestra capa por aquí, y esta es nuestra animación en color púrpura, como puedes ver. Entonces básicamente, lo que he hecho es básicamente crear primero toda la animación y luego crear una copia duplicada de esa, ¿de acuerdo? Y la copia duplicada de eso es en realidad la verás aquí. Que toda la copia duplicada en realidad está abajo con la sensación verde, en realidad. Déjame seguir adelante y hacer clic en otra capa para que te pueda mostrar. Déjame solo. ¿Ves? Entonces básicamente, creé toda la animación, primero, duplique eso y solo traería vuelta toda la animación. Un marco, eso es todo. Entonces solo cambio su color al verde, y ahora le da este efecto de escritura creativa y ha agregado mucha más personalidad debido a esa animación de color de relleno verde detrás de ella. Y eso es básicamente todo. Toda la animación está terminada, y ahora sigamos adelante, verás que la animación es de 4 segundos aquí, y la composición es cuadrada. Ahora bien, ¿cuál es la ventaja de crear la animación en un cuadrado? En primer lugar, si la animación se crea en un cuadrado, lo que puedes hacer es la mayoría de las veces los desarrolladores me piden que necesiten danimation en un cuadrado, y la animación debe tener espacio negativo Entonces la animación debería ser digamos 500 por 500 Pixel cuadrado, debería haber un píxel cuadrado, y la animación debería estar dentro de eso, para que haya mucho espacio negativo. Y a veces el cliente solicita que necesite la opción vertical, y este es el formato vertical estándar para carretes y solicitan dinamización en ese tamaño Entonces lo que básicamente puedes hacer es que el dragón lo deje caer aquí. Vamos a seguir adelante y jugarlo. Se puede ver que la animación encaja muy bien. Ahora bien, si tienes que reorganizarlo, lo que puedes hacer es básicamente una gota de dragón así, ¿verdad Así que puedes reorganizarlo realmente, muy bien. Si también tienes algún otro problema, solo puedes precontar todo el asunto, o ya está pre contado como aquí. Simplemente puedes crear otra composición de tamaño cuadrado y simplemente puedes moverla. Alinea como quieras, dependiendo de tu tamaño, y también puedes escalarlo también, porque es vector, por lo que no va a afectar ninguna diferencia en la calidad. Y si también lo van a usar como MP para animación, entonces lo que puedes hacer es básicamente, digamos que también lo van a agregar en YouTube. Simplemente puedes crear la versión FHD y luego básicamente arrastrar el cuadrado por aquí Entonces eso es todo. Simplemente puedes renderizar esto. También puedes escalarlo. Si quieres. Puedes habilitar la estrella para que la animación se mantenga crujiente También puedes proporcionar el formato cuatro K, doblarlo y también puedes enviarlo eso. Así que ahora solo sigamos adelante y echemos un vistazo a otra Splash Screen animada, cual creé un concepto muy similar, pero solo para mostrarte cómo puedes agregar tanta personalidad porque aunque no tengas múltiples efectos pasando, aún puedes agregar mucha personalidad tu animación tal como te mostré en el proyecto anterior y ahora en este uno. Básicamente, está esta animación, y verás que hay mucho squash y estiramiento y anticipación en nuestro personaje principal héroe También hay seguimiento en el resto de la animación porque esta está creando tanto impacto, y está afectando a la animación porque esta está creando tanto impacto, los demás para salir de ahí. Y luego está squash y stretch, que es otro principio de animación, y luego solo hay movimiento secundario. Entonces el movimiento secundario en realidad se agrega al final, como pueden ver aquí así como yo les mostré, que la esta es en realidad la revisión o llamada versión básicamente revisada del concepto o agregó algunos detalles adicionales. Para que puedas ver estos también se pueden agregar más tarde. Sólo hay que trazar algunas líneas, y eso es todo. Y también depende del tipo de sentimiento de la marca y también del público objetivo qué tipo de sentimiento estás tratando lograr en la animación. Así que hay que tener esas cosas en mente también. Bien, cosas muy simples. No pasa nada demasiado complicado que deba explicar aquí. Así que pasemos al siguiente, que está bien, entonces este es básicamente lo mismo que Splash Screen animado. Un concepto muy sencillo. Puedes ver que estamos simplemente cambiando el color de la capa por aquí, y luego solo hay alguna animación de escala pasando con solo un poco de desplazamiento a las capas. Eso es básicamente todo. Cosas muy sencillas. Esto es muy importante para mostrarle a KSU que la mayor parte del tiempo, lo que realmente sucede es que el cliente también puede solicitar la versión oscura y clara de la aplicación, dependiendo del tema del dispositivo móvil del usuario, tal vez, o tal vez puedan usted puede entrar en la configuración de la aplicación y también cambiar el modo oscuro o claro de la aplicación Entonces esta es la versión oscura, ¿verdad? Y entonces tenemos la misma animación. Básicamente solo puedes ver que la animación es la misma, solo tenemos diferentes colores. Ahora bien, esto es muy importante que dupliques o copies y pegues el archivo. Una vez aprobado este concepto, se aprueba la animación, todo, solo hay que duplicar el archivo y luego simplemente cambiar los colores. Ahora bien, por qué recomiendo hacer esto es realmente un concepto básico, que es porque aquí hemos creado toda la animación. Digamos que el cliente también solicitó esto en cuatro K en dos k en vertical también, en formato cuadrado también, y también en el formato horizontal, completo en realidad también, w Entonces lo que puedes hacer básicamente es algo realmente simple, que es simplemente crear la animación. Y si el cliente solicita algunos cambios, solo tienes que hacer esos cambios aquí. Debido a que esta es una pre comp agregada a estas coms, esos cambios se agregarán aquí automáticamente Así que esto te ahorrará mucho tiempo. Y una vez hecho todo esto, que has creado una versión para múltiples coms Si duplica ese archivo, estas coms ya se habrían creado en la otra versión Entonces solo tendrás que volver a entrar en una comp y luego simplemente cambiar los colores, y toda la versión light también estaría lista. Entonces estos son solo algunos consejos que te ahorrarán mucho tiempo. Hay una cosa clave muy importante para recordar, que es que un cliente también puede solicitar algunas veces el formato AVD también, pero esto me ha pasado solo dos veces cuando creé 100 pantallas de splash animadas El cliente realmente trabaja con el archivo JSON, pero solo dos veces el desarrollador solicitó esta versión también. Entonces por si acaso un desarrollador te pide que no entres en pánico solo esta opción y envíales esta versión a ellos. Bien, cosas muy simples, nada demasiado complicado. Entonces eso es básicamente todo. Y espero que aprendas algo nuevo en esta clase. Nos vemos en la siguiente. 3. 02.Animations de mascotas.: Y bien, entonces en esta clase, vamos a discutir cómo crear Animaciones de Mascota para los proyectos de tus clientes Ahora bien, si sabes que Duolingo es un ejemplo muy famoso, y si eres diseñador de movimiento UI, ya debes conocer Duolingo Así que vamos a entrar en algunos ejemplos de cómo los creé. Bien, así que vamos a seguir adelante y revisar un proyecto que hice para los padres de Maro, que es una aplicación IOS, y ya está en vivo Entonces déjame mostrarte primero las animaciones, y luego veremos el estudio de caso. Entonces estas son múltiples expresiones del mismo carácter. Ahora, fue realmente desafiante porque el personaje no tiene boca, no tiene nariz, no tiene cejas, por lo que hay mucho minimalismo en el personaje Entonces esto es básicamente para niños con problemas de salud mental. Entonces estas son múltiples poses de la animación. Bien. Bien, entonces entremos al archivo y echemos un vistazo a la animación. Así que vamos a seguir adelante y abrir nuestro primero. Sólo voy a recortar este para que podamos enfocarnos en nuestra animación. Bien. Entonces vamos a ver cómo se crean estos. Entonces estas son básicamente capas de forma. Los diseños de personajes se hicieron en Illustrator, y puedes ver, esto es solo sobre tus habilidades como animador porque no está pasando nada demasiado complicado y tienes que trabajar con lo que te dan para trabajar Y eso es básicamente todo. No hay demasiados detalles ni demasiado trabajo en la animación. Estas son solo capas simples que solo se están animando, y eso es todo. ¿Bien? Y déjame cerrar el fondo. Y verás que el alumno está aquí. Déjame que lo desacelere. Bien. Y se puede ver que solo está esta alumna, que básicamente está criada al ojo derecho, que básicamente se está animando Y luego después de eso, tenemos este ojo realmente simple Blink, que se ha hecho en las pupilas Bien. Animación muy sencilla realizada aquí. hemos hablado de parpadeos oculares antes en las clases anteriores, para que puedas revisarlos si te enfrentas a alguna Al seguir adelante, tenemos esto un poco desenfocado. Los ojos se mueven, por lo que solo los alumnos se están animando. Y luego está éste que no está enfocado. Y el equipo de diseño en realidad no había decidido que si agregarían todo el cuerpo o si lo recortarían hasta la cabeza, es por eso que no hay mucha animación pasando en las piernas o en las manos. Y porque los niños también enfrentaban problemas de salud mental y tenían una edad bastante temprana, así que simplemente no queríamos que creara mucha distracción Con estas animaciones. Estos son sólo para mostrarles cómo se sienten hoy en día. Bien, entonces echemos un vistazo a la animación de saltos. Así que vamos a sumergirnos un poco en ello. Así que este es nuestro cuerpo, ¿de acuerdo? Y esto se está animando. Bastante simple. Bien. Entonces hay transformación de escalado, ¿verdad? Ahora bien, la razón por la que he animado esta transformación dentro de un grupo es porque otras capas están realmente parentadas a esta Entonces es por eso que si animo una escala, todo lo demás también se animará también Pero no quiero que otras escalas animen. Yo solo quería demostrar que el cuerpo tiene movimiento, no todo para aplastar y estirar. Así que cosas bastante simples. Bien. Y luego hay curva en las piernas. Ahora bien, cómo se crea esto, echemos un vistazo a eso. Bien, entonces en este punto, verás que la pierna básicamente está doblada sobre una capa separada. ¿Bien? Entonces esta capa de aquí mismo. Y luego una vez que tenemos el corte, tenemos otra capa de piernas recortando hacia abajo, comenzando desde el mismo fotograma clave, pero porque tenía que ser parentado, porque si lo padre aquí mismo, entonces el cuerpo no puede moverse hacia abajo porque todo está aparentado al centro de gravedad, y es por eso que tenemos que tener esto ¿Bien? Entonces este es nuestro control sobre aquí. Se puede ver que podemos mover toda la animación alrededor con esto, creo. Sí, también se puede mover todo. Por lo que toda la animación del personaje no se rompe. Así que cosas bastante simples, nada demasiado complicado pasando por aquí, y luego solo hay rotación en los brazos. Ahora, porque los brazos ya estaban un poco curvados, así que en realidad no tuvimos que agregar mucho movimiento, como dije, no queríamos crear muchas distracciones para los niños Así que animación bastante simple, nada demasiado complicado pasando por aquí también. Y después de eso, tenemos el de la cerveza. Entonces la cerveza es básicamente algunas capas con opacidad. Con diferentes opacidades, y eso es básicamente todo. Sin embargo, el diseñador hizo un gran trabajo, y puedes ver que me hizo muy fácil mi trabajo porque si el diseño es realmente genial, puedes crear animaciones muy bonitas a partir de él. Pero si el diseño no es realmente genial, realidad no se puede hacer algo genial con un mal diseño. Así que tu enfoque también debería estar en el diseño y cómo puedes obtener la mayor parte del valor de ese diseño. Entonces eso es todo, la mayor parte, creo, y vamos a seguir adelante y echar un vistazo a otras animaciones. Entonces esta está disgustada. No quería cambiar el hielo a los trazos porque quería mantenerlo constreñido igual. Entonces agregué capas adicionales en los lados, que básicamente son solo espirales que se animan Cosas bastante simples. No pasa nada demasiado complicado, ¿verdad? Ahora se siente como que el chico está, ya sabes, sintiéndose asqueado o algo así pensando en vomitar Entonces por eso se está tapando la boca. Entonces básicamente porque ahora podrías decir que no hay capa bucal, pero puedes notar que este tipo de detalles son muy autoexplicativos, ¿verdad? Entonces es básicamente lógica homo y nada más está pasando por aquí, cosas bastante simples. Y en el temeroso, lo que tengo por aquí es básicamente solo las gotas que están precomped y luego solo para bligated. Eso es. Y entonces tenemos el por ejemplo, si tienes que crear algunas cosas como esta, cómo puedes animarlo es realmente, muy sencillo Déjame contarte sobre eso también. Entonces digamos que estas son las piernas y vamos a presionarte y verás que estas en realidad están temblando mucho, ¿verdad? Entonces este es el brazo y luego se puede ver que hay geles por segundo y hay cosas así pasando. Bien. Ahora cómo se crea esto, vamos a seguir adelante y comprobar el camino del gel. Así que básicamente, acabo de convertir estos fotogramas clave, en realidad, nuevo a ellos, y luego simplemente crear la animación a partir de esto Nada demasiado complicado pasando aquí también. Lo que también puedes hacer es que en lugar de agregar geles, solo puedes crear una línea, una línea simple como esta. ¿Bien? Y entonces lo que puedes hacer es básicamente crear algunas deformaciones en la pierna también Ahora bien, este es un proyecto muy, muy antiguo, en realidad. Entonces por eso quizá no sabía que podía hacer eso en ese momento. Entonces tal vez acabo encontrar una solución que podría en ese momento. Y lo que básicamente puedes hacer es, vamos a seguir adelante y animar esto un poco para que puedas entender Voy a seguir adelante a los fotogramas clave y dejarme animar esto un poco más o menos aquí mismo En realidad debería haber más puntos de ruta, pero esto es solo para ilustrar el propósito y hacerte entender lo que realmente estamos tratando de lograr. Entonces en cuatro fotogramas, vamos a hacerlo así. Cosas bastante simples. No pasa nada demasiado complicado. Y luego después de eso, puedes ir al marco de seis claves y luego simplemente copiar y pegar el primer fotograma clave. Entonces esto se ha convertido ahora en un bucle como este. Ahora, obviamente, entiendes mi punto. Entonces no creo que realmente tenga que recrear toda la animación para explicarte esto Entonces básicamente solo cópielo y pegarlo, y esto puede crear el Sentimiento de, ya sabes, miedo que logré aquí. Así que cosas bastante simples. No pasa nada demasiado complicado. Ahora bien, hay otro que también tiene muchos ejemplos diferentes de emoción. O digamos que las emociones simples pero representadas en diferentes personajes, las posies. Entonces esta es la animación. Solo echemos un vistazo a esto primero. Ahora, el cliente solo me proporcionó el diseño del personaje. Entonces, básicamente, existe esta capa corporal que se está animando. Después de eso, tenemos los brazos animándose, cuales son criados al mentiroso del cuerpo Se puede ver que los fotogramas clave están compensados por un fotograma clave porque se trata de una regla de animación de personajes que se conoce como follow through, que una parte del cuerpo se mueve tras otra ¿Bien? Y eso es básicamente todo. Y la parte más alejada del cuerpo es la s, y es por eso que esas en realidad están animadas o, ya sabes, agregadas así. Bien, cosas muy simples. Nada demasiado complicado pasando por aquí. Ahora, puedes ajustar un poco más esta animación. Por ejemplo, si quisiera exagerar más el movimiento de la oreja, puedo arrastrar este fotograma clave hacia adelante también puedo arrastrar este fotograma clave hacia adelante y notar la diferencia aquí Pero se estaba volviendo demasiado, y un marco clave sí crea una diferencia. Para que puedas probar esto en tus animaciones y verás la diferencia y el impacto de tu animación. Bien. Y aparte de eso, los cohetes no fueron proporcionados por el cliente Así que acabo de crear estas animaciones de cohetes yo mismo. Animación bastante simple lopable. Ahora bien, cómo se crean estos también es bastante simple. Entonces estas son básicamente animaciones de brust de diferentes líneas de trazo Bastante simple. Ahora, el foco principal está en el cohete. El cohete es básicamente capa de forma. Entonces dos partes están en realidad dentro de un cohete. ¿Bien? Entonces ambas formas están dentro una capa para que pueda animarla más fácilmente Y luego hay tanto booster viene de él cuando arranca. Bien y recuerda que estamos en un mundo ficticio, así que no todo tiene que verse súper realista porque este personaje no existe también en la realidad Entonces hay que tener en cuenta estas cosas y estás abierto a probar algunas ideas salvajes. Y después de eso, solo queda esta pequeña línea detrás de ella, bien, que está consiguiendo recortar camino, en realidad, animando Luego está este movimiento arcos, también, que es solo una línea, que solo está creando este efecto de que el movimiento era demasiado rápido y hay una especie de llama detrás de él, que simplemente desaparece cuando se está animando Y luego después de eso, básicamente solo hay squash simples sucediendo en la escala como puedes ver. Primero partimos del cero, del cero, después vamos al 58 y 108 porque está aplastado mucho Entonces se está estirando mucho, y luego lo aplastamos como si estuviera reventando en la energía El mismo principio se aplica a todos estos tres. Ahora, creé la animación de confeti en un archivo separado, que está aquí Ahora bien, por qué lo hice fue muy sencillo. Puedo crear múltiples variantes aquí. Como pueden ver, esta es una verde. Verás que hay confeti versión dos. Verás que hay confeti versión tres. Verás que hay uno que tiene color gris y morado, y también hay uno que tiene amarillo y morado. Así que solo puedo arrastrar y soltar estos, y cada animación está aparentada al nulo También el cohete, por cierto. Entonces, si muevo esto, el cohete también puede moverse. A lo mejor es un error para mi fin, así que pido disculpas por ello. Pero toda la animación en realidad fueron animadas o criadas realmente correctamente. Entonces también debió haber sido criada. Así que solo debería ser padre de esto, bien. Y eso será básicamente todo, y entonces sólo puedo moverme alrededor de todo y luego todo va a funcionar. Sí, se puede ver que éste está correctamente criado. Entonces, si muevo este por ahí, puedes ver esto lo que puedo hacer es poder crear múltiples variantes de la animación, adecuadas a las necesidades de mi personaje porque el personaje no está parado en el mismo lugar en cada animación. Entonces podría tener que ajustar la animación. Entonces, ¿por qué crear la animación una y otra vez? En esta, tuve que añadir el color de acento, que es amarillo por aquí. Y debido a que el amarillo estaba en el centro y el personaje estaba, ya sabes, en una posición diferente, acabo mover los destellos a diferentes lugares Y eso es básicamente todo. Lo mismo se ha hecho en otras múltiples poses también. Así mismo animación de confeti, pero con diferentes animaciones de personajes, dando ese mismo impacto, y se puede ver que se ve realmente, muy hermosa Las animaciones son realmente loopables y los requisitos eran que la animación debía ser de dos a 3 segundos, así que dependiendo de lo que se sintiera bien, hice el loop sobre la base de eso Bien, cosas bastante simples. Animación de aspecto muy agradable. Y este proyecto es de donadores, en realidad. Entonces hay una compañía por ahí llamada donadores y estas animaciones de personajes fueron creadas para ellos. Vamos a seguir adelante y echar un vistazo rápido al resto de la animación. Así que cosas bastante simples están pasando porque el personaje se siente alegre. Así que animación muy simple. Después de eso, tenemos la animación de personajes. Ahora bien, esta es realmente importante para mostrarte algo realmente, realmente simple , es decir, verás que hay múltiples variantes de esta animación. Ahí están estos tres segundos. También está esta animación de seis segundos también. Notarás que el diseño del personaje también cambia sus colores. Ahora bien, ¿por qué agregué esta sutil deedle? Porque agrega tanta historia y significado. Donadores se trata básicamente de donar o ayudar a gente en tiempos difíciles o cuidar a las personas mayores Entonces, básicamente, nuestro personaje está representando al gris, y un gris básicamente significa que hay falta de vida y no hay felicidad Y una vez que el personaje está abrazando al otro personaje, se puede ver que está sintiendo la calidez. Oh, estas cosas en realidad de repente también comunican conscientemente mucho más detalle y mucho más significado en la animación. Ahora bien, esto no fue solicitado por los clientes. Tienes que crear todos estos detalles extra para darle mucho más significado y profundidad a tus animaciones. Bien, vamos a pasar a la siguiente. Ahora bien, esta es realmente simple. Esto básicamente va a estar sentado en el CTA, llamado así a la animación de acción, bien. Tan bastante simple. No necesitan los destellos ni el confeti en éste Después de eso, tenemos al tipo que básicamente está gritando o diciendo, Whoa ho ho. ¿Sabes? Entonces básicamente haciendo una especie de celebración. O tal vez solo puedan agregar esto básicamente cuando básicamente están teniendo una venta, pueden usar esto en su marketing GML también que el personaje está gritando, Whoa ho ho, y pueden poner una pegatina más grande, 40% de descuento con ella, y eso va a quedar muy, muy bien Bien. Y luego solo sigamos adelante. Bien, esta es realmente simple. Esto también es una especie de animación CTA llamada a la acción. Así que básicamente tipo de saludar en el pie de página tal vez o en la pantalla de bienvenida Así que cosas bastante simples. Este tipo de animaciones de personajes se pueden agregar en las animaciones de incorporación, así como también estás iniciando sesión en tu aplicación Así que cosas muy bonitas. Y ahora tenemos el último, que básicamente es simplemente difundir amor o difundir la felicidad. Sí Bien, así que la animación bastante simple está pasando aquí también. Hay un poco de animación en la capa de la boca. Ahora, básicamente agrupé y fusioné todas estas capas porque tenía más sentido simplemente animarlas juntas en lugar de solo, ya sabes, todo podría estar estallando Los dientes podrían estar moviéndose en otra dirección o la desalineación podría ocurrir mucho Así que solo los fusiono, y básicamente, hace un poco de sonrisa con la escala y la posición también. Cosas bastante simples. Los brazos están animados al cuerpo como se hace en todas las animaciones anteriores. Así que cosas bastante simples. Nada demasiado complicado pasando aquí también. Y espero que aprendan algo de este proyecto. Entonces eso es todo para esta clase. Te veo en la siguiente. 4. 03.Resolución de problemas ocultos: En esta clase, vamos a averiguar cómo usar AIUXPlugin en lugar de usar la sobrecarga Ahora, lo tocamos un poco en nuestra clase anterior en la intermedia, que puedas aprender a instalarlo siguiendo eso. Y después de eso, lo que puedes hacer es, sigamos adelante y discutamos todos los detalles. Ahora, déjame seguir adelante y mostrarte una cosa importante. Si vamos a sobrecargar batalla X, solo busquemos eso, y notarán que existe esta herramienta, que ya hemos discutido antes. Ahora, la sobrecarga ha lanzado 2.2, en realidad. Entonces sobrecargar dos puntos oh ha sido liberado, pero es de 75 dólares Y si tienes que actualizar, y si quieres actualizar tu plugin, tienes que pagar dinero adicional. Ahora, hay una mejor alternativa, que es AEUX y es completamente gratuita Ahora bien, hubo muchos problemas en la sobrecarga 1.2 también hay un poco de problemas en uso de AEUX y vamos a pasar por esos también Ahora, la sobrecarga tiene su propio lugar. También ofrece muchas soluciones nuevas, y hay muchas cosas que puede hacer. También puede transferir tu trabajo desde Photoshop, pero ese no es nuestro enfoque principal en la creación de animaciones de interfaz de usuario. Ese es alguien que está creando una cosa como esta tal vez con algunas texturas y cosas así. Bien, así que sigamos adelante y miremos a AEUX. Hablamos de esto anterior pero vamos a seguir adelante y mira esto AEUX está en Github Simplemente puedes descargarla desde aquí y leer como instalarla, cosas bastante simples, nada demasiado complicado. Y lo que básicamente puedes hacer es, vamos a seguir adelante Figma y déjame mostrarte cómo puedes usarlo Entonces básicamente cómo funciona la sobrecarga. Lo siento, mi BD, el AEUX como realmente funciona es basicamente es bastante muy simple Vamos a seguir adelante y crear algunas capas diferentes. Y déjame copiar algún tipo de imagen. Ahora bien, esta es una imagen. Así que vamos a copiar eso, d él por aquí también. Bien. Ahora bien, esto es realmente importante que el trabajo que estás tratando transferir esté en un marco. Tienes que hacer clic derecho, entrar en tus plugins, entrar en desarrollo, y entrar en AIVX Una vez que se abre, lo que puedes hacer es básicamente seguir adelante y simplemente presionar Enviar selección a AE y luego te va a pedir una carpeta. Vamos a seguir adelante y crear una carpeta, que será nuestra prueba AEUX Así que solo seleccionemos eso Bien, puedes ver que la imagen se ha agregado aquí también, y puedes ver que también se agregan las formas. Ahora bien, esto también funciona muy bien con gradientes. Puedes agregar gradientes, transferirlos también. Funciona muy, muy bien. Pero hay una cosa realmente importante que debes tener en cuenta cuando estés trabajando en proyectos de clientes, que es que tienes que entrar en la extensión, golpear el AUX. Hay muchos ajustes por aquí que tienes que cubrir. Puede seleccionar la opción que creará una nueva comparación automáticamente. También puede agregar un camino seguro de imagen. No he seleccionado ninguna carpeta, así que me solicita una nueva carpeta cada vez. También puede elegir la velocidad de fotogramas de la nueva comp, que también puede ser 60, que también puede ser 24. La duración de la comp debe ser de alrededor de 60 segundos. Ahora, ¿por qué? Porque a veces me ha hecho arrepentir de por qué mi tamaño de comp era en realidad más corto porque el cliente me pidió que disminuyera la velocidad de la animación. Y si lo que realmente sucede es que el cliente tiene tantas capas o tantas animaciones complejas que está pasando o su personaje o su obra de arte tiene tantos fotogramas, en realidad, o si la animación se crea realmente usando autolayout, entonces hay Cada fotograma que se ha agregado aquí en realidad se traduce como un neo comp. Dentro de After Effects. Déjame intentar volver a probarlo. A lo mejor eso va a funcionar. Sí, puedes ver esto. Este marco en realidad se agrega. Ahora lo que realmente sucede si la animación empieza desde aquí. Pero el cliente ha solicitado que la animación va a tener ahora 10 segundos de duración, pero su tamaño de comp fue de 5 segundos. Lo que puedes hacer es simplemente presionar Control K y luego básicamente cambiar la duración. Cosas bastante simples, nada complicado, ¿verdad? Pero pero, pero, pero. Lo importante es que si tienes varios frames dentro de este mainframe, entonces lo que realmente sucede es dentro de este frame, habrá otro frame Entonces básicamente, otra pre comp. Tienes que abrir eso, y luego tienes que arrastrar básicamente la capa. Entonces hay que abrir eso, y luego hay que hacer también lo mismo y alargarlo. Entonces, ¿por qué pasar por todo ese esfuerzo mantenlo 60? Tan simple como eso, esto no aumenta el tamaño del archivo de todos modos Entonces no hay daño en hacer eso. Se deben verificar los parámetros de detección de forma. Ahora, dice grupos pre comp. Ahora eso es completamente tu elección, pero no lo recomiendo. Y hay otras cosas que también puedes pre comp grupos, no recomendarlo. Después de eso, tienes un precomp, que es en este caso, por ejemplo, puedes seleccionar esto y golpear un precomp Y esto es realmente útil. A veces realmente no quieres hacer esto porque habrá más de 100 capas más. Entonces te confundirás mucho eso, qué debo animar y qué capa es qué Entonces hay que tener esas cosas en mente. También hay algunas cosas adicionales a tener en cuenta, que a veces es cuando transfieres una obra de arte complicada, también se agregarán algunas capas de guía extrañas aquí, y hay un proyecto real que quiero mostrarte. Pero desafortunadamente, no tengo el archivo Figma para ese proyecto Y lo que básicamente puedes hacer es una vez que eso está sucediendo, solo puedes guiar por Google la visibilidad de las capas de vez en cuando, y puedes seleccionarlas y luego simplemente eliminarlas también. simple como eso, y la pestaña del sistema básicamente no es nada, así que solo déjala. Cosas bastante simples, y ahora hemos pasado por esto. Ahora bien, ¿cuáles son las ventajas de usar AEUX? Como mencioné, es completamente gratis. Quiero decir, eso es una gran ventaja. El único problema es el problema de pre comp que les acabo de mencionar, chicos, escriban este, y pueden resolverlo simplemente manteniendo la duración de la comp más larga. Aparte de eso, en realidad no hay tantos temas. A veces una de cada 100 veces, habría un tema muy, muy raro, y vamos a lidiar con eso también. Pero vamos primero adelante y veamos nuestro caso de estudios que cómo creé diferentes tipos de animaciones usando este plug in. Ahora bien, así es como el AEUX realmente envía los datos a tu carpeta Este es un proyecto cliente y el archivo en realidad tenía tantos gradientes, puedes ver las capas individuales por aquí Esto no es realmente tan complicado porque antes que nada, estos datos ya están agregados a tu archivo, así que realmente no tienes que preocuparte si hay muchas cosas raras pasando aquí. Simplemente ignora estas cosas. Además, hay que tener en cuenta que si hay una capa que se da vuelta aquí, por ejemplo, así, el AEUX todavía la va a copiar y pegar por aquí Entonces es por eso que hay múltiples instancias de una misma capa. Y notarás que algunas capas tienen nombres realmente limpios. Ahora que en realidad es exportado manualmente por mí. ¿Por qué? Eso lo explicaré ahora en un minuto. Vamos a seguir adelante y abrir el archivo y déjame mostrarte un proyecto mucho más complejo, y déjame guiarte a través de él que como vas a en este caso es optimizar el archivo. En primer lugar, sabes que no podemos usar gradientes de libertad y tampoco puedes agregar múltiples capas de estilo que realmente están disponibles en Figma. Estos en realidad no se traducen muy bien en After Effects. Y si estos también traducen, en realidad no se puede exportar técnicamente para cada plataforma. Todas las funciones no son compatibles, como saben, dropshat no es compatible con IUS, así que ten esas cosas en mente Y hay que engañar al código alrededor de esas cosas como se discutió en clases anteriores. Entonces, básicamente, lo que realmente estaba pasando con este trasfondo es una historia separada, y voy a hablar de ello en un rato. Solo miremos nuestras cápsulas. Se puede ver que la cápsula es básicamente solo esta nada animando por aquí Simplemente decidí animar todo aquí simplemente agregando todo a un nulo padre, y entonces eso es animar Sí, puedes ver, cosas bastante simples, y estos puntos básicamente están siguiendo un camino. Ahora bien, cómo crear esto es realmente sencillo. Lo que tienes que hacer es básicamente crear un fotograma clave en este camino. Copiarlo, leer el fotograma clave. Ve a tu capa de forma. Vamos a crear uno nuevo muy rápido. Déjame hacer rojo el relleno. Déjeme caer esto. Bien. Y déjame ir al puesto. Golpeado. Ahora, se debe seleccionar el primer fotograma clave y pulsar Control V. Bien. Y si esto no copia, en realidad, debería, pero permítanme solo mirar en detalle sobre cómo hacerlo. Bien, así que una vez que lo hayas copiado, solo tienes que pegarlo por aquí, y verás que la ruta se ha agregado y también se agregan aquí también los fotogramas clave Y notarás que está siguiendo un camino. Ahora definitivamente también puedes hacerlo en la otra dirección. Entonces, sigamos adelante, presionemos alto y hagámoslo. Ahora, después de eso, hay que encargarte de estos fotogramas clave del medio y hay que convertirlos en interpolación de fotogramas K para que sea lineal y vagar a través del tiempo, hacer que se bloquee Eso es. Haz lo mismo con este también. Entonces o simplemente puedes golpear rove a través del tiempo para apagarlo. Voy a hacer esto lineal. Bien. Y entonces tal vez he arruinado algo. Sí, creo que he arruinado algo. Déjame seguir adelante y comprobar qué es lo que en realidad he hecho mal. Una vez que hayas copiado y pegado el fotograma clave, es posible que tengas que ajustarlo. Bien. Y después de eso, lo que puedes hacer, hay dos cosas que puedes hacer. En primer lugar, lo que puedes hacer es básicamente poner tu camino y emparejarlo así. ¿Bien? Y luego puedes poner tu forma así, usando el enchufe. Tan simple como eso. Y después de eso, solo tienes que arrastrarlo y soltarlo donde quieras. Tan simple como eso, nada demasiado complicado. Bien. Y si tienes curvas en el camino, entonces solo tienes que ajustarlas, y luego simplemente puedes crear la siguiente animación. Tan simple como eso. De la misma manera que hice las animaciones de línea. Y luego solo está pasando esta animación cápsula. Ahora notarás que la animación parte de la genética. Y termina en la genética. Ahora bien, cómo creé esto es realmente, muy simple. Yo solo dupliqué todo, ya sabes, verás que algunas cosas están más de una vez en la línea de tiempo. Por ejemplo, el reloj una vez aquí, el reloj vuelve a estar aquí. Bien, de la misma manera, solo creé suficiente espaciado y creé un pergamino, que está arriba de aquí, y puedo arrastrarlo para mostrarte también que todo es igual, solo créalo dos veces arriba. Ahora como estos son pre cooms no agrega datos adicionales, y este tipo de decisiones realmente optimizan tus archivos Cosas simples, pero hay que hacerlo con cuidado. Ahora bien, el fondo tenía algunos problemas y en realidad no se estaba transfiriendo correctamente, así que solo tuve que ir ahí en el archivo, apagar todo, mantener solo una capa. Por ejemplo, esta capa solo se volvió hacia abajo, giro de todo lo demás, o simplemente puede seleccionar esta capa y simplemente presionar Exportar. Y si solo quieres transferir esta capa, entonces solo selecciónela, presiona Exportar. Eso es. Entonces puedes seguir adelante y lo que puedes hacer es esto es realmente importante también que justo antes de comenzar la animación, clic en esto, exportar un fotograma clave, y nombrarlo como referencia y luego ponerlo en tu comp también en la parte posterior. Y luego encima de eso, puedes notar si algo está desalineado o algo así A veces habría un tema que vamos a discutir. Como hemos cubierto éste, vamos a cubrir ese otro error detallado también, que ocurre en algunos proyectos. Pero antes de eso, sigamos adelante y echemos un vistazo a otras dos animaciones que creé para este proyecto. En realidad, hay tres, creo. Así que de nuevo, hay múltiples imágenes. Mismas tarjetas, mismas imágenes, cosas simples. Nuevamente, el efecto loopable, se crean los liners, todo está dentro de los que mueven en sentido contrario Cosas simples, nada demasiado complicado pasando. Bien. Y si, eso es básicamente todo. Y puedes eliminar estas capas adicionales cuando sea necesario, pero si están desactivadas, en realidad no exportan. Entonces es una victoria ganar de cualquier manera. Y se puede ver que esta es la comp final donde se renderizan todo. Bien. Y verán que este es nuestro marco, de nuevo, el mismo problema con los gradientes o algo a lo que me enfrentaba Entonces yo solo hice lo mismo. Además, otra cosa que es realmente importante es que también uso el mismo tamaño de la máscara para que todo se recorte de ella. Bien. Y debido a que los requisitos eran estos, el cliente necesitaba la animación para sumar estos espacios negativos. Por eso agregué esto. De lo contrario, podría simplemente bajarlo también. Cosas bastante simples, mismas tarjetas, algo así como animando. Vamos a entrar en el compat de tarjetas para que también lo veas Entonces tres cartas, bien. Y luego básicamente solo dupliqué esas tarjetas con el mismo espaciado. Así que vamos a seguir adelante y ya se puede ver que donde realmente empieza esta tarjeta. Bien. Cosas bastante simples, solo duplicación de las capas para optimizar los tamaños de los archivos. Eso es. Ahora, sigamos adelante y echemos un vistazo a nuestro tercer expediente. Ahora bien, esto es vamos a abrir. Bien, entonces este en realidad tuvo algunos problemas, y vamos a repasar esto también. Notarás que esto es un trazo que en realidad tuve que crear aquí. Ahora bien, porque a veces los gradientes están realmente desordenados. Por ejemplo, si estás agregando un degradado más simple, también me he dado cuenta realmente, lo cual es algo realmente extraño que cuando recibo este tipo de archivos del cliente, solo entonces me enfrento a este tipo de problemas. Hay otro proyecto que vamos a discutir muy pronto en esta clase, que es el CryptAject. Ahora bien, esto es de un diseñador conocido como Gacofz. Hemos colaborado en algunos proyectos. Es un diseñador realmente increíble. Hace un trabajo realmente genial del framer y también hace algunos trabajos de diseño realmente geniales Para que también puedas revisar su trabajo. Y una vez que diseña la mayoría de las cosas, realmente no he visto muchos temas aparte los temas que enfrentamos en estos proyectos que discutiremos. Aparte de eso, cuando trabajo con los proyectos del cliente, me he dado cuenta de que hay múltiples problemas de gradiente que los gradientes se ven perfectos aquí Pero cuando los transfiero a AE, como que veo temas muy, muy extraños. Verás que aquí no hay temas, ¿verdad? El gradiente ha llegado aquí realmente perfectamente. Pero a veces sólo tengo que recrear la capa. No sé por qué sucede esto. No hay tal explicación al respecto porque es sólo una especie de herramienta que no tiene mucho apoyo. Entonces es solo una herramienta con la que solo tienes que trabajar. Pero es una alternativa gratuita, y trabajé más de 100 proyectos con esta herramienta, y funciona muy bien. Entonces por eso ya sabes, requiere que se cree una clase separada en él. Así que cosas bastante simples creadas por aquí usando la misma técnica. El gradiente es básicamente muy simple. La opacidad se desvanece en la esquina inferior. Déjame seguir adelante y mostrarte el gradiente. Y vamos a ver dónde está esto. Sí. Se pueden ver los puntos de degradado. En realidad, sí, ahora puedes ver mejor. ¿Ves? Degradado bastante simple. Nada demasiado elegante. Solo tienes que hacer estas cosas a veces manualmente también. Sé que a veces puede ser problemático, pero también te ayudará a mejorar o a conseguir un mejor diseñador, y esto también te hará destacar entre la multitud y hacer que también te conviertas en el creador del 1% superior. Entonces esto es básicamente para explicarles y mostrarles que la resolución de problemas es en realidad un aspecto enorme de hacer estas animaciones también. Simplemente no es necesario agregar fotogramas clave. También hay que tener en cuenta estas cosas, y cómo he creado la animación offset es bastante simple. Sin embargo, creas una animación de guijarros de bucle simple, solo creas tres fotogramas clave Simplemente los copia y pega de nuevo, y luego básicamente solo los compensas. Cosas muy simples, nada demasiado complicado pasando aquí también. Y el fondo es básicamente sólo una imagen. De la misma manera también tuve algunos problemas con este. Entonces solo agrega una imagen. puede ver que he agregado una máscara porque las esquinas eran necesarias para ser redondeadas, pero ya sabe que las composiciones son realmente cuadradas en cada software de composición y en todas partes Entonces por eso acabo de agregar una máscara rectangular para solucionar ese problema. Bien, cosas bastante simples. Porque cuando en realidad estaba transfiriendo esto de Figma, no tenía máscara, así que solo tuve que agregarla y el radio de esquina si hay alguna agregada en Figma, realidad no se traduce A After Effects también. Déjame tratar de mostrarte eso también. Creo que esto no funciona bien. Oh, lo hace. Entonces porque tal vez realidad se agregó en una imagen, por eso no funcionó Pero de todos modos, solo para tener las cosas en mente o para mantener las cosas tediosas, esto es solo una técnica para tener en Así que ahora vamos a seguir adelante y cubrir algo que en realidad no hemos discutido hasta ahora en ninguna de las clases. Entonces déjame seguir adelante y mostrarte una animación de encabezado. Ahora bien, ¿qué es en realidad una animación de encabezado? Una animación de encabezado es algo que se muestra en la parte superior de un sitio web, ¿de acuerdo? Y en este ejemplo, la animación es bastante sencilla. Básicamente una IA solo hablando. Así de simple, hemos creado animaciones de chat con muy, muy detalle en la clase intermedia y también en la clase avanzada. Puedes echarles un vistazo. Así que cosas bastante simples están pasando. Vamos a ver qué es lo diferente por aquí que no se ha discutido antes, tal vez. Bien. Y hay otro ejemplo que voy a estar cubriendo muy pronto en esta clase que te va a mostrar cómo puedes crear sistemas realmente en vivo que vayan a diferentes secciones del sitio web. Bien, entonces sí, puedes ver que básicamente hay esta media carta. Ahora esto está cerrado, creo. Sí, esta parece ser la misma. Sí. Esta es una burbuja. Entonces básicamente de la misma manera que hicimos animación antes en la clase anterior, todo está adentro animado aquí. Lo mismo, cosas de M. Estas son solo imágenes, cosas simples. Ahora se puede ver que lo que comenté antes, puede ver que hay comps dentro de coms dentro de coms, ¿verdad Ahora aquí es donde puedes meterte en problemas si tienes que alargar tu animación. Eso irá en cada comp y aumentará el lado del archivo y luego estirará las capas. Realmente deberíamos evitar este tipo de trabajo extra. Bien, entonces esta es básicamente la animación. Nada demasiado complicado pasando aquí también. Cosas bastante simples. Y este ícono también es solo imagen también. Bien. Entonces, ¿qué es realmente la animación de encabezado? Déjame mostrarte un proyecto que creé. Espero que su página web esté en vivo, sí. Ahora, desafortunadamente, realmente no puedo localizar los archivos, tal vez estos realmente se eliminaron cuando los datos se corrompieron en mi otra unidad. Pero puedes ver las animaciones por aquí. ¿Bien? Entonces esto es básicamente un diseño SVG, diseño SVG completo, y luego simplemente animado encima de una imagen móvil. Luego está este whatsapp mensajes, bastante sencillos de crear. Y se puede ver cuánto valor agrega, ¿verdad? Y básicamente toda la animación de flujo de trabajo que puedes ver. Creamos una animación muy similar en clase avanzada, así que puedes comprobarlo. Y eso es básicamente todo. Así va a quedar tu trabajo . Y los colores, los conceptos realmente van a importar. Así que por favor trata de tener en cuenta estas cosas y cuida buena marca de la marca con la que estás trabajando. Bien. Así que vamos a seguir adelante y déjame mostrarte otro muy buen estudio de conjeturas. Eso creé. Bien, así que vamos a seguir adelante y echar un vistazo a esto. Bien, así que vamos a seguir adelante y echar un vistazo a una marca local be para la que creé animaciones. Ahora bien, en este proyecto, hice algo realmente increíble y realmente interesante. Déjame seguir adelante y primero mostrarte cómo salió realmente el sitio web. Bien. Y este es en realidad el sitio web de un proyecto en vivo. Entonces básicamente el negocio está en vivo. Ahora esto es realmente interesante. Y lo que hice fue para este proyecto es que yo también creé el logo. Yo hice el diseño del logo. Yo también hice todo el diseño más la animación. Bien. Entonces solo había dos colores solo morado de la marca y luego verde que agregué como color complementario. Y se puede ver que la animación está funcionando muy bien. Entonces esto es básicamente algo que se conoce como animación de cabecera. Eso básicamente explica la mayor parte del producto, ¿verdad? Se explica por sí mismo que lo que hace el negocio. Y luego tenemos todos los diseños los hice yo, y luego tenemos estas animaciones de flujo de trabajo, ¿verdad? Cosas muy simples, pero muy curiosamente hechas. Y luego tenemos el ícono de Google Business, que básicamente se está impulsando, ¿verdad? Entonces básicamente, una vez que eliges un plan de la plataforma, lo que obtienes es si notas que compras escalas, tienes tanto análisis, las ventas van, vas de esto a esto, así que pasa mucho crecimiento porque se trata de una narración, ¿verdad Cuando tienes total libertad sobre el proyecto, este es el tipo de trabajo que debes crear. Y este es el tipo de servicios que te harán destacar entre la multitud. Y entonces puedes ver esta animación de loupeb realmente agradable. ¿Correcto? Entonces tenemos este pie de página, que básicamente muestra lo que va a hacer el Local B. Ahora, todas las animaciones son muy compatibles. Se puede ver que no está pasando nada demasiado elegante. No hay efectos especiales, pero aún así, verás que la animación se ve realmente hermosa. Agrega tanto sentido y vida al sitio web. Y así es básicamente como puedes hacer que las marcas se destaquen entre la multitud. Puedes crear algunos trabajos increíbles. Y una vez que hayas creado algo increíble como esto, lo que básicamente puedes hacer es crear un bonito caso de estudio a partir de esto y mostrarle eso al mundo que esto es lo que eres capaz de hacer. ¿Bien? Entonces básicamente, estas son todas las animaciones y solo las revisaremos, muy rápido porque los diseños los hice yo, así que en realidad no hay muchos problemas en esos escenarios. Cosas realmente simples. Cuando la B básicamente escoge el logotipo, el camino lo ha cortado. Es un pre comp. La capa se ha recortado porque ahora está apadrinada al propio logotipo Y el logo es básicamente precommed y animando Y solo agrego el encuadre de la llave de posición en la precomp, cosas bastante simples Nada demasiado complicado. Bien. Derecha. Cosas bastante simples. ¿Bien? Y luego tenemos el otro. Solo echemos un vistazo a eso. Bien, entonces esta es la entrada de diseño de Illustrator. Ahora, notarás que las fuentes son en realidad usé una fuente que tenía en mi computadora, así que simplemente no tuve que convertir estas porque los textos no estaban animando también Y la atención se centró únicamente en los elementos. Entonces el texto sólo está apareciendo con opacidad, por lo que no tenemos que convertir estos en jugadores de Ella Eso será trabajo extra, no hay necesidad de eso. Bastante simple, como una animación por aquí. Solo algunos escalan muy bien. Bien. Déjame mostrarte los fotogramas clave Animación a escala bastante simple. Nada demasiado complicado. Después de eso, tenemos la animación de flecha, que es el camino de ensueño. Esto lo discutimos en el curso avanzado que cómo hacer que las flechas se optimicen. Y luego tenemos el bot de IA. Tenemos el SEO, cosas bastante simples, ¿no? Pero tanto significativo y realmente encaja en todo el estilo de la marca. Después de eso, tenemos el impulso de negocio de Google. Echemos un vistazo a eso. Bien, entonces esta es un poco larga. Entonces está todo este viaje en marcha. Entonces vamos aquí. Escogemos este paquete. Vamos a bajar. Ahora bien, porque lo quiero yo era básicamente un elemento está básicamente conectado a otros elementos, es por eso que todo el trabajo está en una composición. Y me estaba divirtiendo animándolo, así que en realidad no le presté mucha atención a agregar precams por aquí Y además el cliente estaba realmente, ya sabes, dispuesto a confiar en mí. No pidió muchas revisiones. Entonces por eso confiaba en que le encantaría. Entonces por eso simplemente no agregué precams. Sí, así que cosas bastante simples están pasando por aquí. Entonces básicamente viene esta línea, y creo que va a ser un problema encontrar la línea. Sí, creo. Déjame solo tratar de encontrarlo. ¿A lo mejor éste? No. Sí, ésta. Bien. Entonces el diseño de la línea es simple, pero es solo que la otra línea es básicamente separada. ¿Bien? Entonces simplemente se arroja al final y luego revelamos este y el logo básicamente lo está siguiendo. Ahora, todos los marcos de regalo se agregan por aquí porque la misma capa en realidad está pasando por todo el viaje, así que no tuve que pre compit porque es de una sola capa Si lo pre comp, es la misma historia. Entonces nada diferente. Entonces tenemos esto las líneas en realidad tuvieron algún efecto de conicidad. No, en realidad no quería comprometer esto, y es por eso que acabo de animar esto vía máscara. Ahora bien, es algo de trabajo extra, como puedes ver, pero definitivamente vale la pena porque el efecto cónico en la línea se ve muy bien. Y por eso tuve que expandir la capa, porque no se puede agregar efecto de conicidad en Lottie Y entonces tenemos esta línea, que también es una línea cónica. Simplemente animado. Entonces tenemos bolas escaladoras, puntos. Eso es. Entonces tenemos los números escalando muy sutilmente Así que todo nuestro enfoque está por aquí y tenemos los análisis rotando en. Cosas simples. Algo de animación de escalado aleatorio por aquí pasando con algo de desplazamiento a las capas. Así que se ve muy bien, ¿verdad? Por lo que hay algún desplazamiento de compensación que se puede lograr con esto. Bastante simple, ¿verdad? Entonces tenemos esta animación aquí mismo, ¿verdad? Cosas bastante simples, desplazamiento de escala nuevamente aquí. Cosas simples. Ahora, lo realmente importante a tener en cuenta es que ahora tenemos dos campos en la capa. Entonces, para básicamente reducir las capas en tu comp o limpiarlo un poco, solo puedes seleccionar una o dos capas, arrastrar así y luego simplemente fusionarlas. Esto no afecta a la capa de ninguna manera. Y luego simple como eso. Y después de eso, tenemos la revisión de Google. Solo echemos un vistazo a eso. Creo que esta es la animación de cabecera, la que más impacto tiene. Sí. Entonces ahora verás eso primero, creé la animación en el formato Google, derecho, en los colores de Google. Pero el cliente realmente quería el toque de marca, ¿verdad? Entonces es por eso que recolored simple como eso. Cosas bastante simples. Nada demasiado complicado, ¿verdad? Y notarás que el verde, el amarillo, todo básicamente el amarillo básicamente coincide con el Google. El morado es de la marca. La regla estándar es básicamente cuando estás agregando color es que debes entrar en tu, creo, tonalidad, y si el número es superior a 150, deberías menos 150 de él, ¿de acuerdo? Y eso te va a dar un color muy complementario. Si el número está por debajo de 150, solo le agregas 150. Eso te va a dar el valor perfecto. Entonces solo un consejo de diseño por ahí. Ahora bien, esto será muy útil para crear contrastes realmente agradables Y al cliente le encantó. Entonces dije, ¿por qué no? Vamos a ir con él. Y eso es básicamente todo. Y si estás pensando en cómo se crea la animación por aquí es básicamente solo un sobreimpulso en la capa con escala 120, y luego bajamos a la escala a cien La misma animación en cada capa. Pero solo agrégalo con un poco de, ya sabes, offset. Puedes ver el offset aquí, ¿verdad? Y luego solo están estas reseñas de Google apareciendo, ¿verdad? Entonces uno tras otro. Entonces esto es básicamente solo que las reseñas de Google están siendo impulsadas, ya sabes, aparecen y luego solo entran en esto y luego tenemos que subir la calificación Entonces básicamente estamos contando toda la historia. Y todos estos son en realidad solo aparentemente a sus propios nulos, y luego esos son solo nulos y luego esos son que se mueven a través de la posición Entonces estas son las cosas que debes tener en cuenta para simplemente optimizar tus archivos. Puedes personalizarlos más tarde o simplemente puedes básicamente ahora cuando te estoy explicando esto, realmente no estoy teniendo dificultades para realmente no estoy teniendo dificultades animar cosas como esta Pero si estás trabajando en el archivo Figma que realmente te mostré en el proyecto anterior del cliente, es difícil animarlos y además mantener el arreglo de esos Así que tenlo en mente. Y si te metes en luchar esa que capa es wag, entonces no te preocupes Yo también he estado ahí y aprenderás con experiencia. Confía en mí. Bien, entonces después de eso, tenemos la animación del logo, ¿de acuerdo? Y tenemos la animación del logo en múltiples formatos. Vamos a mostrarte la animación de regalos porque no está pasando mucho. Cosas bastante simples. Nada demasiado complicado, solo un poco de squash y estiramiento, un poco de animación y rebasamiento en las antenas de la B. Cosas bastante simples Y la misma animación ha sido, ya sabes, ofrecida en múltiples tamaños, y puedes ver eso. Misma animación, pero diferentes tamaños. Acabo de crear esta versión cuadrada y luego solo puse esa pre comp en todas partes. Cosas simples, realmente útiles y ahorran mucho tiempo. Bien, entonces eso es básicamente todo para esta clase. Nos vemos en la siguiente. 5. 04.Resolución de errores: Bien, entonces en esta clase, vamos a discutir cómo solucionar algunos errores que podrías enfrentar y no te haces una idea cómo se están creando esos problemas Entonces, sigamos adelante y discutamos nuestro caso de estudio, y veamos algunos de los errores que estábamos enfrentando. Se puede ver que aquí hay alguna relación de texto, aquí hay alguna relación de texto, y también hay algunos números de texto por aquí. Entonces, ¿cómo arreglar esto Ahora bien, esto es realmente sorprendente que cuando realmente exporté estos archivos desde mis After Effects, no hubo ningún problema en absoluto. qué me refiero con eso es cuando exporté la animación, lo que en realidad estaba viendo. La animación dentro de mi vista previa fue completamente perfecta, ¿de acuerdo? No hubo ningún problema en absoluto. La animación se veía perfecta. La animación también se veía perfecta aquí. No hubo problemas. Ni siquiera había un solo tema que pudiera ver aquí. Y la primera vez que esto realmente sucedió, me asusté mucho porque no pude entender por qué sucede esto. No lo entiendo porque el cliente se quejaba mucho. Entonces así es como realmente lo arreglas. Entonces, básicamente, sigamos adelante e importemos nuestro activo para entender primero lo que realmente estaba sucediendo. Y luego aprenderemos los métodos de solución de problemas de estos en realidad. ¿Bien? Entonces, sigamos adelante y agreguemos nuestra gráfica. Simplemente cerremos este proyecto e importemos éste. Bien, todo se agrega por aquí. Bien. Entonces esta es la capa que estaba causando problema. ¿Bien? Y vamos a seguir adelante y crear una animación muy sencilla. Bien. Vamos a animar solo esta capa Así que animación bastante simple. Eso es. Vamos a tratar de explorar esto. Por cierto, discutimos que habría algunos jugadores grupales, y puedes ver a esos jugadores de grupo aquí también. ¿Bien? Y vamos a seguir adelante y se puede ver que los jugadores del grupo pueden ser deshabilitados o habilitados, también. ¿Bien? Pero estas capas no tienen ningún dato. No hay nada sobre ellos. Y lo que puedes hacer es básicamente eliminar jugadores de grupo. Y tu composición quedará limpia. Bien, así que también hemos cubierto esta característica. Ahora, sigamos adelante y refresquemos. Haga clic aquí, haga clic en nuestra gráfica. Y ahora solo acierto prueba. Vamos a hacer clic en los renders actuales y podrás ver la animación. Perfecto. Ahora bien, realmente no puedo acercarme por aquí, pero pueden ver que no hay ningún problema por aquí, ¿verdad? Ahora bien, aquí es donde viene la solución de problemas. Tienes que ir a Google y buscar la vista previa de Lottie. Bien. Hay LottieArchivos Preview. Eso se puede abrir. Ahí está LottieFiles de Lottie y luego solo intentemos encontrar algunos otros Vamos a tratar de encontrar múltiples, ¿de acuerdo? Porque cuanto más mejor. Así que vamos a ver Bien, y ahora voy a ir aquí, haga clic en Mets Jason, arrástrelo aquí. Y ustedes están viendo que no hay problemas pasando por aquí también. Ahora bien, porque tal vez arregle la capa realmente en Figma, tal vez sea exactamente por eso que esto no está sucediendo No, no, no, no, creo que está pasando por aquí. Vamos a acercarnos. Se puede ver que hay este problema, pero en realidad esto no se está detectando en nuestra animación, lo cual es un poco extraño. Ahora para arreglar esto, sigamos adelante y también veamos si podemos probarlo en alguna otra plataforma también. ¿Bien? Y así esto es básicamente plug ins o déjalo, y vamos a darle a la animación plod Vamos a arrastrarlo y soltarlo. Vaya, no funciona. Así que vamos a seguir adelante, copiar nuestro camino, pegarlo aquí, y luego darle a prueba. Se puede ver que aquí también hay problema. Y entonces sólo vamos a ver. Ahora, no usemos esto, déjalo. ¿Bien? Así puedes usar estas vistas previas de Lottie, diferentes de múltiples estilos de ellas y múltiples sitios web, y luego probar tu animación Y es muy, muy, muy recomendable que aunque confíe en su animación, no tome más de 2 minutos, lo pruebe por el bien de mejores clientes y haciendo algún trabajo extra ordinario, poniendo algo de valor extra ahí fuera, ¿de acuerdo? Porque eso es lo que te va a hacer destacar entre la multitud. Bien, entonces ahora cómo arreglarlo. Hay dos formas de arreglar esto en realidad. Ahora bien, estos problemas en realidad son causados por algo muy sencillo. Hay una solución que es que puedes hacer clic en la capa, hacer clic derecho y crear formas a partir del texto. Ahora, eso solucionará el problema. Ahora esta es la solución número uno. Digamos que hay un párrafo entero, y eso va a quedar rezagado en su sistema. Desea mantener la capa de texto realmente conservada. Lo que puedes hacer es hacer doble clic aquí y luego tienes que simplemente colocar la caja inferior así. ¿Bien? Y también puedes hacer que caiga así también un poco. ¿Bien? Y luego vamos a refrescarnos. Vamos a golpear nuestro Export otra vez y vamos a golpear prueba de nuevo. Simplemente reemplacemos nuestro archivo. Vamos a golpear Render. Esperemos un minuto y veamos cómo resulta esto. Bien, entonces el archivo ha explotado. Solo sigamos adelante y probemos nuestro nuevo archivo. Vamos a hacer clic aquí y vamos a solo el Lottie Lab uno. Sí. Vamos a arrastrar y soltar nuestro archivo. Acerquemos y veamos, nuestro problema ha sido resuelto. Bastante sencillo no hacer nada para complicarlo, sino solo una forma de solucionar un problema muy complicado que realidad tal vez no encuentres la solución en Internet, y esto solo se ha aprendido a través de la experiencia Bien. Entonces, otro problema que podrías enfrentar es cuando tienes en realidad ahora esto suele suceder cuando estás trabajando con gradientes, no con capas sólidas Lo que realmente sucede es que digamos que hay este gradiente o digamos que hay esta capa de forma, ¿de acuerdo? Y tenemos un color muy bonito en el degradado. Ahora, básicamente lo que realmente sucede es, vamos a arrastrarlo a un marco. Déjame seguir adelante y ponerla por aquí. Bien. Déjame enviarlo a After Effects. Ahora lo que básicamente va a suceder es que a veces el gradiente se ve muy bien por aquí. No hay problemas en tu diseño, y todo se ve perfecto. ¿Bien? Ahora, cuando realmente estás exportando el archivo, cuando lo estás previsualizando aquí, el archivo va a quedar perfecto No hay problemas, pero cuando lo pruebes en el sitio web, vas a enfrentar algún problema realmente extraño. Por ejemplo, este rectángulo rojo va a ser naranja, o esto va a ser realmente negro. Y solo eres un rompecabezas, solo vas a volver aquí, revisar los colores, y ver si has agregado algún gradiente tal vez por aquí. Pero no hay nada. No hay efectos, nada. Todo es perfecto. En esos escenarios, lo que realmente tienes que hacer es simplemente eliminar la capa, ¿de acuerdo? Basta con eliminarlo. No quite el campo, agregue otro relleno. No, eso no va a funcionar. Es solo una especie de falla en el código porque es solo punto El archivo Json es básicamente un archivo JavaScript punto, ¿verdad? Y hay algún tipo de falla de código que realmente sucede Entonces lo que tienes que hacer es básicamente crear escoger tu herramienta rectángulo. Bien. Adelante, crea la forma. Y entonces lo que puedes hacer es si tienes problemas para copiarlo desde aquí, luego solo entra en tu figma, da clic en él Puedes copiar el valor desde aquí. Alt haga clic aquí. Ahí está el valor aquí. Golpea Bien. Vamos a arreglar nuestro gradiente muy rápido así. O a veces esto también sucede que el posicionamiento del gradiente también está desordenado. Entonces, en esos casos, deberías usar este método en lugar de simplemente reorganizar el gradiente porque a veces eso no va a funcionar tan bien También vas a copiar este color, haz clic aquí. Entonces solo el valor así. Bastante simple, no demasiado complicado. Y si realmente hay gradientes muy complicados y realmente no se puede recrear el degradado o si hay múltiples colores añadidos en él, y eso no es básicamente posible agregar aquí, tal vez haya un desenfoque viniendo de esta dirección, hay un desenfoque viniendo de esta dirección, cosas así Entonces sólo tienes que seguir adelante, dar clic en la capa, exportarla como un PNG y agregar ese PNG. Bien y trata de comunicar estas cosas con el cliente antes de continuar porque solo puedes decirles que es un error de código no tu problema, y no eres el que no es experto, en realidad, pero en realidad sabes cómo solucionar el error. Bien, entonces esto lo explica. Y ahora respecto a la animación de Cryptia, hay algo que debo mostrarles Que es esta animación de encabezado. Creo que esto tiene la animación que quiero mostrarles. Déjame asegurarme de que en realidad es este el indicado? Sí, este es el indicado. Entonces Geko es realmente inteligente con respecto a esto y a la forma en que hizo el diseño porque en realidad discutimos esto antes de que tendré que animar los números también Entonces básicamente, simplemente creó todo en 11, uno, dos, dos, dos, dos, tres, tres, tres, cuatro, 44. Ahora bien, hay dos formas en las que puedes recrear la animación numérica es básicamente puedes seguir adelante y simplemente copiar todos estos y ponerlos en un fotograma y luego simplemente tomarlo en tus After Effects Entonces solo convierte estas en capas de forma y luego solo desfasarlas así. Una solución. Otra solución también es bastante simple, no realmente demasiado complicada. Entonces déjame seguir adelante y mostrarte eso también. Antes que nada, echemos un vistazo a esto, y luego te mostraré la solución. El número está aquí. Después de eso, tenemos el 10561, 794 se puede ver que todo va arriba para que coincida con los números que son necesarios Bastante simple. Bien. Nada demasiado complicado. Y hay otra forma un poco atajo de hacer esto, que es, vamos a cerrar esto. Y déjame mostrarte cómo crear la animación de subida numérica también. Bien. Vamos a seguir adelante, haga clic en la capa de texto en 5,785 Bien. Ahora lo que vamos a hacer es básicamente entrar en el vamos a seguir adelante y usar nuestro panel de Efectos. Bien. Y entonces vamos a hacerlo más grande. Solo sigamos adelante y busquemos slider. ¿Bien? Ahora voy a agregar este control deslizante por aquí. Ahora podrías estar pensando, ¿cómo vamos a hacer que esto funcione? Bastante sencillo, no te preocupes, ya lo conseguimos. Y lo que voy a hacer es básicamente padre esto a mi slider. Bastante simple. Y entonces lo que tienes que hacer es básicamente agregar ronda matemática de punto. Eso es. Bien. Y si hay un error, lo que básicamente puedes hacer es hacer una captura de pantalla de esta parte porque no trabajo con demasiadas expresiones, así que puede que me equivoque esto. Puedes seguir adelante en la web y simplemente copiar y pegar esto y solo pedir arreglar esta expresión. ¿Bien? Bien, entonces necesitas agregar un valor de punto. Ahora, dice, piloto controla el valor del punto, vamos a copiarlo. Vamos a ver si esto funciona. Esto funciona. Arreglo bastante fácil. Bien. Sólo vamos a arrastrarlo. Guau. Esto funciona. Esto funciona muy bien. Ahora, digamos que nuestro número era no lo recuerdo exactamente, así que veamos aquí 5785 Bien. Hagámoslo cero. Haga clic en el fotograma clave, presione U, y consideremos que mi animación necesita ser de 1 segundo de duración, cinco, siete, 85. Derecho simple. Bien. Bastante simple. Sólo vamos a golpear en nuestro teclado. Ahora voy a tener que seguir adelante. Ahora, vamos a hacer clic derecho sobre aquí, crear formas a partir del texto. Adelante, un fotograma clave, haz lo mismo. Adelante un fotograma clave, haz lo mismo y haz esto hasta que terminemos con todos los fotogramas clave Bien, entonces estos son creados. Ahora solo voy a apagar mi capa así porque debes mantener esta capa en la composición hasta que el proyecto no esté completo porque el cliente puede solicitar que se cambie el número, así que solo puedes seguir adelante y hacer eso. Y ahora sólo voy a recortar las capas. Y ahora sólo vamos a golpear efecto pulsando E. Tenemos que eliminar estos controles deslizantes. Bien. Y creo que también hay una manera más rápida de hacer esto. Entonces déjame probar eso. A ver si funciona. No estoy muy segura de cómo se debe hacer. Así que perdóname. No, funciona. Así que sí, funciona, y entonces lo que puedes hacer es básicamente compensar los fotogramas clave como nosotros trabajando en nuestra pestaña anterior. Volvamos a los valores predeterminados y luego simplemente secuenciemos las capas así. ¿Bien? Así que vamos a tener un adelanto de nuestra animación. S, se ve muy bien. Y ahora porque solo tenemos nueve o diez capas de capas de forma, esto no va a quedar rezagado. Esto no aumentará el tamaño del archivo. Funciona muy bien. Lo he hecho varias veces. Entonces esto es algo que tuve que enseñar también. Y eso es básicamente todo. Y aparte de eso, solo hay algunas animaciones simples que también puedo mostrarles. En realidad no está pasando mucho. Solo algunas máscaras agregadas a la misma imagen, y luego las banderas básicamente están flotando. Cosas simples. Solo sigamos adelante y miremos nuestra siguiente sección. Bien, entonces la misma animación numérica. Usé la misma tarjeta en realidad de la otra animación anterior su animación, y luego solo la agregué aquí. Se puede ver que la animación de eso se agrega aquí, y acabo de sacar solo una parte de eso aquí. Entonces solo está esta línea de camino de ensueño, alguna animación básica de escalado o trazado de recorte en las líneas, entonces eso es básicamente todo. No pasa nada demasiado complicado. Bastante simple. Después de eso, tenemos esta otra animación. Cual es este. Bien, vamos a arreglar el problema aquí, así que ustedes también lo saben ahora. Después de eso, tuvimos este problema en la capa de texto. Se puede ver que aumento el tamaño de la caja porque era así un poco así. Así que solo lo aumenté mucho para solucionar el problema. Bien. Cosas simples, nada demasiado complicado. La animación también es bastante simple. Esto se ha hecho vía personaje por personaje porque no había demasiados otros elementos. Así que solo hice el texto Shaplayer y luego solo compensé todo un fotograma clave a la vez Eso es. Cosas simples. Nada demasiado complicado. Y luego solo animación a escala simple en este botón. Bien. Después de eso, tenemos esta sección seis, que es esta animación de billetera. Bastante simple hecho, solo un trazo encima de él. Ya ves que básicamente está enmascarado, ¿verdad? Básicamente, la cartera era en realidad una sola forma. Entonces acabo de borrar la parte superior, recreé eso con un trazo Por lo tanto, es posible que a veces también tenga que hacer algunas pequeñas iteraciones en el diseño Cuando estás ejecutando animación. Entonces solo hay animación simple, ¿verdad? Nada demasiado complicado otra vez. Y luego solo agrego rotación y animación de escalado por aquí. Cosas bastante simples, nada demasiado complicado. Y entonces tenemos este efecto realmente agradable con el efecto H, básicamente. Entonces, cuando esto pasa, lo que realmente está sucediendo es que este marco realmente anima. Bien, vamos a seguir adelante y echar un vistazo. Se puede ver que la opacidad básicamente va en aumento. Así que nada demasiado complicado por aquí también. Cosas simples. Muy fácil de hacer. El cursor básicamente se está animando solo solo, así que independientemente, independientemente de los demás elementos, ¿verdad? Cosas bastante simples, y eso es básicamente todo. Y en caso de que tengas curiosidad por saber cómo se ve el sitio web final, déjame mostrarte eso también ahora. Y verás lo optimizadas que están las loterías en tan solo un minuto. ¿Ves? Ahora estoy abriendo esto en modo incógnito, para que veas lo rápido que se cargó todo Las animaciones funcionan muy bien, muy bien, ¿verdad? Cosas bastante simples muy bien hechas. Ves lo hermoso que se ve todo esto, ¿verdad? Cosas simples. Y nuevamente, enorme grito a Jakafz por crear este Y fue una colaboración realmente genial. Y el porcentaje de animación en estos realmente sección también se hace de la misma manera. Lo mismo. Y si, eso es básicamente todo. Entonces eso es todo para esta clase. Nos vemos en la siguiente. 6. Conclusión: Enhorabuena por completar esta clase final. Espero que aprendiste todo lo que yo enseñé aquí. Por favor, practique y avísame si necesitas ayuda. Siempre puedes contactarme en Instagram. También puedes consultar mi LinkedIn también si necesitas alguna duda, si tienes alguna confusión, si necesitas alguna ayuda con el proyecto, comunícate A mí me encantaría ayudarlos chicos. Por favor, asegúrese de enviar algunos trabajos. Y también etiquetarme cuando creas algo realmente bonito. A mí también me encantaría revisar tu trabajo. Si hay algo nuevo por ahí para enseñar en Lottie entonces me encantaría crear otra clase Si hay algo que me perdí en las clases, por favor avísame, y tal vez voy a crear otra. Pero creo que esto lo cubre todo, y ahora estás listo para convertirte en el creador de una persona superior. Buena suerte a todos ustedes y la mejor de las suertes. Ojalá también esté enseñando otras cosas nuevas, así que estén atentos para eso. Pero Lottie ya está completa, y te deseo todo lo mejor Nos vemos en la siguiente. Cuídate. Adiós.