Introducción
¿Te imaginas tomar una animación creada por un diseñador y poder utilizarla?.
Lottiees una librería de animaciones creada por Airbnb para iOS y Android que se encarga de tomar animaciones de After Effect exportadas en JSON y renderizarla utilizando APIs de animación nativa en cada plataforma.
Las animaciones pueden ser extremadamente complejas pero al final, trabajamos con archivos de imagen y JSONs lo que se traduce en un requisito pequeño en tamaño otorgando unas posibilidades altas. Las animaciones se pueden reproducir, pausar, detener, jugar con la velocidad o cambiar la escala.
Lottie Player
Usar animaciones de Lottie y acabar lanzando la App en depuración o usando herramientas externas para ver el resultado no es lo idóneo, ¿verdad?. Lottie Playeres un addin para Visual Studio para macOS que permite previsualizar (e interactuar) con la animación directamente desde el IDE.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por «Lottie Player»:
Y pulsamos Install…
¿Qué aporta?
Podremos hacer clic derecho sobre un archivo de animación Lottie (recuerda, formato Json) y acceder a una nueva opción, Preview In Lottie Player…
Seleccionando la opción, previsualizaremos la animación en bucle además de:
- Poder pausar y reanudar la animación en cualquier momento.
- Si pausamos la animación, podremos movernos hacia cualquier frame de la animación.
Veamos el addin en funcionamiento:
Lo próximo
La versión actual aporta la funcionalidad básica pero hay una gran cantidad de opciones posibles para futuras versiones:
- Controlar la velocidad de la animación.
- Controlar si se reproduce o no en bucle.
- Poder cambiar el fondo de la animación.
- Etc.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
Más información
- Xamarin Blog: Bring Stunning Animations to Your Apps with Lottie
- CSharpCorner: Xamarin.Forms Lottie Animations
- Blog de Gerald Versluis: Spicing up your Xamarin app with Lottie animations
- XamarinHelp: Lottie Animations with Xamarin Forms