[#WPhoneIO] Material del hangout “Behaviors, Animaciones y VisualStates”

El evento

El pasado Jueves 19 de Junio tuvo lugar un nuevo Hangout #wphoneio de desarrolloweb.com en el que nos reunimos Josué Yeray, Rafa Serna  y un servidor para abordar un conjunto de conceptos sumamente útiles pero no muy extendidos en el uso habitual, Behaviors, Animaciones y Visual States.

El material

La grabación la podéis volver a ver a continuación:

En mi caso, tuve el placer de pode analizar las animaciones en  aplicaciones Universales. Vimos varios puntos:

  • Introducción al sistema de animaciones. Conociendo StoryBoards
  • Tipos de animaciones
  • Definiendo frames (funciones easing)
  • Como gestionar animaciones con behaviors

Tenéis disponible la presentación utilizada:

El elemento Storyboard define el comportamiento de la animación mediante sus propiedades:

  • Duration. Tiempo total que va a durar la animación.
  • BeginTime. Tiempo a esperar antes de ejecutar el primer frame. Necesario si queremos lanzar y sincronizar distintas animaciones.
  • AutoReverse: AL terminar se ejecuta la animación al revés automáticamente.
  • RepeatBehavior: Define el comportamiento de repetición. Puede contener un número que indica el número de veces que se repetirá la animación, o la palabra Forever, que indica que se repetirá continuamente hasta que explícitamente paremos.
  • SpeedRatio. Velocidad de reproducción.

Contamos con gran variedad de tipos diferentes de animación. De cada opción disponibles además contamos con dos versiones, una simple que nos permite sencillamente indicar un valor final y una duración y una variante más compleja que nos permite definir una colección de frames para la animación:

  • DoubleAnimation/ DoubleAnimationUsingKeyFrames, propiedades numéricas.
  • ColorAnimation / ColorAnimationUsingKeyFrames, propiedades basadas en colores.
  • PointAnimation / PointAnimationUsingKeyFrames, propiedades basadas en puntos.
  • ObjectAnimationUsingKeyFrames, cualquier tipo de propiedad diferentes a las anteriores.
Ejemplo básico de animación

Ejemplo básico de animación

En la primera DEMO que vimos, analizamos cada uno de los tipos de animaciones descritos previamente:

PointAnimation en acción!

PointAnimation en acción!

Podéis descargar el ejemplo a continuación:

Continuamos viendo los tipos disponibles en cada frame, instante en el tiempo de la animación:

  • Linear, usa una interpolación lineal entre frames para animar la propiedad.
  • Discrete, usa una interpolación discreta entre frames para animar la propiedad.
  • Easing, usa una función de easing para modificar la interpolación entre frames.
  • Spline, usa un Spline para definir la interpolación entre frames.
BounceEase, efectos de rebote

BounceEase, efectos de rebote

Podéis descargar el ejemplo a continuación:

Por último, aplicamos todo lo visto en una “aplicación real”. Nos enfrentamos a un poblema real. Contamos con una aplicación que conecta con un servicio REST que obtiene la clasificación de pilotos de la Fórmula 1. Desde que realizamos la petición al servicio hasta que mostramos el resultado pasan en ocasiones unos milisegundos. Utilizando las herramientas de depuración y testing que tenemos a nuestro alcance, en ocasiones nos damos cuentas de errores por nuestra parte que nos permiten mejorar la celeridad con la que se obtienen los datos (dobles llamadas, cálculos que podemos agilizar, excepciones, etc.). Sin embargo, hay otras en las que no podemos mejorar más. En estos casos, el usuario sigue esperando una aplicación robusta, rápida y fluida. Gracias al uso de behaviors y animaciones podemos trasmitir una falsa fluidez.

Podéis ver el resultado sin usar animaciones:

Sin usar animaciones

Sin usar animaciones

Si nada mas entrar en la vista, animamos el título atrayendo la atención del usuario y a continuación con un leve efecto de fading vamos mostrando cada resultado segun vamos obteniendolo, el resultado es:

Usando animaciones

Usando animaciones

El segundo con la pantalla en blanco que trasmitimos sin usar animaciones queda resuelto y todo con muy pocas líneas de código!

Los behaviors nos permiten desde nuestro XAML realizar acciones.

Contamos con dos trigger principales que nos permiten lanzar un beehavior segun algun tipo de acción o cambio:

  • DataTriggerBehavior. Este trigger nos permite ejecutar behaviors basándonos en datos para definir cuando comenzar la ejecución.
  • EventTriggerBehavior. Nos permite definir un evento, que al lanzarse, ejecutará nuestros behaviors.

El behavior a utilizar para gestionar animaciones es ControlStoryboardAction.

Podéis descargar el ejemplo a continuación:

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 )

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