[Xamarin.Forms] Animaciones y nueva librería

AnimationIntroducción

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.

En este artículo vamos a profundizar a fondo en el uso de animaciones desde Xamarin.Forms.

Animaciones en Xamarin.Forms

Xamarin.Foms incluye una serie de métodos de extensión que nos permiten realizar una completa gestión de animaciones desde código C#.

Por un lado tenemos disponibles una serie de animaciones predefinidas disponibles como métodos de extensión para elementos de tipo View. Contamos con animaciones para realizar rotaciones, escalados, tralaciones, etc. Los métodos de extensión a utilizar son:

  • FadeTo: Podemos animar la opacidad de un elemento visual.
  • RelRotateTo: Podemos especificar un ángulo de rotación para realizar transformaciones de rotación.
  • RelScaleTo: Transformación de escalado.
  • RotateTo: Transformación de rotación.
  • RotateXTo: Transformación de rotación.
  • RotateYTo: Transformación rotación.
  • ScaleTo: Transformación de escalado.
  • TranslateTo: Estableciendo las propiedades TranslationX y TranslationY podemos realizar traslaciones del elemento visual.

En caso de necesitar animaciones más complejas podemos utilizar las extensiones de animación. Contamos con varias sobrecargas del método Animate que nos permite definir animaciones más complejas.

Podemos crear un ejemplo sencillo donde probar tanto las animaciones predefinidas como las personalizadas. En la interfaz añadimos dos cuadrados (BoxView) con dos botones:

<StackLayout>
    <Label Text="Pre-defined Animations" />
    <BoxView
      x:Name="PreDefinedBox"
      HorizontalOptions="Center"
      VerticalOptions="Center"
      HeightRequest="125"
      WidthRequest="125"
      BackgroundColor="Red"/>
    <Button
      x:Name="PreDefinedButton"
      HorizontalOptions="Center"
      VerticalOptions="Center"
      Text="Animate"/>
    <Label Text="Custom Animations" />
    <BoxView
      x:Name="CustomBox"
      HorizontalOptions="Center"
      VerticalOptions="Center"
      HeightRequest="125"
      WidthRequest="125"
      BackgroundColor="Blue"/>
    <Button
      x:Name="CustomButton"
      HorizontalOptions="Center"
      VerticalOptions="Center"
      Text="Animate"/>
</StackLayout>

El primer botón animará la primera caja con animaciones predefinidas:

await PreDefinedBox.ScaleTo(2, 1000, Easing.CubicInOut);              
await PreDefinedBox.RotateTo(75, 1000, Easing.CubicInOut);                
await PreDefinedBox.ScaleTo(1, 1000, Easing.CubicInOut);

Realizamos un escalado al doble del tamaño, rotamos 75º y volvemos a escalar al tamaño original.

Sencillo, ¿verdad?

En caso de necesitar realizar animaciones personalizadas más complejas, podemos utilizar el método Animate:

CustomBox.Animate("Custom Animation", x => 
{
     CustomBox.BackgroundColor = Color.FromRgb(x, 0, 1 - x);
     CustomBox.Scale = 1 + 1.1 * x;                
}, length: 500);

Realizamos un cambio de color y escalado.

El resultado en ambos casos:

Animaciones en Xamarin.Forms

Animaciones en Xamarin.Forms

El ejemplo lo podéis encontrar en GitHub:

Ver GitHub

Xamanimation

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.

Podemos definir animaciones en XAML a un elemento visual al cargar mediante un Behavior, usar un trigger en XAML para ejecutar la animación a voluntad al lanzar el trigger o bien desde código C#.

Animaciones disponibles

La librería cuenta una gran variedad de animaciones:

  • FadeTo
  • Flip
  • Heart
  • Jump
  • Rotate
  • Scale
  • Shake
  • Translate
  • Turnstile

Animando desde XAML

Una de las ventajas principales de la librería es la posibilidad de uso de animaciones desde XAML. Debemos utilizar el siguiente namespace:

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

