Animaciones simples en Xamarin Forms

  • xamarin-forms

En esta ocasión traigo un post más que interesante.

Para conseguir que una app guste a sus usuarios, no solo tiene que cumplir de forma correcta con su funcionalidad y hacerlo de una manera correcta, sino que debe ser atractiva, y para conseguirlo se deben utilizar animaciones en ciertos puntos de la app.

En Xamarin Forms podemos encontrar algunas funciones simples, y si no es suficiente con ellas, podemos crear animaciones personalidad en las que el limite lo pone nuestra propia imaginación. En este post voy a centrarme en las animaciones simple, las cuales son un buen punto de partida para conseguir aplicaciones visualmente atractivas.

Las animaciones simples que nos ofrece Xamarin Forms son para transladar, escalar, rotar y aplicar transparencia_._ Para realizar las animaciones hay disponibles una serie de métodos, que se detallan a continuación, pero cabe destacar que, además de los parámetros específicos de cada método en función de la animación que realiza, todos tienen dos parámetros comunes:

  • uint lenght = Duración de la animación, en milisigundos. El valor por defecto es 250
  • Easing easing = Aceleración de la animación. El valor por defecto es null, por lo que la animación se hace a una velocidad cte, sin aceleración. Existen una serie de aceleraciones que podemos utilizar. Las podemos encontrar detalladas en https://docs.microsoft.com/es-es/dotnet/api/xamarin.forms.easing?view=xamarin-forms En este post no entraré en los detalles de las distintas aceleraciones, ya que ese tema daría para un post completo por sí mismo.

Asimismo, los métodos para realizar animaciones retornan un Task, por lo que si queremos lanzar varias animaciones de forma secuencial hay que hacerlo utilizando await

Translation

La función que ofrece Xamarin From para transladar una View es TranlateTo y hay que indicarle los siguientes parámetros

  • double x = Componente x del vector de traslación final
  • double y = Componente y del vector de traslación final
  • uint lenght
  • Easing easing

En el siguiente ejemplo, se muestra como mover un frame a la derecha, después hacia arriba y, por último, en diagonal para devolverlo a su posición original. Cada movimiento tendrá una duración de 1 seg y se hará sin ninguna aceleración

await Frame.TranslateTo(100, 0, 1000); //Translation to the right
await Frame.TranslateTo(100, -100, 1000); //Translation to the top
await Frame.TranslateTo(0, 0, 1000); //Translation to the original position

Scale

La función que ofrece Xamarin From para escalar una View es ScaleTo y hay que indicarle los siguientes parámetros

  • double scale = Factor de escala
  • uint lenght
  • Easing easing

En el siguiente ejemplo, se escala un frame al doble de su tamaño, después a la mitad y, al final, se deja en su tamaño original. Cada movimiento tendrá una duración de 1 seg y se hará sin ninguna aceleración

await Frame.ScaleTo(2, 1000); //Scale to double its size
await Frame.ScaleTo(0.5, 1000); //Scale to half its size
await Frame.ScaleTo(1, 1000); //Scale to original size

 

Fade

La función que ofrece Xamarin From para cambiar la opacidad de una View es FadeTo y hay que indicarle los siguientes parámetros

  • double opacity = Opacidad a la que se atenúa
  • uint lenght
  • Easing easing

En el siguiente ejemplo, se hace un frame totalmente transparente para después volver a dejarlo opaco. Cada movimiento tendrá una duración de 1 seg y se hará sin ninguna aceleración

await Frame.FadeTo(0, 1000); //Make it transparent
await Frame.FadeTo(1, 1000); //Make it opaque

 

Rotate

Para realizar rotaciones, se ofrecen 3 funciones, dependiendo del eje sobre el que se desee realizar la rotación.

  • RotateTo: Rotación sobre el eje Z, o rotación sobre el plano 2D
  • RotateXTo: Rotación sobre el eje X, o rotación vertical
  • RotateYTo: Rotación sobre el eje Y, o rotación horizontal

Todas ellas reciben los siguientes parámetros:

  • double rotation = Valor de la rotación final
  • uint lenght
  • Easing easing

En los siguientes ejemplos, se muestran los 3 distintos tipos de animaciones expuestos anteriormente:

RotateTo

await Frame.RotateTo(90, 1000); //Rotate it 90 degrees
await Frame.RotateTo(0, 1000); //Rotate it back to the initial position

RotateXto

await Frame.RotateXTo(180, 1000); //Rotate it 180 degrees in the X axis
await Frame.RotateXTo(0, 1000); //Rotate the X axis back to the initial position

RotateYTo

await Frame.RotateYTo(180, 1000); //Rotate it 180 degrees in the Y axis
await Frame.RotateYTo(0, 1000); //Rotate the Y axis back to the inital position

 

Como es habitual, he creado un proyecto en GitHub para ofrecer más detalles de la implementación que he realizado. Espero que os sea de ayuda https://github.com/jorgediegocrespo/XamarinSimpleAnimations

Bibliografía https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/animation/simple