Si no está familiarizado con Lottie, es una biblioteca que representa animaciones de Adobe After Effects de forma nativa en dispositivos móviles y la web. Esto fue posible con la ayuda de Bodymovin, un complemento AE que ayuda a exportar animaciones a formatos JSON. Bodymovin fue creado por Hernán Torrisi.
Antes de profundizar en el tema, es importante tener en cuenta que no es necesario estar familiarizado con la creación de animaciones en After Effects para utilizar Lottie. Hay sitios como Drawer e Icons8, entre otros, que ofrecen animaciones tanto gratuitas como de pago que puedes utilizar en tu proyecto.
Dicho esto, ¡entremos en ello!
Para implementar animaciones de Lottie en la web, debemos lograr lo siguiente:
Obtenga el formato JSON de la animación. Agregue la biblioteca Bodymovin a la página HTML. Cargue la animación. Configure el activador de la animación.
Si tiene su animación en Adobe After Effects, deberá instalar el complemento Bodymovin para exportar su animación a formato JSON. De lo contrario, como mencioné anteriormente, puede obtener el formato JSON de su animación preferida en línea. Para este artículo, usaría uno de los íconos de Coronavirus del Cajón. Drawer proporciona la animación en múltiples formatos como Figma, AE, AI, SVG, JSON y PNG, entre otros. Entonces, con el archivo JSON listo, pasamos al siguiente paso.
La biblioteca Bodymovin es la que hará uso del archivo JSON y nos ayudará a reproducir y controlar nuestra animación. Hay varias formas en que podemos incluir la biblioteca en nuestra página HTML:
Gestores de paquetes como npm y Yarn:npm instala lottie-web
// o hilo agrega lottie-webPreoptimizadores de paquetes como Skypack:importar lottieWeb desde “https://cdn.skypack.dev/lottie-web”;
Tenga en cuenta que si utiliza un administrador de paquetes, deberá incluir el script en su archivo HTML desde la carpeta dist.
Aquí, utilizamos el método loadAnimation() de Bodymovin para cargar la animación desde el archivo JSON en un elemento DOM, como en el siguiente:
El método toma un objeto con algunas propiedades. Algunas de las propiedades son obligatorias, mientras que el resto son opcionales. Veamos cada uno de ellos:
contenedor: el elemento DOM en el que se carga la animación ruta: la ruta relativa del archivo JSON que contiene la animación renderizador: el formato de la animación, incluidos SVG, lienzo y HTML bucle: booleano para especificar si la animación debe o no reproducirse en bucle: booleano para especificar si la animación debe reproducirse o no tan pronto como se carga nombre: nombre de la animación para referencia futura
Si se pregunta por qué la propiedad animationData está comentada, es porque es mutuamente excluyente con la propiedad path y es un objeto que contiene los datos animados exportados.
Aplicando todo lo que hemos aprendido hasta ahora, pude llegar a esto:
Uno de los íconos animados de Coronavirus de Drawer
Si los valores de las propiedades de bucle y reproducción automática en el objeto pasado al método loadAnimation() son falsos, obtenemos un icono estático como en el Lápiz de arriba. Entonces, para reproducir la animación, necesitaríamos configurar un disparador. Para darnos control sobre las animaciones, Lottie proporciona métodos que se pueden aplicar a instancias de animación. Puede encontrarlos en los documentos de Lottie o en la documentación del paquete npm de lottie-web.
Para nuestro ejemplo, configuremos la animación para que se reproduzca cuando se hace clic en el botón. El método apropiado a utilizar debe ser el método de reproducción, pero eso hará que la animación se reproduzca indefinidamente. Queremos reproducir una secuencia completa del lavado de manos. Entonces, en su lugar, usamos playSegments([segments, forceFlag]) método. Con esto podremos establecer los fotogramas que queremos que se reproduzcan en la animación. Dicho esto, tenemos lo siguiente:
Para obtener más información, puede consultar la documentación de Lottie.
¡Lávate las manos y feliz animación!