Etiqueta: Lottie

Introducción

A la hora de desarrollar aplicaciones móviles nos encontramos con ciertas necesidades a cubrir. Una bastante habitual es la de ofrecer en una experiencia sencilla y fluida una breve explicación de la propia aplicación, su funcionalidad o características más importantes.

Para evitar que el usuario acabe «saltando»(Skip) el tutorial, es necesario atraer su atención. En este artículo, vamos a crear un Walkthrough o tutorial donde vamos a utilizar Lottie, animaciones de diferente tipo para conseguir atraer la atención de usuario.

Creando el Carousel

Comenzamos por la parte fundamental, el Carousel. El Carousel es un control que contiene una colección de contenido permitiendo navegar entre el mismo realizando un gesto de deslizamiento lateral.

Entre las diferentes opciones que tenemos disponibles (recuerda que existe paquete oficial para obtener un Carousel) tenemos CarouselView de Alexander Reyes. Es una opción interesante al permitir trabajar con:

• Indicadores de posición.
• Orientación: Vertical o Horizontal.
• Animaciones
• Control sobre estado, posición, si se muestran flechas para la navegación o no, etc.

Para trabajar con este Carousel, tras añadir el paquete NuGet correspondiente, añadimos el siguiente namespace en XAML:

xmlns:carousel="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"

La definición básica del control es sencilla:

<carousel:CarouselViewControl />

Bien, en nuestro caso, cada paso del tutorial será una ContentView. Podemos gestionar la colección de diferentes formas, una sencilla:

_views = new View[]
{
     new BikingHardView(),
     new AcrobaticsView(),
     new SoExcitedView(),
     new BikingCoolView()
};

Y utilizando la propiedad ItemsSource(se puede utilizar un enlace a datos), establecemos la colección.

Carousel.ItemsSource = _views;

Tenemos lo básico. Continuamos!.

Lottie a escena!

Utilizando páginas estáticas, sin movimiento, podemos conseguir la atención del usuario con una buena combinación de uso de imágenes, fuentes y otros recursos visuales.

Con un poco de «acción»lo tenemos más sencillo. Tenemos la posibilidad de trabajar con Lottiedesde Xamarin para Android, iOS, así como en UWP y en Xamarin.Forms gracias a la gran comunidad Xamarin.

¿Qué es Lottie?

Airbnb ha desarrollado una herramienta Open Source con la que facilitar la creación de animaciones móviles. Podemos utilizar animaciones potentes creadas con After Effects y utilizarlas desde nuestras aplicaciones móviles de forma sencilla.

Para trabajar con Lottie en Xamarin.Forms, comenzamos añadiendo un paquete NuGet:

Recuerda añadirlo en cada proyecto de plataforma además de en la librería .NET Standard.

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 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.

Para utilizar AnimationViewdesde XAML necesitamos utilizar el siguiente espacio de nombres:

xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"

La interfaz:

<forms:AnimationView
     Animation="bikingishard.json"
     AutoPlay="true"
     Loop="True"
     Speed="1"
     HorizontalOptions="FillAndExpand"
     VerticalOptions="FillAndExpand" />

Hasta este punto, de forma sencilla, conseguimos un resultado bastante atractivo.

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.

Añadimos más animaciones

Podemos continuar mejorando todo. En cada paso del tutorial vamos a añadir información relevante en texto y otros elementos visuales. Vamos a necesitar saber cuando el usuario pasa de un paso a otro.

De forma sencilla, podemos crear una interfazcomo la siguiente:

public interface IAnimatedView
{
     void StartAnimation();
}

De modo que, cada vez que el usuario cambie la ContentView seleccionada, si el paso hereda de nuestra interfaz, ejecutamos la implementación de la misma.

var currentView = _views[e.NewValue];

if (currentView is IAnimatedView animatedView)
{
     animatedView.StartAnimation();
}

¿Qué conseguimos con esto?

Vamos a añadir otra dependencia vía NuGet con la librería Xamanimation. Esta pequeña librería añade una gran variedad de animaciones predefinidas además de la posibilidad de crear Storyboards, lanzar animaciones desde XAML, etc.

NOTA:Xamanimation formará parte del bloque de animaciones del Toolkitde Xamarin.Forms.

Añadimos espacio de nombres en XAML:

xmlns:xamanimation="clr-namespace:Xamanimation;assembly=Xamanimation"

Y podemos definir una animación de la siguiente forma:

<xamanimation:StoryBoard
     x:Key="InfoPanelAnimation"
     Target="{x:Reference InfoPanel}">
     <xamanimation:FadeToAnimation
          Duration="50"
          Opacity="1" />
     <xamanimation:TranslateToAnimation
          TranslateY="0"
          Easing="CubicIn"
          Duration="100" />
</xamanimation:StoryBoard>

Esta animación, animará un elemento visual marcado con el nombre InfoPanel, primero la opacidad de su estado inicial, 0, es decir, no visible, a 1 además de realizar una trasladación en el eje Y.

Para lanzarla:

if (Resources["InfoPanelAnimation"] is StoryBoard animation)
{
     animation.Begin();
}

Sencillo, ¿verdad?.

De igual forma, aprovechamos algunas animaciones de la librería para animar el color de fondo al pasar de un paso a otro entre otros detalles.

El resultado:

NOTA:Las animaciones de Lottie de este ejemplo corresponden a Yue XIde LottieFiles.

Tienes el código fuente del ejemplo disponible GitHub:

Más información

• GitHub:xamarin-forms-walkthrough
• GitHub: Xamanimation