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.
En la primera DEMO que vimos, analizamos cada uno de los tipos de animaciones descritos previamente:
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.
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:
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:
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: