Lottie Bodymovin es un extensión de After Effects creada por Airbnb que te permite crear animaciones y exportarlas de forma nativa para el Web, Android, iOS y React Native.
Puedes descargar Bodymovin en Adobe o en GitHub.
Para este tutorial voy a enseñaros de manera muy simple y paso a paso una animación sencilla de las rueda de una moto YEGO utilizando Adobe Illustrator, After Effects y Bodymovin.
ATENCIÓN: No estamos hablando de una animación GIF. Lo que vamos a ver es cómo crear animaciones en html.
Es muy importante tener organizadas las capas para luego poder moverlas sin limitaciones.
En este caso como voy a hacer girar solo las ruedas las he organizado en 3 capas:
1- la moto en general; 2 la rueda derecha; 3 la rueda izquierda.
Guarda el archivo en formato .ai Adobe Illustrator
IMPORTAR → ARCHIVO → nombre archivo → TIPO COMPOSICIÓN
Seleccionamos las dos capas con las ruedas y pulsando R abrimos solo las opciones de ROTACIÓN .
Teniéndolas seleccionadas las dos clicamos en el símbolo del cronometro y añadimos un punto. Nos movemos de algunos segundos y rotamos las ruedas añadiendo un segundo punto.
Cortamos la composición donde acaba la animación. Los puntos IN y OUT en After Effects se añaden con las letras del teclado B y N. Delimitada nuestra timeline clicamos en la parte gris con el botón derecho → SEPARAR COMP DE ENTORNO DE TRABAJO.
Dandole play con la barra de espacio podemos ver ya nuestra animación de las ruedas.
Este es un paso muy importante.
Bodymovin solo exporta animaciones hechas con Formas y no con Vectores.
Las seleccionamos, botón derecho → CREAR FORMAS A PARTIR DE LA CAPA VECTORIAL
Ahora estamos listos para exportar el archivo con Bodymovin.
VENTANA → EXTENSIONES → BODYMOVIN
Seleccionamos el archivo, le asignamos una carpeta de destinación y un nombre y le damos a RENDER.
Y ya tenemos nuestro archivo .json.
No es posible ver una vista previa de la animación en nuestro ordenador, para esto tenemos que importar el archivo en Lottie https://lottiefiles.com/
DASHBOARD →UPLOAD A NEW LOTTIE
y ya podemos ver nuestra animación.
Sube tu archivo .json en tu librería de Webflow y arrastalo donde quieras. La primera vez te parecerá como si estuvieras haciendo magia 😆