Al igual que en el ejemplo anterior, vamos a animar un cuadrado:

 <BoxView
     x:Name="FadeBox"
     HeightRequest="120"
     WidthRequest="120"
     Color="Blue" />

Tanto a nivel de recursos de aplicación como de vista, podemos definir animaciones:

<xamanimation:FadeToAnimation
     x:Key="FadeToAnimation"
     Target="{x:Reference FadeBox}"
     Duration="2000"
     Opacity="0"/>

Utilizando el namespace de xamanimation, tenemos acceso a todo el conjunto de animaciones disponible en la librería. En todas ellas hay una serie de parámetros comunes como:

  • Target: Nos permite indicar el elemento visual al que le aplicaremos la animación.
  • Duration: Duración de la animación en milisegundos.

Según el tipo de animación utilizada contaremos con más parámetros para personalizar la animación específica. Por ejemplo, en el caso de Fade contaremos con una propiedad Opacity para establecer como modificamos la opacidad.

Para lanzar la animación tenemos dos opciones:

  • Trigger: Llamado BeginAnimation que nos permite lanzar una animación al producirse una condición.
  • Behavior: Contamos con un Behavior llamado BeginAnimation que podemos asociar a un elemento visual de modo que que indicando la animación deseada, podemos lanzar la misma cuando se produzca la carga del elemento.

Utilizando el evento Clicked de un botón podemos lanzar la animación anterior utilizando el trigger facilitado por la librería:

<Button         
     Text="Fade">
     <Button.Triggers>
          <EventTrigger Event="Clicked">
               <xamanimation:BeginAnimation
                    Animation="{StaticResource FadeToAnimation}" />
          </EventTrigger>
     </Button.Triggers>        
</Button>

Sencillo, ¿cierto?. También contamos con el concepto de Storyboard como un conjunto de animaciones que podemos ejecutar a lo largo del tiempo:Animations 02

<xamanimation:StoryBoard
     x:Key="StoryBoard"
     Target="{x:Reference StoryBoardBox}">
       <xamanimation:ScaleToAnimation  Scale="2"/>
       <xamanimation:ShakeAnimation />
</xamanimation:StoryBoard>

El ejemplo anterior ejecutaría un escalado al doble del tamaño original y tras escalar realizaría una “agitación”.

Animando desde C#

De igual forma que podemos utilizar las animaciones de la librería desde XAML, podemos hacerlo desde código C#. Contamos con un método de extensión llamado Animate que espera una instancia de cualquiera de las animaciones disponibles.

Si deseamos animar de nuevo un cuadrado llamado AnimationBox:

 
<BoxView
     x:Name="AnimationBox"
     HeightRequest="120"
     WidthRequest="120"
     Color="Blue" />

Bastará con acceder al elemento, utilizar el método Animate con la animación deseada:

AnimationBox.Animate(new HeartAnimation());

Podéis ver un subconjunto de las animaciones disponibles en acción a continuación:

Xamanimation

Xamanimation

El ejemplo lo podéis encontrar en GitHub:

Ver GitHub

Recordad que cualquier tipo de comentario, sugerencia o duda la podéis dejar en los comentarios de la entrada.

¿Y que esperar de la librería?

El código fuente esta disponible en GitHub y hay libertad absoluta para realizar con el lo que estiméis oportuno. Si deseáis colaborar, sin duda se aceptarán Pull Request. La librería seguirá evolucionando próximamente con:

  • Más opciones en cada animación (modo repetición)
  • Más animaciones (Color, Wobble, etc.)
  • Y otras novedades!

Más información

2 pensamientos en “[Xamarin.Forms] Animaciones y nueva librería

  1. Buenas noches, tengo un pequeño problema, cuando le doy click en repetidas ocasiones, el control que envio sea un viewbox o una imagen crece y crece, si le doy click una vez espero y despues o traves el control no crece, me puede ayudar por favor.

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 )

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 )

Google+ photo

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

Conectando a %s