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 una aplicación iOS de vista única en Xcode.
2.- Instalar Lottie en tu proyecto: Accede al directorio donde se encuantra tú proyecto creado desde la Terminal

Como instalar y usar CocoaPods
Agregue la dependencia de Lottie al podfile:
pod 'lottie-ios', :git => 'https://github.com/airbnb/lottie-ios.git'
luego, ejecute
pod install

3.- Añadir el archivo JSON animación a la carpeta con los archivos del proyecto (la carpeta que contiene ViewController, Main.storyboard...) mediante arrastrar y soltar. Elija las siguientes opciones:

4.- Agregue la siguiente línea en la parte superior de la ViewController:
import Lottie

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