Realizando Animaciones en Silverlight
Normalmente una animación una animación ejecuta una serie de frames que se ejecutan secuencialmente. Una animación Silverlight se encuentra basada en un modelo diferente en el cual se modifica una propiedad de dependencia sobre un intervalo de tiempo. Para crear una animación se requieren de tres pasos el primero crear el objeto animation para realizar la animación, el segundo crear un storyboard para manejar la animación y tercero un manejador de un evento que inicie la animación.
La clase animación incluye 2 formas de generar la animación:
Interpolación lineal: En este tipo de animaciones se estable un estado inicial y final con la duración de la animación y Silverlight se encarga de establecer la secuencia de los frames y la animación puede variar sobre la línea de tiempo y se pueden aplicar patrones complejos como efectos de aceleración y deceleración. Para realizar este tipo de animación, Silverlight incluye 3 clases llamadas DoubleAnimation, PointAnimation, ColorAnimation
Animaciones por key-frame: la animación salta de un frame a otro y pueden combinar los saltos con periodos de interpolación lineal. Para realizar este tipo de animaciones Silverlight incluye 4 clases llamadas DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ColorAnimationUsingKeyFrames y ObjectAnimationUsingKeyFrames.
Como primer paso para crear una animación es agregar al sistema de recursos en este caso lo he agregado a la definición de los recursos a nivel de pagina. La declaración de un DoubleAnimation consiste en definir el valor inicial mediante su propiedad FROM y su estado final mediante la propiedad TO y definir el tiempo de duración de la animación mediante la propiedad DURATION al cual he establecido en 200 milisegundos.
Como segundo pasa es crear un storyboard para manejar la animación, mediante el storyboard podremos definir el elemento que será afectado por la animación junto con la propiedad a la que se le realizara la interpolación de cambios durante la ejecución de la animación.
Como ultimo pasado debemos crear un manejador de un evento que inicie la animación. Por esta razón le he definido al elemento button al cual he llamado “rect” un manejador para el evento clic para cuando se invoque este evento inicie la animación.
Antes de hacer clic en el button rect
Después de hacer clic
Animaciones un poco más complejas
En la parte anterior mostré como crear una sencilla animación pero sin duda alguna necesitaras animaciones más complejas para esto el storyboard esta diseñado para soportar más animaciones dentro y adicionalmente la clase storyboard proporciona 3 propiedades adjuntas llamadas Storyboard.Target, Storyboard.TargetName y Storybord.TargetProperty.
Como puedes observar dentro del storyboard agregué un segundo objeto del tipo DoubleAnimation en el cual a cada uno le establecí una propiedad diferente a la que debe apuntar. Puedes incluso definir que cada animación apunte a un elemento diferente usando la propiedad adjunta Storyboard.TargetName, de esta manera al iniciar el storyboard se animaran dos elementos diferentes.
saludos,
MANUEL FERNANDO