Guevara

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.

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 necesitan conocer más sobre Lottie, pueden acceder al artículo dónde Airbnb lo explica más detalladamente.

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 los ejemplos de esta entrada, utilizaremos algunas de las animaciones que la comunidad ha creado y que podemos encontrar en lottiefiles.com.

Para este tutorial, voy a usar una bonita animación que indica un ¡Bien Hecho!: Successful, por lo regular en una aplicación necesitamos informar al usuario que ha completado una tarea, compra o logró completar un nivel con exito en el caso de los videos juegos.

Ahora, usemos Lottie e integremos la animación anterior en la aplicación iOS. ¡Te tomará menos de 5 minutos!

1.- Crear un projecto y asignarle un nombre en mi caso lo llamare "LottieDemo-Android"
2.- Instalar Lottie en tu proyecto: Una vez que el proyecto esté completamente cargado, vaya al archivo Gradle de nivel de aplicación y en dependencias, agregue

implementation 'com.airbnb.android:lottie:2.8.0'
3.- Añadir el archivo JSON animación a la carpeta con los archivos del proyecto mediante arrastrar y soltar. Elija las siguientes opciones: 4. Sincronice los archivos Gradle del proyecto. 5. Cree una carpeta " activos " en app > src > main y pegue las animaciones descargadas en ella.

Repositorio en BitBucket con la aplicación que creé en este tutorial.