Lottie para web
Las micro-interacciones están de moda y, cada vez más, se están convirtiendo en una práctica común para conseguir que las interfaces de usuario sean más ‘humanas’.
La principal dificultad en la implementación de animaciones o micro-interacciones es lo costoso que nos resulta a los desarrolladores plasmar sobre código lo que nuestros compañeros de UI/UX nos piden. En esta entrada utilizaremos Lottie, una impresionante herramienta del equipo de Airbnb con la que conseguiremos esquivar esta barrera.
¿Para qué sirve Lottie?
A grandes rasgos, Lottie es una herramienta creada por Airbnb con el objetivo de conseguir que el desarrollo y la implementación de animaciones bajo diferentes plataformas sea lo más sencillo posible. Lottie se encuentra disponible para iOS, Android, React Native y Web. Si queréis conocer más sobre Lottie, podéis leeros el artículo dónde Airbnb lo explica más detalladamente.
Creación de animaciones con Lottie
Pese a que en esta entrada no nos centraremos en el proceso de creación de las animaciones de Lottie, es importante conocer que estas se generan mediante Adobe After Effects y el plugin Bodymovin. Para aquellos que queráis conocer cómo crear una animación ‘from scratch’, os recomiendo leer el siguiente artículo dónde se explica todo lo necesario.
Para los ejemplos de esta entrada, utilizaremos algunas de las animaciones que la comunidad ha creado y que podemos encontrar en lottiefiles.com.
Preparando el entorno
Lo primero que necesitamos para trabajar con Lottie es importar la librería de Bodymovin a nuestro proyecto. Podemos descargarla e importarla, u obtenerla de una CDN.
<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- OR FROM CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.min.js" type="text/javascript"></script>Seguidamente creamos un documento HTML con un <div> en su interior y utilizamos el siguiente código de JS para cargar el fichero .json con la animación (obtenida de lottiefiles.com):
var lottieAnimation = bodymovin.loadAnimation({
container: LottieContainer, // ID del div
path: 'data.json', // Ruta fichero .json de la animación
renderer: 'svg', // Requerido
loop: false, // Opcional
autoplay: false, // Opcional
name: "Hello World", // Opcional
})En la propiedad ‘path’, deberemos escribir la ruta dónde se encuentre el fichero *.json de nuestra animación. También podemos utilizar la propiedad ‘animationData’ y pasar una variable de nuestro JS que tenga el mismo contenido que el fichero.
Para reproducir nuestra animación, podemos utilizar cualquiera de las siguientes funciones:
//Reproducir la animación sin pausasLottieContainer.addEventListener('click', function() {
lottieAnimation.play();
});//Reproducir la animación del 0 al 50% de su duraciónLottieContainer.addEventListener('click', function() {
lottieAnimation.playSegments([0, 50], true);
});
Si utilizamos la segunda opción, tendremos la posibilidad de secuenciar nuestra animación. Esto nos permitirá reproducirla en tantas partes como queramos y controlarla mediante eventos externos, por ejemplo mediante un evento de swipe:
Control de las animaciones mediante eventos
Para tener un mayor control sobre nuestras animaciones, podemos utilizar los eventos que la propia librería nos proporciona:
lottieAnimation.addEventListener('complete', function() {
console.log('animation complete!');
});Y estos son todos los eventos que podemos utilizar con Lottie:
- complete
- loopComplete
- enterFrame
- segmentStart
- config_ready (when initial config is done)
- data_ready (when all parts of the animation have been loaded)
- loaded_images (when all image loads have either succeeded or errored)
- DOMLoaded (when elements have been added to the DOM)
- destroy
(Para obtener más información sobre ellos, podéis consultar el repositorio de GitHub de la librería).
Para acabar, os dejamos con un conjunto de ejemplos que hemos preparado y con los que seguramente quedará todo mucho más claro.
¡Gracias!
Referencias:
Animaciones utilizadas:
https://www.lottiefiles.com/u/830, https://www.lottiefiles.com/andrewmckay, https://www.lottiefiles.com/chrisgannon
