Animaciones en WPF

Windows Presentation Foundation provee una serie de características gráficas
y  de  layout  que  permitirán  generar  interfaces  de  usuario  ricos,  usables  y
realmente espectaculares mediante la inserción de eventos dinámicos.
Al ser características muy atractivas y sencillas de  incluir,  las animaciones en
WPF  se  convierte  en  blanco  perfecto  para  el  abuso,  por  lo  que  el  resultado
podría  ser un  interfaz de usuario  inmanejable. Por  ello,  la  aplicación de  este
tipo de características ha de estar medida y estudiada para provocar al usuario
emociones positivas y no todo lo contrario.
En este capítulo nos centraremos en cómo crear estas animaciones utilizando
las  dos  técnicas  existentes  en  nuestros  interfaces  de  usuario,  a  saber,  las
animaciones basadas  en  tiempo  y  las  animaciones basadas  en  frames, ya  sea
utilizando  la herramienta Microsoft Expression Blend o directamente a mano
mediante XAML.

Time-based animation vs Frame-based animation

Centremonos  en  como  son  las  animaciones  en WPF.  Cuando  hablamos  de
animaciones  lo  normal  es  pensar  en  diferentes  imágenes  estáticas  que  se
cambian rápidamente para generar el efecto de animación. En WPF esto no es
así,  realmente  lo  que  hacemos  es  modificar  el  valor  de  una  dependency
property  específica  durante  un  tiempo  determinado  o  unos  frames
determinados.

Clase Animation

En el namespace System.Windows.Media.Animation existen varias clases que
nos  permitirán  realizar  animaciones  sin  mayor  complejidad.  Es  importante
recalcar  que  estas  clases  solo  soportan  la  modificación  de  un  tipo  de
propiedad:  Dependency  Properties,  y  que  son  independientes  del  hardware

donde  se  ejecuten. Si ejecutamos una  animación WPF  en una máquina muy
potente esta solo irá más suave.
Otro punto  a destacar  es que debido  a  los diferentes  tipos de datos posibles
para una dependency property, existen diferentes  tipos de Animaciones para
cada  tipo,  es  decir,  para  los  tipos  de  datos  Double  existe  la  clase
DoubleAnimation.  Por  defecto WPF  contiene  diferentes  clases  para  soportar
los veintidos tipos de datos diferentes.

 

Clase Timeline

La  clase  abstracta  Timeline  es  de  las  clases más  importantes  ya  que  de  ella
derivan todas las animaciones disponibles. 

Esta clase expone diferentes miembros, a saber:

BeginTime

Asigna  un  retardo  antes  de  que  la  animación  comience.  Es  importa
sincronizar diferentes animaciones que comiencen a la vez.

Duration

Asigna  la  cantidad  de  tiempo  en  la  que  la  animación  se  estará  ejecutando,
desde el inicio al final. 

 

SpeedRatio

Acelera o decelera la velocidad de la animación. Por defecto el valor es 1. Si lo
incrementamos la animación finalizará más rápidamente, y si por el contrario
disminuimos  ese  número  la  animación  se  verá  más  lenta.  Modificando  la
propiedad Duration podríamos obtener el mismo resultado.
AccelerationRatio and DecelerationRatio
Gracias a estas propiedades podemos crear animaciones no  lineales, es decir,
podemos comenzar acelerando la animación al principio de esta y decelerando
al final. Ambos valores son de 0 a 1 y no pueden exceder en 1 el total de ambos
valores.

 

AutoReverse

Propiedad de tipo verdadero o falso donde indicamos que animación se vuelva
a reproducir al  reves una vez haya  terminado hasta  llegar al valor original de
partida. Esto por tanto, duplica el tiempo de la animación.

 

FillBehavior

Determina que ocurre cuando la animación finaliza.

 

RepeatBehavior

Permite  repetir  una  animación  un  número  determinado  de  veces  o  por  un
intervalo de tiempo en concreto.

Key Frame Animation

Este  tipo de animación es usada para cuando  tenemos varios  segmentos que
queremos mover  regularmente.  Es  decir,  permite  controlar  animaciones  que
tienen  varios  valores  cambiantes,  además  de  ser  soportar  métodos  para
controlar la interpolación en las animaciones.
Como definición de una animación basada en KeyFrames debemos realizar lo
siguientes pasos, varios de ellos parecidos a los necesarios a la hora de definir
una animación basada en tiempo:

  • Declarar la animación y definir la duración de la misma mediante la
    propiedad Duration.
  • Crear  un  key  frame  del  tipo  apropiado  al  valor  de  la  propiedad  a
    modificar. Esto es elegir el tipo de interpolación, más el tipo de dato
    y  buscar  el  tipo  de  key  frame  valido  (LinearDoubleKeyFrame,
    LinearPointKeyFrame, DiscretePointKeyFrame, etc). 
  • Asignar el valor y el KeyTime deseado.
  • Asociar la animación con una propiedad.
Interpolación

Se  ha  hablado  de  interpolación  varias  veces  hasta  ahora.  ¿Qué  es  eso  de  la
interpolación? La interpolación en la animación es cómo una animación pasa a
través  los  diferentes  valores  en  una  duración  determinada, marcada  por  la
propia animación. Podemos distinguir  tres métodos de  interpolación: Linear,
Discrete y Splined.

  • Linear :La  animación  progresará  en  una  frecuencia  constante  en  un  intervalo  de
    tiempo concreto.
  • Discrete :Con este método  la animación  saltará de un valor a otro  sin  interpolar entre
    ellos.
  • Splined :Con  este método  se  consiguen  animaciones más  realista  ya  que  tenemos  el
    control  en  cuanto  a  aceleración  y  deceleración  provocando  resultados  más
    semejantes al mundo real.

En el siguiente post veremos como crear una animación con Expression Blend

4 comentarios sobre “Animaciones en WPF”

  1. Hola Oscar

    Yo estoy preparándome la certificación 70-502 con el curso oficial de Microsoft.

    El asunto de las animaciones es duro de roer, sobre todo para programadores de gestión como yo, que tenemos que introducirnos en un mundo insólito y raro para nosotros. A veces un muy sencillo ejemplo saca de dudas a todos.

    Quisiera sugerirte que para estos asuntos que sean algo raros nos pongas un link a cualquier web donde se ejemplarize cada caso, una imagen vale más que mil palabras y puede significar el poder llegar a entender algo o no.

    Gracias y enhorabuena por tus post.

  2. Hola Julio, suerte con tu certificación, este post era un poco de teoria y el siguiente que estoy haciendo tambien, pero estoy preparando uno de como hacer animaciones paso a paso para que podais hacerlas vosotros y experimenteis

  3. Hola, mira tengo el problema de que necesito realizar una animación, pero, utilizando un arreglo de posiciones el cual cambia dependiendo de lo que escriba el usuario, la animación se debe de realizar después de que se calcule el vector de posiciones.

    Que me podria hacer para que mi animación se base en los datos de este arreglo.

    También felicitaciones por el blog me explico muchas cosas que no entendia.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *