Guía para principiantes para crear animaciones de UI.

1. Introduccion: Hola a todos, y bienvenidos a nuestro lottiefiles tu Antes de comenzar el curso, me gustaría presentarme primero. Soy Bolt Bite y he estado arenando lottieanimations alrededor He creado más de 100 animaciones, como puedes ver aquí en mi perfil. Y soy uno de los mejores creadores en plataforma ratifica. Y también soy ganador oficial del torneo de lottiefiles Mi animación ha sido descargada más de 20 mil veces en todo el mundo. Y en este curso, te estaré enseñando a crear tu propia primera animación de Lottie y meterte en ella 2. Clase 01: qué son Lottiefiles? ¿Qué son usos?: Bienvenido a cubrir de primera clase. Bien, entonces en esta clase vamos a estar primero viendo lo que en realidad son lotieanimations y ¿por qué nos estamos molestando en aprenderlo Entonces aquí estamos en lottiefiles.com. Y como podemos ver en lo primero que vemos en la página son estados como animaciones ligeras, ligeras, escalables para tus perros y lanzamientos, sitios web y aplicaciones móviles, o apps y anuncios y redes sociales y todo. Por lo que la parte más importante es el sitio web y las aplicaciones móviles. Bien, entonces déjame decirte cómo y por qué. En primer lugar, vamos a echar un vistazo aquí cuántas grandes empresas están trabajando con animaciones de Lottie Como puedes ver aquí. ¿Qué hace realmente Lottie? Así que vamos a echar un vistazo aquí. Aquí dice el nuevo estándar de la industria. Vamos a ver. Como puedes ver, hay una animación que es formato GIF, que es de 598 KB kilobytes Y hay un Lottie sí Animación, que es 66 KB kilobytes, y hay Lottie Así que básicamente al nueve por ciento de tamaño pequeño en archivo. Entonces digamos que íbamos a crear un AP y había diez animaciones en su interior. Entonces, ¿por qué intentaríamos molestarnos y crear lottieanimations Y la razón detrás de eso es, digamos que cuando la animación es de 600 kB es así, y la multiplicamos por diez, se convierte en 6,000 Kb es, que se dividirá en 1024, porque eso es lo que equivale a un MB. Se convierte en 5.8 y b's, derecho. Así que eso es un tamaño de archivo realmente enorme que se agregará a las aplicaciones móviles. Y los desarrolladores no quieren que eso suceda. Los creadores no quieren que eso suceda, que el tamaño de archivo de las aplicaciones sea simplemente mayor debido a las animaciones. No es un enfoque realmente bueno. Y hay múltiples razones para ello. No sólo el tamaño del archivo, vamos a entrar en eso también. Entonces digamos que en vez de eso, hubo 66 animaciones de sarna, pero eran diez Por lo que esto será de sólo 660 kb, que es menor que un MB. Entonces hay aplicaciones como Duolingo y aquí se menciona un especial de Duolingo Porque Duolingo usa muchas animaciones de loterías. Si se suponía que debían usar animaciones GIF o GIF, los tamaños de las aplicaciones serán dobles o triples. Es muy importante que también lo tengamos en cuenta. Entonces, y hay múltiples ventajas de usar lottieanimations Todos, aunque también hay algunas ventajas. Y nos meteremos en eso también muy pronto. Bien, así que vamos a encender nuestro Adobe Illustrator muy rápido. Y déjame mostrarte ¿a qué me refiero exactamente con ventajas? Como puedes ver aquí, dice animaciones escalables livianas para tus aplicaciones y sitios web. Qué quiere decir con luz escalable con animaciones. Bien, entonces una Animación escalable significa básicamente, lo que significa es que yo solo te muestre muy rápido. ¿Bien? Entonces, como puedes ver aquí, hay dos tipos de imágenes, como sabrás. Uno de ellos es la imagen raster. Entonces, básicamente, ¿qué es una imagen raster? Entra en eso muy rápido también con solo pasar a la carpeta más descargada y abriremos esta colección. Hay un archivo JPEG. Arrastra eso a nuestro software. Bien, así que aquí está nuestro archivo y vamos a un lado, bien. Entonces, cuando tratamos de acercar el archivo, como puedes ver, simplemente se vuelve realmente pixelado y borroso Entonces básicamente, JPEG y PNG, todos estos formatos son de formato basado en imágenes raster. Pero hay otro formato conocido como formato vectorial, en el que acercamos el archivo. El archivo no se vuelve borroso. Ahora vas a, ¿podrías pensar que por qué sucede? En realidad, la razón detrás de esto es porque el formato vectorial funciona sobre la base de una línea de ruta entre 0.8, entre el punto a al punto B. Mientras que porque los píxeles no deudan los míos. Formato basado en vectores, píxeles determinaron las imágenes ráster que comúnmente son capturadas Bien, así que por favor tenlo en cuenta. Entonces, sí. Entonces básicamente hay ventajas. Puede haber a veces cuando va a crear animaciones para aplicaciones móviles, que se mostrarán sobre tal vez estas pantallas o tal vez pantallas enormes, o tal vez tabletas móviles. Entonces, básicamente, no tendrás que pensar darle un tamaño de archivo diferente a los clientes. Solo tendrás que darles una talla única y ellos pueden escalarla fácilmente así. Es como si estuviera escalando este. Como se puede ver, no consigue lo correcto. Pero si se trataba de una animación GIF, se difuminará y se convertirá en píxeles y una animación realmente turbia Como puedes ver aquí, esta animación se está volviendo borrosa, ¿verdad Por lo que no es realmente manera eficiente. Y lo sorprendente es que el tamaño más grande es para el formato GIF, que debería ser menor, ¿verdad? Pero no es así. ¿Por qué sucede? En realidad, la razón detrás de eso es que la animación de Lottie es básicamente un archivo de acuerdo Se trata básicamente de un archivo JSON JavaScript. Así que básicamente convierte la animación en codificación. Y así es como funcionan las animaciones de loterías. Entonces, básicamente, el formato vectorial se está moviendo a través de la codificación. Y en la siguiente clase aprenderemos lotiefiles se pueden integrar y cómo podemos utilizarlos para nuestras ventajas 3. Clase 02: utilidad de Lottiefiles. Herramientas de creación de Lottie: Bien, estamos de vuelta otra vez y vamos a entrar en la pestaña de integración. Y vamos a golpear Explorar todo lote Integraciones y plug-ins simplemente su flujo de trabajo de diseño de movimiento Bien, lo siento, simplifique su flujo de trabajo de diseño de movimiento. Así que vamos a desplazarnos hacia abajo y ver lo que la Lottie tiene para ofrecer Lottie Integrations y Begginer's for son tus herramientas favoritas for Bien, entonces echemos un vistazo. Bien, así como pueden ver, hay tantas herramientas que se utilizan para crear animaciones de loterías. Y en este curso estaremos usando Adobe After Effects para crear lottieanimations Ahora puede preguntarme eso ¿por qué no estamos usando ningún otro software? Y las razones son realmente muy claras y te diré cuáles son esas razones ahora, vamos es abrir cada herramienta dentro de una pestaña diferente. Y vamos a compararlos muy rápidamente. Bien, así que dejemos Adobe After Effects por ahora. Y esto es para cualquier mellas, poderosas animaciones de lottiedentro de Figma, creemos que animaciones UI ¿ Deberíamos crear donde diseñas no En primer lugar, estoy totalmente en desacuerdo con esta opinión porque ese diseño después tiene un propósito diferente y el software de animación tiene un propósito diferente. El software de diseños no puede hacer ambas tareas de manera muy intuitiva. Y no lo recomiendo porque los estándares de la industria no funcionan así. Las grandes empresas no funcionan así. Y los profesionales no trabajan así. Debido a que los animadores expertos utilizarán herramientas de animación expertas para crear animaciones realmente buenas, no usarán Herramientas de diseño Así que por favor ten en cuenta que estoy tratando de no usar plugins de Figma para crear lottieanimations Simplemente no es útil. Y realmente también puedes usar Figma ahora para crear animaciones de lottietambién Pero en realidad no lo recomiendo también porque no hay mucha libertad creativa a la hora de facilitar los fotogramas clave Porque Figma no ofrece I'm Speed Graph o gráficas de valores y básicamente proporciona una línea de curva de línea base Entonces básicamente, eso es lo que puedes controlar. No tienes libertad creativa sobre cada fotograma clave y no puedes crear movimientos complejos con él. Así que por favor tenlo en cuenta. Dejemos eso fuera de la subasta. Potente software de animación 2D para Mac y Windows. Ahora dice, empieza, es gratis. Ahora vamos a la fijación de precios. Dólares de sección por mes. Facturar anualmente. Los precios no incluyen impuestos mojados y aplicables y descargan gratis y gratis para siempre no se requiere guía de crédito Entonces sí, solo ve aprendiendo. Bien, olvídalo como es ir al diseño de características, iluminación en tiempo real para que podamos ver. Lo de Bertrand es que te vas a quedar enfocado en ser creativo Fácil versionado, bien, eso es bueno. Programa creativo. Eso no agrega ningún valor, creo. flujo de trabajo de extremo a extremo se mueve sin problemas de las ilustraciones a la animación. Y vamos a llegar a crear mejor desde el suelo de características nativas. Controlamos manguera de goma conecta comparte paletas de colores, magia, envejecimiento, animación de texto, duplicado, entrada de datos Se prueba el experto de Lottie. Entonces estaremos pagando dinero por los seguimientos de Dynamics, quad tree Bien, Entonces ahí, hay algunas características realmente buenas. Podemos agregar algunos controles de plataforma y también podemos usar manguera de goma. Pero hay un inconveniente en usar el software. Habrá momentos en los que tendrás que proporcionar archivos fuente a los clientes. Y como todos sabemos que Cavalry actualmente no es el software más famoso que existe para crear animaciones de interfaz Pero Adobe After Effects tiene una muy buena franquicia de crear múltiples cosas. También. Otra cosa a tener en cuenta es que por favor ten en cuenta que a veces los clientes te pedirán les des el archivo fuente del proyecto. Y cuando le dices que has creado en caballería, y es posible que no puedan editarlo muy bien Y se basarán en cuando tengan que adquirir una suscripción extra. Porque el adobe ha sido comprado por miles o millones de personas en todo el mundo. Por lo que no molestará al cliente editarlos. O tal vez quieran pedirle a sus amigos que lo editen o tal vez contratar a alguien más. Y lo más probable es que otros creadores también tengan más posibilidades de tener una suscripción de Adobe After Effects en lugar de tener una suscripción para caballería Entonces estas son las razones por favor trate de tener en cuenta que estaremos ofreciendo servicios a los clientes. Así que por favor tenlo en cuenta. Y también una razón enorme. Otra razón es que también puedes hacer múltiples tipos de otros trabajos en After Effects también. Vas a crear videos explicativos. Se pueden realizar múltiples tipos de trabajo. Pero en caballería, no puedes hacer esas cosas. ¿Bien? Entonces estará limitando tu creatividad de esa manera. Bien, así que avancemos para favorecer o mover el diseño al alcance. Como puedes ver, tampoco te proporciona una gráfica de valores. Básicamente, tendrás que seleccionar cada fotograma clave individual y luego animar, es fácil. Así que básicamente puedes seleccionar dos fotogramas clave y luego facilitarlos. Tendrás que trabajar en ellos por separado, o simplemente puedes usar la opción de ambos desde aquí como puedes ver, para crear la animación. Pero no creo que sea realmente útil porque vas a usar múltiples propiedades y replicar. No hay realmente rápido como podemos hacer comparativamente en Adobe After Effects Hay múltiples plug-ins que After Effects tienen para ofrecer, pero estas herramientas no los ofrecen también Además, echemos un vistazo a los precios. Hay $12 espermatozoides por mes factura anual, solo a 56. Dfp es exportación. Y también podrás exportar Lottie gratis también Y la animación puede ser de hasta treinta segundos. Treinta segundos son una línea de tiempo realmente genial. Y realmente puedes intentar usar esta herramienta. Pero nuevamente, el problema del archivo fuente también estará ahí. Si el cliente te lo pide, es posible que no puedas darle una respuesta feliz. Así que por favor tenlo en cuenta. Puedes seguir adelante y usarlo. Pero como puedes ver que solo hay que echar un vistazo a la plataforma de aprendizaje. Como se puede ver que no hay muchas fuentes disponibles. También puedes ver miles de tutoriales en YouTube para After Effects. Por lo que habrá más, una herramienta más accesible y fácil para trabajar. En mi opinión, es que recomendaría encarecidamente usar After Effects seguro. Por sus enormes ventajas. You Effects Animación Para diseñadores y según glucurónido, bien, Entonces este se llama flow, pero tiene algunos El número uno es el diseño de movimiento perfeccionado, crear animaciones complejas y elementos interactivos usando capas y propiedades, no fotogramas clave Entonces básicamente no vamos a estar agregando fotogramas clave. Estaremos usando codificación. Pero ese es un trabajo de desarrollador, no un trabajo de animadores, ¿verdad? Así que vamos a saltarlo ya. Y esta herramienta se llama Black Sinemet. Um, realmente no creo que vaya a ofrecer lo que estamos buscando porque la limitación es sólo dar animaciones. Y esa realmente no es una buena manera de elegir una más suave solo porque solo podemos crear, dar animaciones a partir de ella o lottieanimaciones Entonces sí, no lo creo porque habrá momentos en los que los clientes te pedirán crear algunas animaciones realmente complejas. Habrá momentos el cliente puede pedirte algunas cosas diferentes para hacer que podrías tener un momento complicado hacer esta oficina que hacerlo en Adobe After Effects. Y aprender Adobe After Effects es realmente útil para ti u otras habilidades también. Porque lo serás, podrás hacer múltiples tipos de proyectos si has aprendido Adobe After Effects. Entonces sí, básicamente está proporcionando un bono como hacer animaciones de Lottie dentro de After Effects también Entonces, sí, definitivamente lo recomendaría, esos definitivamente recomendaré After Effects. Vamos a seguir adelante y echar un vistazo al animador de Cu. Como puedes ver, cómo ir el diseño de movimiento para el flujo de trabajo de tu equipo. Como puedes ver aquí, básicamente tienes que agregar comandos true o false. Entonces quiero decir, en realidad no es tan difícil, pero sigue siendo un poco complicado de usar si eres diseñador de movimiento porque no eres un codificador, ¿verdad Entonces, sí, en realidad no recomiendo este también. Hay en Inkscape y tiene algún problema realmente enorme porque ahora como puedes ver aquí, hay un video tutorial sobre cómo usar esta extensión que ya está, no hay un valor para Dorian Entonces no hay básicamente una comunidad enorme a su alrededor, que te enseñará a hacer las cosas. Bien, entonces el siguiente es jitter. Jitter básicamente ofrece muchas plantillas que puedes usar para crear animaciones Pero cuando el cliente acude a ti y te pide que crees animaciones personalizadas para ellos, podrías meterte en problemas. Entonces creo que deberías poder pensar fuera la caja y crear algo increíble por ti mismo. Entonces, sí, no recomiendo esto también. Esto es seguir adelante y comprobar la forma de T. Y ahora la clave aquí es realmente inútil porque compra en la Mac App Store, el mayor problema es solo la Mac App Store. Otro número sólo está disponible en ciertos países. Por lo que hay posibilidades de que tu cliente pueda estar en uno de esos países donde no está permitido. Así que no es bueno en absoluto. Bien, así que dejémoslo fuera de discusión. Y adobe Animate solo se usa principalmente para la animación fotograma a fotograma Y queremos estar haciendo eso en este curso. Entonces tal vez sea un tema para otro día o tal vez cuando estás creando algo similar a animar, estás tratando de crear algunas animaciones realmente complejas con las que no te puedes hacer en Adobe After Effects Sólo entonces necesitarás esto para que funcione. ¿Bien? Entonces, y también por favor ten en cuenta que hay tantas Integraciones, pero solo lotiefiles han creado una página dedicada Entonces debe haber una razón para eso, ¿verdad? Como puedes ver, crea una animación impresionante con el plug-in lottiefiles para Adobe After Effects También han creado un plugin dedicado para After Effects. Así que básicamente también prefieren que sus usuarios usen nosotros After Effects para crear animaciones. Así que básicamente puedes probar tus animaciones dentro de After Effects sin siquiera subirlas , lo cual es realmente bueno Entonces hay razones para, para hacer esto dentro de After Effects, ¿bien? Así que básicamente ahora solo tienes que descargar un archivo de plugin y luego simplemente puedes instalarlo muy rápido. Ya tengo instalado este plugin, así que no voy a simplemente volver a instalarlo. Así que me pondré en contacto con usted nuevamente en la siguiente clase en la que discutiremos las características compatibles y aprenderemos a comenzar 4. Clase 03: sitio web para diseños. Arreglar obras de arte.: Bien, estamos de vuelta otra vez. Y como pueden ver, hay un sitio web abierto en mi pantalla. Y se llama ilustraciones gratuitas XYZ. Y aquí hay otro sitio web que recomiendo encarecidamente. Es gratis take.com. Me gustaría que te registres en el sitio web. Es yo recomendaría que compres la suscripción y si no puedes permitirte eso, simplemente siempre puedes hacer clic en el filtro gratuito. Y el tercer sitio web es vector para free.com. Puedes usar estos tres sitios web si no puedes crear tus propios diseños. Porque calificar tus propios diseños realmente buenos es, requiere muchos años de experiencia y tomará tiempo aprender a dibujar esos. Así que por favor tenlo en cuenta. En primer lugar. Y diseñar logotipos o iconos o ilustraciones es otro Arte en sí mismo, que requiere horas de horas de esfuerzo y años de trabajo para hacerse. Entonces estaremos descargando nuestros archivos de diseño y luego los estaremos animando. Entonces, cuando estés descargando un archivo, ten en cuenta que solo puedes usar tres formatos. Uno de ellos es AI, el segundo es EPS y el tercero es SVG. Por favor, no utilice ningún otro formato porque pueden contener elementos de imagen ráster, tal como los hemos discutido antes. Así que por favor tenlo en cuenta que solo vamos a usar EPS, AI o SHA-512 Ahora intenta descargar Figma o GIF o estos archivos porque realmente no pueden funcionar correctamente con lottieanimations Y el propósito de escalar las animaciones se arruina porque los GIF DJ peg no son capaces de ser un escalado Y hay algunas formas en las que podemos importarlas a nuestras animaciones de loterías. Pero entonces los tamaños de los archivos aumentarán tanto y no habrá ningún propósito de crear animaciones de Lottie Entonces, por favor, evita eso. ¿Bien? Entonces sí, solo eche un vistazo a su alrededor y vea para qué podemos apuntarlo tal aquí que deberíamos cualquier mitad de año. Al igual que hay múltiples resultados como podemos ver aquí. Así que vamos a elegir algo de aquí. Bien, así que me gustó mucho este. Estos son iconos realmente planos y me gustaría descargar este. Vamos a descargarlo gratis. Abra el archivo. Habrá tres formatos dentro del archivo. Lo más probable es que haya jetpack, es decir EPS, y hay IA Entonces hemos abierto el archivo AI. Estaremos seleccionando esta y ahora la copiaremos y abriremos una separada, incómoda. Su tamaño es de 500.500 píxeles. Bien, entonces sí, estamos haciendo zoom un poco y vamos a desagrupar Por favor, ten en cuenta que tenemos que organizar sobre obras de arte en Illustrator antes animar cualquier cosa. Base dada mente. Así que vamos a ahora separar las capas en el fondo se separa relicario izquierdista presionando el control al término es del También puedes separarlo. Si quieres separar esto. Si quieres alguna hazlo por separado. Y ahora Después de esta forma es click tener una selección. La capa está seleccionada aquí Estoy desbloqueando el círculo púrpura ahora Entonces solo eliges esta capa y golpeas estas tres líneas de hamburguesas. Después bajaremos a esta opción Liberar a la secuencia de capas. Lo que hace es básicamente crear cada elemento en una capa separada. Entonces básicamente cada elemento está en una capa separada. Ahora, simplemente lo sacaremos de la capa padre. Entonces todo está por sí solo. Bien, borramos esa capa vacía. Básicamente. Ahora tenemos nuestro pulgar todo en diferentes capas y ahora podemos animarlo. Además, tenga en cuenta que no podemos utilizar obras de arte realmente complejas. Solo podemos usar colores de relleno simples y formas. No se pueden usar efectos realmente complejos como 3D o cualquier otro gradiente de libertad Porque básicamente estaremos convirtiendo estas capas en formas dentro de Adobe After Effects. Sin embargo te metes en eso en un minuto. Pero sin embargo, así es como tienes que organizar tu obra de arte. Y ahora estamos listos para animar esto. Bien, entonces sabremos, guarda nuestro archivo. Y debería estar en el formato AAAI. Por favor, tenlo en cuenta. Intenta no usar sag porque SVG no se puede importar como comp Vamos a guardarlo nombrándolo como botón y guardarlo. Bien, entonces se ha guardado el archivo. Ahora, pasaremos a After Effects e iniciaremos la animación 5. Clase 04: características compatibles. Creación de animación.: Bien, estamos de vuelta otra vez. Ahora estaremos animando nuestro diseño. Así que vamos a meternos en ello. Pero antes de comenzar cualquier animación, he instalado el plug-in lottiefiles y también he iniciado sesión en Puedes hacerlo en tan solo clicando aquí. Habrá un botón de inicio de sesión y luego solo tienes que iniciar sesión en el navegador. Entonces, antes de entrar en cualquier reunión, el diseño, hay algunas cosas a tener en cuenta antes de que hagamos eso, y simplemente te guiaré a través de ellas ahora. En primer lugar, como te dije que estas Animaciones son básicamente loteslas animaciones son básicamente sí y animaciones Así que básicamente están codificando archivos, ¿de acuerdo? Entonces hay algunas restricciones y hay algunas cosas que no podemos hacer. ¿Y qué son esas cosas? Bueno, hay algunas características realmente sorprendentes de Adobe After Effects que no podemos usar en absoluto. Y podrías preguntarme que ¿cuáles son esas características? Bueno, esas características son menos es crear un comp y asociar hombres. Esto es crear un rectángulo. O tal vez, Bien, entonces lo que no podemos usar es simplemente entrar en vigor y menos. Déjame mostrarte que no podemos perder ninguno de estos efectos en absoluto. En primer lugar, por favor tenga en cuenta que no podemos utilizar ninguno de estos Efectos. Ahora bien, esto podría decepcionarte, pero hay algunas restricciones porque el JavaScript no sabe que hay Efectos dentro de After Effects Eso debido a que estos efectos no están dentro de la codificación, es básicamente una creación de Adobe After Effects. Estos no son un registro universal del lenguaje JavaScript. ¿Bien? Entonces básicamente cuando se está reproduciendo la animación, como aquí en este sitio web, no se sabe. El JavaScript no sabe que ha sido creado en After Effects o en otro lugar. No le importa. Hay ciertas reglas de cada idioma que tenemos que seguir. Las reglas son que no podemos usar un Effects de Adobe After Effects. Así que vamos a echar un vistazo qué características podemos elegir y qué características podemos usar. Y también por favor ten en cuenta si vas a estar realmente trabajando como profesional, por favor intenta no usar algunas características que solo tienen una cruz y hay cinco ticks. Por favor, use solo funciones que solo tengan marcas verdes en todo el gráfico. Ahora, ¿por qué estoy diciendo eso? Porque ha habido a veces y lo he presenciado yo mismo, que he visto muchas animaciones en la plataforma lottieanimations, que se ven increíblemente bien en PC o en la web cuando las vi en mi computadora Pero cuando inicio sesión en mi aplicación móvil y trato de previsualizar esas animaciones, simplemente no funcionan porque la gente usa, a veces, a veces usan tapetes alfa que no podemos usar y algunos tipos de características adicionales como rutas de desplazamiento u otras cosas que funcionan en Windows pero no funcionan en iOS o Android. Así que por favor intenta no hacer eso porque, porque cuando estás creando animaciones para personas o tus clientes, el usuario puede estar en cualquier tipo de dispositivo. Entonces hay que tenerlo en cuenta primero. Estás resolviendo sus problemas. No quieres que piensen que cómo esta ayuda aún creó esta animación, que funciona en alguna parte, pero no funciona en otro lugar. Y los desarrolladores también pensarán que no eres profesional porque no sabes cómo hacer el trabajo sin ningún error. Así que por favor tenlo en cuenta. Utilice únicamente las funciones que están rentando. Ahora hay excepciones, pero por favor, por favor 99% del tiempo, solo use permitir a los profesores en cada tipo de sistema. Bien. Entonces, ¿capas de forma? Sí. Solo echa un vistazo. Todas las formas están permitidas. Las en rectángulos angulados. Poliéster, poliéster no está permitido. Entonces nuestra deuda, podemos agrupar las formas, así que eso es bueno. No podemos usar rutas de recorte evitadas de repetidor individualmente. En realidad, no lo sé. Realmente no he probado ningún problema sobre el uso de Trim Paths cuando los uso simultáneamente. Así que trata de evitar tal vez usarlos en forma individual. Ahora bien, no estoy muy segura de cómo afecta, porque he intentado usar muchos dimes print que está en mis animaciones, pero siempre funcionan perfectamente y los he probado en Windows también Así que vamos a comprobar ahora falla. Podemos animar la cara en opacidad de color, regla de relleno, gradiente radial o gradiente lineal Entonces estos son todos perfectos. Pero no podemos usar ningún gradiente de libertad porque el oxígeno no está disponible dentro de Adobe After Effects. Así que ten en cuenta que no puedes usar gradientes de Freedom dentro de Adobe Illustrator Bien, así que vamos a entrar en trazos. Podemos usar todo en un trazo o multijunta y uniones Online y tapas de línea con opacidad y degradados y guiones Transformar. No se permite la orientación automática y realmente no se puede sesgar la animación Entonces, básicamente, el sesgo no es realmente una herramienta útil también. Ni siquiera realmente hacemos eso. Así que solo evitemos eso y no orientaremos automáticamente el archivo ni nuestras capas. Vamos a animar la posición por separado. X e Y también está permitido. escala, la rotación, la opacidad del punto de anclaje, la crianza de los hijos, crianza de los hijos es muy, muy útil a la hora de animar cosas Y es realmente útil cuando estás creando animación de personajes. Por lo que esto será realmente útil en las clases futuras. Después de eso, hay interpolaciones de lo que hace intro, interpolación En realidad, la interpolación significa que hay múltiples tipos de fotogramas clave dentro de After Ahora, ¿cuáles son esos fotogramas clave como experiencia esos fotogramas clave Entonces estos son básicamente fotogramas clave lineales en este momento que estamos viendo Cuando golpeamos F9, entonces estos se convierten en fotogramas clave bezier. Y cuando golpeamos el control, o estos se convierten en fotogramas clave de retención Y cuando golpeamos solo control-clic, estos se convierten en fotogramas clave de velocidad continua Así que básicamente todos los tipos de fotogramas clave están permitidos dentro de lottieanimations Esa es la razón por la que me encanta After Effects y quiero usarlo porque ahora realmente podemos ajustar esto como nos guste. Y no habrá problemas en lotoanimaciones. Y también podemos cambiar la gráfica también. También podemos editar el valor en la gráfica de valores. Obviamente esta es una posición, por lo que aquí tendremos que separar las dimensiones antes de animar eso ¿Bien? Entonces sí, definitivamente podemos hacer esto como, entonces. Estas son las cantidades que After Effects tiene para ofrecernos. Así que de nuevo, sólo tienes que seguir adelante y revisar las máscaras. Las máscaras están permitidas pero solo para las características. Restar, agregar Opacidad de máscara y ruta de máscara. Entonces, ¿qué significa eso? ¿Cuándo creamos una forma? Como saben, podemos crear una máscara a partir de aquí, pero usando esta herramienta. Entonces básicamente podemos animar esta máscara que así sea. Podemos animar este para crear básicamente animación de estilo mate alfa En lugar de usar Alpha Matte, intenta usar máscaras. Por favor, por favor, no intentes usar tapetes alfa porque crean problemas realmente desordenados Así podremos animar la capacidad de la máscara y usar la opción sumar y restar en Next A partir de aquí, vamos a usar el resto solo sumar y restar Así que por favor tenlo en cuenta. Sigamos adelante y comprobemos la mezcla. Como puedes ver, no podemos usar ninguno de ellos anuncios porque hay algunos cruzados o hay algunos signos de interrogación. Así que dejemos el luma mate fuera de la opción y Luma Inverted Matte también fuera de la opción en el alfabeto y el mate invertido alfa están disponibles, pero solo en aplicaciones móviles Por lo que los usuarios tendrán problemas cuando los usarás. Tú, cuando los usuarios podrán previsualizar tus animaciones en Windows o cualquier otro lienzos web Así que de nuevo, sigamos adelante y revisemos el Mucho, pero está permitido en todas partes en Windows, pero no en el iOS. Así que simplemente no utilicemos esos efectos de capa. Entonces, básicamente, los efectos de capa, solo están disponibles para animaciones web, pero no en Windows o en iOS y Android. Así que no los usaremos también porque podrías crear animaciones para aplicaciones móviles en el futuro. Y no es un buen hábito llegar a usar efectos de capa. Y después de eso, hay TXT para texto. Me gustaría darte un solo consejo y es que por favor convierte tu texto en capas de forma. Eso es. Intenta no hacer nada más con tu texto o va a crear o causar problemas. Así que crea tu texto, finalízalo y luego al final convertido en dicha La dicha funciona en todas partes. También los he visto funcionar en iOS y Windows. Entonces tal vez si se convierten mediante la conexión de lo que causan problema, pero si los convierte manualmente, entonces no causarán ningún problema Aparte de eso hay, hay algunas otras características que son expresiones. Las expresiones no están permitidas. Elipse, el truco pre-comp entra te dará unos beneficios realmente enormes Después combinando una escena complicada en conjunto. Entonces esa es una muy buena noticia. Estoy tratando de estirar realmente no es necesario porque Deberías crear la animación de la manera en que debería crearse, no solo crearla en 1 s y luego golpearla mucho tiempo, poner eso fuera de la opción. Tampoco se permite la reprogramación de tiempo. Así que vamos a escapar de sus dos marcadores. No he usado ninguno de ellos en ningún momento, pero tal vez habrá un diamante. Voy a estar usándolos. Entonces sí Bien, entonces ahora una cosa a tener en cuenta, que es realmente importante es que cada forma debe ser una forma vectorial. Como hemos comentado antes, que estas animaciones son vectoriales escalables. Entonces, para poder crear una animación de Lottie sin ningún falso, es muy importante que cualesquiera que sean las capas que vayas a usar, tengan una estrella como esta en ellas. Básicamente lo que significa esta estrella es que la capa es un vector completo, ¿bien? Entonces básicamente es una capa de forma. Así que por favor ten en cuenta que esta estrella está disponible o tu animación tendrá problemas. Ahora, antes de comenzar la animación, hubo un pequeño problema que noté en el archivo. El archivo era básicamente un gradiente lineal. Pero luego convertimos un degradado en capas de forma dentro de After Effects. En realidad no funcionan bien. Se vuelven de color gris y no logra cambiar el color. Entonces básicamente solo tendremos que usar colores planos por ahora. En esta clase, solo usaremos colores planos. También hay formas de utilizar el gradiente, pero requiere algunos complementos complejos y es realmente complejo de explicar. Y eso será demasiado para esta clase de principiante, pero definitivamente lo cubriremos en las próximas clases anticipadas. Así que sólo voy a cambiar el color a gordo. Eso es. Así que ahora solo vamos a importar este botón a Adobe After Effects. Entonces, cuando estés importando la pieza de trabajo, ten en cuenta que estaremos usando Composición, no tiempo de metraje, sino que estaremos usando la opción de descomposición. Y elegiremos el tamaño de la capa y golpearemos. Bien, y ahora vamos a crear una nueva columna. Nosotros le daremos el nombre. Animación. Botón. Presiona Enter, y solo es de 500 en 500 píxeles. Al igual que nuestro ADN. Ahora entraremos en nuestra comp de diseño y copiaremos todas las capas presionando Control C, y lo pegaremos aquí, control V, donde cierras la comp de diseño. Ahora seleccionaremos todas estas capas, y como sabemos, tiene que haber una estrella aquí mismo. Así que vamos a pasar por esta cuadrícula de opciones y vamos a Crear formas a partir de la capa vectorial. ¿Bien? Así que solo por esta camarilla, hemos convertido sobre capas en capas vectoriales Entonces eliminaremos las capas de Illustrator. Y ahora antes de animar algo, simplemente renombramos las superposiciones El de abajo es círculo. El del medio es muñeca, yo lo llamaré. Y el superior es BOM. ¿Bien? Así que hay alguien alguna vez en círculo y nuestras manos por separado. Nuestra animación se verá más natural e interesante. Vamos a acercar un poco y sólo voy a seguir adelante e ir al sexto fotograma clave Crearé otro fotograma clave e iré al número diez, y volveré a crear un fotograma clave Ahora bien, esto va a poder encontrar una posición y nuestra estrella no debería ser de cero. ¿Bien? Entonces en el medio uno debería haber una posición de sobreimpulso. Y solo seleccionaré todos estos tres y los aliviaré muy rápido y cómo se ve. Lo suficientemente bueno. Y ahora tengo riesgos médicos y palma y quiero controlarlos como si fueran de una sola capa. Pero no puedo hacer eso ahora mismo. Entonces, ¿cómo vamos a hacer eso? Si queremos hacer esto, solo sigo adelante y creo un objeto nulo. cual es algo muy sencillo dentro de After Effects si has usado ya dado no. Voy a renombrarle este y llamarlo mano CTRL C. Ctrl básicamente significa Y cuando estamos amañando personajes, básicamente este es el universal Soy códigos usados para controladores. Y voy a emparejar y ambas capas a este controlador que he creado en la muñeca. Bien, entonces ahora está patentado. Entonces ahora solo anima este controlador. Voy a admitir su rotación y escala. Así que vamos a abrir estas dos propiedades y voy a crear y definir tus fotogramas clave He creado mi primer fotograma clave que también voy a crear el sobreimpulso de posiciones medio Voy a añadir más rotación por tal vez diez. Y una posición de partida podría ser desde arriba, creo que entrará en el círculo golpeando de golpe Apretando el valor -45 grados. Esto se irá escalando a cero. Empujará hasta el 110% la báscula, y voy a usar todas estas Así es como se ve. Perfecto. Ahora no quiero que todos los elementos vengan al mismo tiempo. Entonces quiero agregar algo de seguimiento tal vez. Y quiero agregar alguna brecha entre la diferencia. Bien. Entonces antes de hacer eso, me gustaría primero decirte que cada vez que estés creando animaciones para tu portafolio, por favor ten en cuenta que estás creando esas animaciones en loops perfectos, igual que esta que he creado. Y en mi, en mi perfil, tal vez hay una o dos animaciones que no son loop perfecto. Pero he creado 100 para animaciones en total, que no son Perfil. Y cientos de ellos lo son. Estoy absolutamente seguro de que cientos de ellos son bucles absolutamente perfectos. Entonces, cuando estés creando tus animaciones para tu portafolio, ten en cuenta que será mejor crear loops perfectos porque la gente podrá usarlo más fácilmente que. Entonces, vamos a crear nuestros fotogramas clave. Cerraremos nuestro bucle aquí porque no debería haber alguna brecha después de que se complete la animación. Y ahora no debería volver atrás. Bien, entonces tal vez lo llevemos aún más lejos para que todo el intervalo sea de 1 s, y la Animación se cierre a las 2 s completas. Entonces vamos a seguir adelante y cuatro fotogramas clave, 1234. Vamos a copiar estos fotogramas clave uno por uno copiar y pegar Control C y Control V. Y voy a Entonces Q filma desde aquí. Y voy a pegar todos estos uno por uno también. ¿Bien? Entonces ahora nuestra animación es Creativa a la perfección. Ahora solo agreguemos algunos. Bien, Entonces como puedes ver, sumando algo de gap, realmente agrega tanto efecto. Entonces básicamente hace las cosas más alineadas y claras. Y el rastreo realmente funciona bien. Ese elemento viene tras otro. Entonces tiene, realmente tiene sentido. Bien, entonces parece un desastre. Cuando el círculo aparece en la pantalla y aparece el botón Me gusta, se ve perfecto. Pero entonces, ¿cuándo baja el círculo? El término grande se ve raro. Creo que será mejor si la lengua va primero. Entonces acabo de traerlo a referencia de vuelta y están en el mismo estado. Así que solo traigo estos dos fotogramas clave, incluso dos fotogramas clave Por lo que habrá que darles los EU de cada lado. Entonces ahora solo tienes un bucle. ¿Bien? Entonces ahora puedes ver que se ve mucho, mucho mejor, ¿verdad? Bien, así que mantengamos nuestro encabezado en 1 s y 23 fotogramas clave y golpeemos N. Y ahora este es el bucle perfecto de 2 s. Como puedes ver, o la animación se ve perfecta. Ahora es el momento de exportar nuestra animación en formato Lottie. Antes de hacer eso, solo vamos a observar las características del plugin lottiefiles simplemente actualizaremos este botón Y se siente a todas nuestras columnas. Todavía no estoy seguro decomp, que está abierto aquí, mostrará todas las columnas que están disponibles dentro de un proyecto Así que por favor tenlo en cuenta. Ahora nuestro botón de animación comp es el que tiene sobre animación. Así que vamos a seguir adelante y hacer clic en el botón Configuración. La primera opción son los metadatos de Lottie. No nos importa ahí. Entonces dejemos que haya una opción de expresión. Como saben, no podemos usar expresiones, pero hay una opción que podemos usar expresión luego convertirlas en fotogramas clave Pero va a aumentar por encima de loteojos de los archivos. Entonces lo cual no queremos hacer. Después de eso hay activos. Al usar la opción assets, podemos incluir imágenes dentro de una animación de Lottie, pero no queremos usar eso porque las imágenes raster no son realmente algo bueno para las animaciones de lottieanimations Hay algunas excepciones, pero sólo cuando llegue el momento, usaremos sólo cuando llegue el momento. Entonces ese no será el caso en 99% de posibilidades. Así que dejemos eso y seleccionemos para exportar capas ocultas. No hay capas ocultas. Las capas saben que no hay expresiones selectivas están apuntando a composiciones externas No, no son tan antiguas y golpean Guardar Ahora vamos a seguir adelante y dar clic en la flecha. Y como puedes ver, nuestra animación se ve perfecta. Y hay un botón de descarga, bien, debajo de eso, podemos ahorrar sobre el espacio de trabajo de Animación. Tienes que seguir adelante y crear un espacio de trabajo y luego puedes presionar Subir y la animación se cargará en él. Bien, entonces nuestra animación ya está cargada. Pero cuando bajamos y echamos un vistazo aquí, como pueden ver, sobre animación es de sólo 5.8 kb. Y la oscura Lottie tallas 1.8 Kb es realmente increíble. ¿Bien? Así podemos descargar sobre animación haciendo clic en este botón en el formato JSON. Y podemos enviar esto al cliente descargándolo desde aquí. A lo mejor si se trataba de un proyecto cliente. Después de que uno bajara, hay una función de soporte Jaeger, como podemos ver, no se encontró ningún problema Es realmente una buena noticia porque solo hemos utilizado los vencedores permitidos por las animaciones de lottiefiles Entonces por eso no hay temas. Bien, solíamos tener características. Como puedes ver aquí , te mostrará todo. Pero usamos solo las características que son mucho ruidosas. Entonces eso es realmente genial. Esta es la razón por la que te dije que solo usaras las funciones que están permitidas por lottiefiles Y a continuación está la gráfica aleatoria, que nunca he usado. Y no sé lo que significa en realidad, porque no es quizá más trabajo de desarrollador. Y por debajo de eso hay color de fondo que podemos cambiar, pero absolutamente no, no vamos a cambiar porque nuestra animación debe ser dormitorios transparentes para que la gente pueda usarlos en cualquier lugar que quiera sin meterse con el fondo Y la transferencia Begginer's les permitirá usarlo muy fácilmente en los sitios web y Entonces básicamente, incluso cuando ese miedo las animaciones deberían ser fondos transparentes. Solo sigamos adelante en nuestro sitio web, nuestras animaciones públicas. Y esto va a otra clase. Simplemente actualice nuestra página. Y como se puede ver por encima de la animación está aquí mismo. Bien, entonces aquí hay algunas características que podemos usar. Realmente podemos cambiar el color, también podemos crear colores de dormitorio Podemos habilitar como hotlinks. Entonces básicamente, como dijiste, esta fue una animación exclusiva que creaste solo para tu amigo. Vas a querer mostrarle esto al mundo. Simplemente habilitas esto ya que están limpias. Y luego copiarás enlace desde aquí y que aparecerá. De esta manera. También puedes usar esto desde aquí y copiar este código. Y puedes simplemente enviar este código a tu amigo desarrollador. Y podrán añadir fácilmente esto en su efecto. Entonces si lo hacemos, Tú no quieres hacer eso. A lo mejor quieres subir esto al público. Puedes hacerlo pulsando el botón de compartir y venir a publicar en la comunidad. Y puedes golpear publicar. Y desde aquí puedes agregar un título tal vez como botón Me gusta. Y luego puedes subir tu primer archivo After, que no necesitas. Y luego después de eso hay etiquetas. Puede que tenga suerte. Tal vez como tal vez bastón, tal vez animación, tal vez bucle. Por lo que estos aumentarán las posibilidades de que descarguen tus animaciones de loterías Así podrás agregar tantos como quieras, tal vez Lottie plug-in para Adobe After Effects espacialmente que etiquetaremos qué herramientas hemos utilizado Usaremos Adobe After Effects porque también lo hemos usado. También puedes usar Illustrator. Si hay Illustrator, estas opciones, ahora no las hay. Así que vamos a dormir ahí. Escribiremos aquí una descripción de nuestra animación, que es la animación de un botón Me gusta. Y vamos a golpear los lineamientos confirmados y podremos publicar, tener Animación. Y así es como puedes crear tus propias animaciones de loterías. Y te deseo lo mejor para crear tu propia primera animación de Lottie y publicarlas y compartirlas con una pelota y empezar a llamar algo de atención y crear un portafolio realmente bueno. Por favor, siéntete libre de etiquetarme cuando crees tus primeras animaciones, Gagne en las redes sociales y mi perfil será Bolt Por lo que estoy deseando criticar la obra. Y por favor no te desanimes pensando que mi trabajo es realmente increíble Ten en cuenta que estas son animaciones de coleccionista y estas en realidad requerían mucho más tiempo y esfuerzo para hacerlo. Estas animaciones requieren de cuatro a 5 h dentro de After Effects, hay múltiples capas, así que no fue una clase adecuada para enseñar tanto trabajo, pero definitivamente estaré trayendo clase más avanzada en que estaré enseñando estas cosas. Y no tienes que preocuparte por eso. Estarán disponibles realmente muy pronto. Y tal vez puedas seguir adelante y practicar mientras tanto con los íconos más simples, más simples, igual que yo. Así que a la gente le encantan estas animaciones también. Y estos también se han descargado tanto tiempo. Hay 15 likes en mi animación y tiene, todos estos se han descargado más de 100 veces o 50 veces más. Ten algo de fe y empieza a animar de cosas. Y te veré de verdad Muy pronto. 6. Mensaje final: Hola a todos, muchas gracias por ver mi primer curso. Pido disculpas por mi inglés porque no estoy en hablante nativo. Y por favor comparte tus comentarios sobre el curso. Y mi hito es lograr diez alumnos sólo con este curso. Y siempre que eso se logre, voy a empezar a trabajar en la segunda curva y que se lanzará realmente muy poco después de que estén, por favor asegúrate de que me sigas en las redes sociales es para consejos y trucos importantes. Y tengo muchas ganas de ver que eras animaciones. Y por favor cuídate. Y Bolt Bite volverá pronto.