Introducción
Día a día vamos viendo la evolución de las aplicaciones móviles. Actualmente, la mayoría de usuarios estan acostumbrados a utilizar aplicaciones visualmente atractivas que hacen uso de diferentes transiciones, efectos y animaciones.
En Xamarin.Forms contamos con API compartida para la gestión de animaciones que además da pie a crear librerías como Xamanimation. Sin embargo, en ocasiones crear algunas animaciones (diferentes pasos, transformaciones, etc.) es complejo.
Lottie
¿Te imaginas tomar una animación creada por un diseñador y poder utilizarla?.
Lottie es 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.
Obtener recursos
Un gran fuente de animaciones es LottieFiles. Puedes encontrar una gran variedad de animaciones listas para utilizar con opciones de búsqueda, etc.
NOTA: Si usas animaciones de LottieFiles, recuerda otorgar crédito a sus creadores.
Lottie & Xamarin.Forms
La librería Lottie fue creada por Airbnb inicialmente para iOS, Android y React Native. Sin embargo, gracias a la contrinución de Martijn van Dijk y otros miembros de la comuidad, tenemos soporte en Xamarin y Xamarin.Forms.
Para comenzar a trabajar con Lottie en Xamarin.Forms utilizaremos el paquete NuGet Aribnb.Xamarin.Forms.Lottie:
Install-Package Com.Airbnb.Xamarin.Forms.Lottie
NOTA: En UWP utilizaremos el paquete Lottie.UWP.
Para completar el proceso de preparación de Lottie en nuestro proyecto Xamarin.Forms, necesitamos añadir la siguiente línea tras la inicialización de Xamarin.Forms en cada proyecto nativo:
AnimationViewRenderer.Init();
Todo listo!.
Para poder mostrar una animación de Lottie, debemos contar con ella. En nuestro ejemplo vamos a utilizar esta animación disponible en LottieFiles creada por Salatiel Queiroz.
Tras descargar el archivo JSON, vamos a añadirlo en cada proyecto nativo:
- Android: En la carpeta Assets. El archivo debe tener como acción de compilación AndroidAsset.
- iOS: En la carpeta Resources. El archivo debe tener como acción de compilación BundleResource.
- UWP: En la carpeta Assets (o en la raíz), el archivo debe tener como acción de compilación Content.
Para mostrar la animación necesitamos un elemento visual que nos permita además realizar una gestión de la misma. Este elemento visual es AnimationView.
Las propiedades fundamentales del elemento visual son:
- Animation: El archivo JSON a utilizar.
- Loop: Un booleano que indica si la animación se repite en bucle o no.
- AutoPlay: Booleano que determina si la animación se auto reproduce.
- IsPlaying: Indica si la animación se esta reproduciendo o no.
- Speed: Determina la velocidad de reproducción de la animación.
- Progress: Valor numérico que nos indica el progreso actual de la animación en reproducción.
Los eventos:
- OnPlay: Se inicia la animación.
- OnPause: Pausa.
- OnFinish: Fin de la animación.
Comandos:
- PlaybackStartedCommand: Comanzo lanzado cuando se inicia la animación.
- PlaybackFinishedCommand: Comando lanzado al completar la animación.
Para utilizar AnimationView desde XAML necesitamos utilizar el siguiente espacio de nombres:
xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
La interfaz:
<lottie:AnimationView
x:Name="LottieView"
Animation="Tadah.json"
Loop="False"
AutoPlay="True"
PlaybackStartedCommand="{Binding PlayingCommand}"
PlaybackFinishedCommand="{Binding FinishedCommand}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
Podemos pausar la animación utilizando el método Pause y lanzar la animación con Play.
El resultado:
Como podemos observar, el resultado es increíble. Con diferentes recursos y aplicando diferentes animaciones de rotación, trasladación, etc. podríamos conseguir resultados similares pero con un esfuerzo mucho más elevado.
Ejemplo disponible en GitHub:
Recordar que podéis dejar en los comentarios cualquier tipo de sugerencia o pregunta.
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