AirBnB.Design – Using Lottie [Xamarin.Forms]


LottieGIF

En el pasado, la creación de animaciones complejas para plataformas móviles o web (Android, iOS y React Native) era un proceso difícil y prolongado. Debiamos agregar archivos de imagen voluminosos para cada tamaño de pantalla o escribir mil líneas de código frágil y difícil de mantener. Debido a esto, la mayoría de las aplicaciones no usaban animación, a pesar de ser una herramienta poderosa para comunicar ideas.

Hoy en día las animaciones aportan un valor agregado que logra que estas mismas puedan posicionarse en el mercado, ya que atraen a los usuarios por factores de diseño y de experiencia que brindan una atracción indirecta, que permite que las utilicen con mayor frecuencia.

¿Qué es Lottie?

Lottie es una biblioteca móvil para Android e iOS que analiza las animaciones de Adobe After Effects exportadas como json con Bodymovin y las genera de forma nativa en dispositivos móviles.

Bodymovin es un plugin de After Effects creado por Hernan Torrisi que exporta archivos de After Effects como json e incluye un reproductor web javascript. Actualmente se ha podido extender su funcionalidad para poder usarse en Android, iOS y React Native.

¿Por qué se llama Lottie?

Lottie lleva el nombre de un director de cine alemán y el pionero más importante de la animación de silueta. Sus películas más conocidas son Las aventuras de Prince Achmed (1926): la película animada más antigua que sobrevivió, precediendo a Walt Disney en su largometraje Blancanieves y los siete enanitos (1937) por más de diez años. El arte de Lotte Reineger.

Usando Lottie en Xamarin.Forms

Para este ejemplo voy a suponer que ya han creado su aplicación en Xamarin.Forms, una vez realizado esto, procedamos a agregar el NuGet Package, esto haciendo clic con el botón derecho sobre la solución y seleccionando “Manage NuGet Packages for Solution”…

Escribamos “Com.Airbnb.Xamarin.Forms.Lottie” o simplemente “Lottie” y seleccionemos el plugin como se muestra a continuación:

3

Seleccionemos todos los proyectos y hagamos clic en el botón “Install”

4

Para poder visualizar la animación la forma más sencilla de usarlo es con AnimationView, el cual agregaremos mas adelante. El plugin añadido nos permite realizar esto de una manera mas sencilla, puesto que solo deberemos de agregar un archivo json en la carpeta de Assets de nuestro proyecto Android:

6

Para este ejemplo pueden utilizar el mismo archivo que brinda @martijn00 en su cuenta de GitHub.

XAML

Ahora, lo primero que debemos de hacer en nuestro archivo MainPage.xaml es hacer referencia al espacio de nombres de Lottie.Forms.

xmlns:forms=”clr-namespace:Lottie.Forms;assembly=Lottie.Forms”

Posteriormente editemos nuestra interfaz, para lo cual definiremos un Grid en donde posicionaremos tres botones dentro de un StackLayout, seguido del componente que nos mostrara la acción determinada de cada botón y por ultimo agregaremos un Slider con el cual podremos ver cuadro por cuadro del json:

[/CODE]

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
<RowDefinition Height=”Auto”/>
</Grid.RowDefinitions>

<StackLayout
Grid.Row=”0″
Orientation=”Horizontal”
HorizontalOptions=”FillAndExpand”
Margin=”5, 0″>

<Button
x:Name=”playButton”
HorizontalOptions=”FillAndExpand”
Text=”Play” />

<Button
x:Name=”playSegmentsButton”
HorizontalOptions=”FillAndExpand”
Text=”Segment” />

<Button
x:Name=”playFramesButton”
HorizontalOptions=”FillAndExpand”
Text=”Frames” />

</StackLayout>

<forms:AnimationView
x:Name=”animationView”
Grid.Row=”1″
Animation=”LottieLogo1.json”
Loop=”false”
AutoPlay=”false”
OnFinish=”Handle_OnFinish”
ClickedCommand=”{Binding ClickedCommand}”
VerticalOptions=”FillAndExpand”
HorizontalOptions=”FillAndExpand” />

<Slider
Grid.Row=”2″
Margin=”5, 0″
ValueChanged=”Slider_OnValueChanged” />
</Grid>

[/CODE]

Código

En nuestro code behind asignaremos los métodos Clicked con respecto a la animación deseada:


 public partial class MainPage : ContentPage
	{
        public ICommand ClickedCommand { get; private set; }

        public MainPage()
        {
            InitializeComponent();

            playButton.Clicked += (sender, e) => animationView.Play();
            playSegmentsButton.Clicked += (sender, e) => animationView.PlayProgressSegment(0.65f, 0.0f);
            playFramesButton.Clicked += (sender, e) => animationView.PlayFrameSegment(50, 1);

            BindingContext = this;

            On().SetUseSafeArea(true);
        }

        private void Slider_OnValueChanged(object sender, ValueChangedEventArgs e)
        {
            animationView.Progress = (float)e.NewValue;
        }

        private void Handle_OnFinish(object sender, System.EventArgs e)
        { }

        private void DisplayAlert(string message)
        { }
    }

Resultado

LottieXF

Descarga el código completo de este ejemplo aquí.

Hasta la próxima!

Mas información: AirBnb/Lottie

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s