[Xamarin.Forms] Nueva versión de Xamanimation repleta de novedades

Xamanimation

En todas las plataformas, las aplicaciones móviles incluyen animaciones que otorgan movimiento, fluidez y focalizan la atención del usuario en las zonas deseadas. Actualmente no son un extra o añadido en las aplicaciones, sino una parte importante en la experiencia y usabilidad de las mismas.

Como desarrolladores, debemos no solo cuidar por supuesto el correcto funcionamiento de la aplicación, sino que debemos preocuparnos también por la usabilidad y la experiencia otorgada, donde entran en juego las animaciones.

Xamanimation es una librería destinada para Xamarin.Forms que tiene como objetivo facilitar el uso de animaciones a los desarrolladores. Añade un conjunto de animaciones de uso muy sencillo tanto desde código C# como desde código XAML.

Desde la versión anterior he recibido feedback, sugerencias y peticiones. Las principales son:

  • Poder retrasar animaciones.
  • Poder lanzar animaciones de forma indeterminada (repetir).
  • Poder gestionar facilmente animaciones dependiendes del valor de un scroll, carousel, etc.
  • Parallax.
  • Facilitar lanzar animaciones aún más desde XAML (más Triggers).
  • Transiciones. La principal petición esta relacionada con la navegación.

Peticiones

Con todas las sugerencias y peticiones, había motivos más que suficientes para una actualización de la librería. De esta forma, llega la versión 1.3 de Xamanimation.

Novedades

A continuación, vamos a repasar las novedades principales de la nueva actualización.

Retrasar animaciones

La primera opción añadida es la posibilidad de retrasar animaciones. Se ha incluido la propiedad Delay para poder indicar en milisegundos el tiempo a esperar antes de lanzar una animación.

Retrasar animaciones

Animaciones infinitas

Otra opción muy pedida es la posibilidad de repetir de forma indefinida animaciones. Casos muy típicos como un fondo animado o por ejemplo, en un reproductor de música girar el disco durante la reproducción.

Se ha añadido la propiedad RepeatForever de tipo bool.

Repetir animaciones

Nuevos triggers

Hasta ahora, podíamos crear una animación o StoryBoard y lanzar la animación con un Trigger al cambiar una propiedad o ejecutar un evento directamente desde XAML. Pero, ¿podemos simplificar este proceso?.

Ahora se cuenta con nuevos Triggers que simplifican la ejecución de animaciones.

Más Triggers!

Entre las opciones que tenemos disponibles:

  • AnimateInt
  • AnimateColor
  • AnimateCornerRadius
  • AnimateDouble
  • AnimateThickness

Dependiendo del tipo de de la propiedad, usaremos un Trigger u otro. El uso es sencillo. Indicamos:

  • TargetPropperty: La propiedad a animar.
  • To: El valor final de la propiedad que queremos animar.
  • Duration: Duración de la animación en milisegundos.
  • Delay: Si queremos retrasar la animación. De nuevo, se indica en milisegundos.

NOTA: La propiedad From ya tendrá el valor actual de la propiedad, no es necesario establecer el valor salvo que la animación se quiera realizar desde otro valor diferente.

Animaciones progresivas

De las peticiones recibidas, añadir animaciones progresivas era una de las más repetidas. Hablamos de casos donde animamos una propiedad en base a un valor específico que va cambiando en base a una interacción por parte del usuario.

Por ejemplo, animar propiedades de elementos al hacer scroll para conseguir efecto Parallax, cambiar tamaños de elementos, etc.

Animaciones progresivas

Entre las opciones que tenemos disponibles:

  • AnimateProgressInt
  • AnimateProgressColor
  • AnimateProgressCornerRadius
  • AnimateProgressDouble
  • AnimateProgressThickness

Dependiendo del tipo de de la propiedad, usaremos un Trigger u otro. El uso es sencillo. Indicamos:

  • TargetPropperty: La propiedad a animar.
  • Progress: La propiedad más importante. Es la responsable de controlar la animación.
  • Minimum: Cuando el valor de esta propiedad es igual al de Progress, comienza la animación.
  • Maximum: Cuando el valor de esta propiedad es igual al de Progress, la animación se detiene.
  • From: Valor inicial de la propiedad a animar.
  • To: El valor final de la propiedad que queremos animar.

Veamos un ejemplo para entenderlo mejor:

<xamanimation:AnimateProgressColor
     TargetProperty="VisualElement.BackgroundColor"
     Progress="{Binding ScrollY, Source={x:Reference ScrollBehavior}}" 
     Minimum="0"
     Maximum="200"
     From="Black"
     To="Red"/>

En este caso vamos a animar el color de fondo de un BoxView. El valor ira cambiando poco a poco segun el valor de ScrollY de un ScrollViewer pasando de negro a rojo segun el valor del scroll va aumentando hasta 200.

Transiciones

Otra opción muy solicitada va relacionada con el uso de transiciones. Se han añadido transiciones de entrada.

Este tipo de transición añade una transición en los controles cuando aparecen por primera vez. Puede usar esto en elementos individuales o en Layouts. En el último caso, los elementos hijos se animarán de forma secuencial en lugar de todos al mismo tiempo.

Transiciones de entrada

El uso es sencillo. Utilizamos EntranceTransition pudiendo controlar la duración.

Otros cambios

Además de los cambios anteriores:

  • Se ha actualizado todo a Xamarin.Forms 4.1.
  • El ejemplo hace uso de Shell y Visual ahora.
  • Se han añadido otros Triggers como por ejemplo, para detener animaciones.
  • Correciones menores.

¿Y en siguientes versiones?

Tengo algunas pruebas interesantes realizadas con la navegación. Una de las mejoras en la próxima versión estará relacionada con transiciones entre páginas además de añadir más tipos de transiciones.

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

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 )

Conectando a %s