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
Windows Presentation Foundation provee una serie de características gráficas y de layout
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.
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
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.