Animación de Lottie

Una miniguía de la animación de Lottie 1

Un Lottie es un formato de datos de animación basado en JSON que puede utilizarse tan fácilmente como los activos estáticos en cualquier plataforma. Son archivos compactos que pueden escalar hacia arriba y hacia abajo sin pixelación y funcionan en cualquier dispositivo. Lo mejor de todo es que las animaciones Lottie no requieren conocimientos de codificación.

¿Cómo puede Lottie Animation hacer su vida más fácil?

Las Lottie pueden utilizarse en casi cualquier plataforma, incluyendo la web y el móvil. Como resultado, puedes incorporarlos de forma sencilla tanto a las apps como a los sitios online.

Las animaciones Lottie también pueden utilizarse como pegatinas de la plataforma de chat. Los archivos JSON son compactos en lugar de los archivos GIF y PNG; por lo tanto, el uso de un archivo Lottie aumenta la velocidad de descarga y minimiza el uso de espacio en el disco.

Puede mezclar componentes vectoriales y rasterizados con Lottie y, en tiempo de ejecución, aplicar transformaciones. La realización de animaciones y la utilización de animaciones Lottie en ITG.digital le ayudarán a comprender mejor.

Los archivos Lottie se utilizan en emocionantes animaciones en la mayoría de las páginas de aterrizaje del sitio web.

¿Cuál es la mejor manera de hacer Animaciones Lottie?

Diseño (Paso 1)

Lo primero y más importante es completar y preparar el diseño de la animación. Me viene a la mente una ilustración de una chica con un perro. Tienes que ajustar la postura para acomodar el fuerte suspiro de la chica y el golpeteo de sus pies. Después de cambiar la postura, esboza diferentes alternativas de textura para el vestido de la chica.

Si decides animar utilizando texturas, debes tener en cuenta lo siguiente:

Es preferible utilizar texturas vectoriales porque el archivo resultante será más corto.

Por favor, recuerde cuando esboce la textura que cuantos más puntos y piezas menores tenga, más sencillo será animarlo. También puede reducir el tamaño del archivo de animación completado manteniendo la textura mínima.

Si es posible, evite utilizar máscaras en la animación; de lo contrario, pueden surgir problemas en algunos navegadores.

Animar (Paso 2)

La animación es la siguiente fase. Tendrás que animar algunos dibujos y transformarlos a JSON para crear un archivo Lottie.

Mantener las cosas simples es el consejo más matizado que puedes recibir para esa fase. En lugar de utilizar efectos, anima las propiedades principales de la capa: posición, rotación, escala y opacidad. La animación de la ruta también será impecable.

Sus animaciones pueden reproducirse o reproducirse una vez al integrarlas.

Asegúrate de que tu animación tiene un bucle impecable antes de exportarla desde After Effects si quieres un bucle perfecto en el sitio web/la aplicación.

Exportar animaciones (Paso 3)

Es el momento de publicar las animaciones una vez que las hayas terminado.

1. Inicie Bodymovin y busque la composición que desea producir.

2. Realiza los ajustes de los parámetros.

3. Haz clic en renderizar y ya está.

4. Comprueba tu animación en la página web de Lottie files o en Bodymovin.

5. Haga clic en "demo" en el renderizado si quiere mostrar su animación a alguien que no esté familiarizado con Lottie.

Conclusión

Consiga las animaciones finales exactamente como las quiere con Lottie Animation. En comparación con las animaciones de JavaScript, la animación en After Effects es más accesible y versátil. Podrás ser más imaginativo en el proceso de diseño después de conocer Lottie Animation en sitios web de confianza como Seahawk Media.

Entradas relacionadas

búsqueda orgánica
Glosario de WordPress
Komal Bothra

¿Qué es la búsqueda orgánica?

La búsqueda orgánica es el proceso de atraer tráfico a su sitio web a través de medios no remunerados o

Pulse aquí
Glosario de WordPress
Komal Bothra

¿Qué es Press This en WordPress?

Prensa Esta es una función de WordPress que permite a los usuarios rápida y fácilmente

Komal Bothra 4 de febrero de 2023

¿Qué es un servidor proxy?

Un servidor proxy es un ordenador que actúa como intermediario entre su ordenador y

Glosario de alojamiento
Komal Bothra 3 de febrero de 2023

Marketing en buscadores (SEM) 

El marketing en buscadores, o SEM, es una forma de marketing en línea que utiliza publicidad de pago.

Glosario SEO
Komal Bothra 2 de febrero de 2023

Estudio de caso: Soluciones tecnológicas Mabry

Mabry Tech es una empresa especializada en consultoría y desarrollo de soluciones innovadoras para empresas. Mabry

Estudio de caso

Empezar con Seahawk

Regístrate en nuestra app para ver nuestros precios y obtener descuentos.