Introducción a animaciones con Xamarin Forms
El objetivo de este post es familiarizar al lector con las animaciones que Xamarin Forms pone a disposición de los usuarios a la hora de desarrollar una interfaz de usuario para una aplicación móvil.
Las animaciones son una funcionalidad clave a la hora de desarrollar una interfaz, es una manera de comunicar al usuario que los datos de los que dispone, han cambiado. Xamarin Forms nos permite implementar esta característica de una manera muy sencilla.
Pero antes hablaremos de los tipos de animaciones y de su comportamiento que nos podemos encontrar durante el desarrollo:
Tipos de animaciones
Ocultar elementos
Este tipo de animaciones son útiles para señalar que un elemento está deshabilitado, o que tiene poca importancia. Se utiliza la función FadeTo, con la que establecemos la opacidad del elemento con un numero entre el 0 y el 1, siendo el 0 invisible, y el 1 completamente opaco.
Rotar elementos
Estas transiciones nos pueden ayudar a indicar al usuario que se está realizando una acción y debe esperar hasta que finalice. Para aplicarla se puede emplear la función RotateTo, RelRotateTo, RotateXTo, RotateYTo.
Escalar y mover elementos
Escalar y mover elementos es muy común para resaltar la jerarquía de los elementos, y señalar cuales son más importantes que otros. Dentro de este grupo, encontramos TranslateTo, ScaleTo, RelScaleTo.
Comportamiento de las animaciones
Xamarin Forms nos permite modificar, mediante funciones de aceleración, el comportamiento de las animaciones a la hora de comenzar o al terminar. Esto es posible gracias a la clase Easing, donde podemos encontrar los distintos comportamientos:
- Bounce
- Cubic
- Sin
- Spring
- Linear
Con la función linear la animación se mueve de manera constante, es decir, no varía su velocidad, a las demás animaciones le debemos añadir los prefijos In o Out para indicar si queremos que la animación empiece lenta y acelere cuando vaya a finalizar, o que se ralentice al final de la misma.
Demostración
Para ver lo sencillo que es animar elementos con Xamarin Forms, vamos a ver una aplicación en la que introduces el nombre de un usuario de GitHub y te muestra una pequeña información sobre él.
Empezaremos viendo el XAML para ver la estructura de la página. Esta página se puede dividir en dos partes: el buscador y el resultado:
<ContentPage.BindingContext>
<viewmodels:UserViewModel/>
</ContentPage.BindingContext>
<StackLayout Padding="20">
<!-- Buscador de usuarios -->
<Label Text="Introduce un usuario de GitHub"/>
<Entry Placeholder="Octocat" Text="{Binding Username}"/>
<Button Text="Search"
BackgroundColor="White"
BorderColor="CornflowerBlue"
BorderWidth="2"
TextColor="CornflowerBlue"
BorderRadius="4"
x:Name="btnSearch"/>En esta primera parte se define el BindingContext de la página y se crea una entrada de texto para escribir el usuario.
<StackLayout x:Name="userCard">
<Frame HasShadow="True" Padding="10" BackgroundColor="White" HorizontalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" Spacing="20">
<Image Source="{Binding User.Avatar}" WidthRequest="50" HeightRequest="50" />
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="{Binding User.Login}"/>
<Label Text="{Binding User.Location}"/>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="1" Orientation="Horizontal">
<Label Text="{Binding User.Followers, StringFormat='{0} Followers'}" HorizontalOptions="CenterAndExpand"/>
<Label Text="{Binding User.Repos, StringFormat='{0} Repos'}" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Row="2" >
<Label Text="{Binding User.Bio}" />
</StackLayout>
<StackLayout Grid.Row="3" Orientation="Horizontal">
<Label Text="{Binding User.Type}" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</Frame>
</StackLayout>El resultado será una carta que muestra información del usuario: nombre, localización, numero de repositorios, seguidores, biografía, y tipo de usuario.
Las animaciones se definen dentro de la clase, ya sea al iniciar el componente, o como en este caso, en un evento.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
// Ocultar la carta del usuario
userCard.TranslationY = 100;
userCard.Opacity = 0;
btnSearch.Clicked += handleBtnSearchClick;
}
private async void handleBtnSearchClick(object sender,
EventArgs e)
{
if (!(BindingContext is UserViewModel viewModel)) return;
// Hacer que el resultado desapareza
userCard.TranslationY = 100;
userCard.Opacity = 0;
// Hacer que el boton desaparezca
await btnSearch.ScaleTo(0, 250);
// Coger la informacion del usuario de GitHub
await viewModel.GetGitHubUser();
// Agrandar el boton
await btnSearch.ScaleTo(1, 250, Easing.BounceOut);
// Hacer aparecer el resultado
await Task.WhenAll(
userCard.FadeTo(1),
userCard.TranslateTo(0, 0, 1000, Easing.BounceOut)
);
}
}Cuando se hace clic en el botón la información del usuario anterior desaparece mientras el botón se hace pequeño, el primer parámetro de la función indica el tamaño al que escalará, y el segundo, la duración en milisegundos. Esperará hasta tener la información del usuario, y cuando esto suceda se agrandará el botón. Después se realizarán dos animaciones de manera concurrente, para lograr esto se utiliza la función Task.WhenAll, que en este caso cambia la opacidad de la carta y su posición para lograr el efecto del ejemplo.
Espero que os sirva de ayuda para introduciros en las animaciones con Xamarin Forms. Para ver el código completo os podéis para por el repositorio de GitHub.
Autor: Guillermo Priego Sierra
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019
Código / recursos utilizados / Otros datos de interés: GitHub.