Silverlight - Animación
La animación le permite crear interfaces de usuario verdaderamente dinámicas. A menudo se utiliza para aplicar efectos, por ejemplo, iconos que crecen cuando se mueve sobre ellos, logotipos que giran, texto que se desplaza hacia la vista, etc.
A veces, estos efectos parecen un brillo excesivo. Si se utilizan correctamente, las animaciones pueden mejorar una aplicación de varias formas. Pueden hacer que una aplicación parezca más receptiva, natural e intuitiva.
Por ejemplo, un botón que se desliza hacia adentro cuando hace clic en él se siente como un botón físico real, no solo como otro rectángulo gris. Las animaciones también pueden llamar la atención sobre elementos importantes y guiar al usuario a través de las transiciones a contenido nuevo.
El enfoque de Silverlight para la animación es declarativo en lugar de centrarse en secuencias de animaciones de cuadros.
Definición de animaciones
Las animaciones se definen normalmente en las secciones de recursos. De hecho, suelen estar envueltos en un elemento de storyboard, que veremos en detalle en breve.
Proporciona un método Begin (), por lo que la animación se puede invocar desde el código.
Las animaciones también se pueden colocar dentro de los elementos de estado visual en una plantilla de control.
Animación declarativa
Las animaciones en Silverlight son declarativas. Describen lo que le gustaría que sucediera. Déjele a Silverlight que averigüe cómo hacer que eso suceda. Por lo tanto, las animaciones suelen seguir el patrón que le decimos a Silverlight lo que nos gustaría cambiar.
Esta es siempre una propiedad en algunos elementos con nombre, es decir TargetName y TargetProperty.
<DoubleAnimation
Storyboard.TargetName = "myRectangle"
Storyboard.TargetProperty = "Opacity"
From = "0" To = "1"
Duration = "0:0:5"
/>Decimos cómo nos gustaría que cambiara esa propiedad en este caso, estamos cambiando la opacidad de un valor de cero a un valor de uno. En otras palabras, nos gusta que los elementos de destino se desvanezcan de opacos a transparentes.
Por último, decimos cuánto tiempo nos gustaría que tomara esto, en este caso tomará cinco segundos.
el significado del doble en esta animación doble es que apunta a una propiedad que tiene el tipo doble, por lo que un valor de punto flotante.
Si desea animar una propiedad que representa un color, utilice una animación de color.
Echemos un vistazo a un ejemplo sencillo de doble animación. A continuación se muestra el código XAML en el que se agregan dos botones, un rectángulo y dos storyboards.
<UserControl x:Class = "DoubleAnimationExample.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
<UserControl.Resources>
<Storyboard x:Name = "fadeDown">
<DoubleAnimation
Storyboard.TargetName = "myRectangle"
Storyboard.TargetProperty = "Opacity"
From = "1" To = "0"
Duration = "0:0:5" />
</Storyboard>
<Storyboard x:Name = "fadeUp">
<DoubleAnimation
Storyboard.TargetName = "myRectangle"
Storyboard.TargetProperty = "Opacity"
From = "0" To = "1"
Duration = "0:0:5" />
</Storyboard>
</UserControl.Resources>
<Grid x:Name = "LayoutRoot">
<Rectangle x:Name = "myRectangle"
Fill = "Blue" Width = "300" Height = "100"
HorizontalAlignment = "Center"
VerticalAlignment = "Top" Margin = "0,30" />
<Button x:Name = "fadeUpButton" Content = "Up" Width = "80"
Height = "30" HorizontalAlignment = "Left"
VerticalAlignment = "Top" Margin = "50,140,0,0"
Click = "fadeUpButton_Click" />
<Button x:Name = "fadeDownButton" Content = "Down"
Width = "80" Height = "30" HorizontalAlignment = "Left"
VerticalAlignment = "Top" Margin = "50,180,0,0"
Click = "fadeDownButton_Click" />
</Grid>
</UserControl>Aquí está la implementación para diferentes eventos en C #.
using System.Windows;
using System.Windows.Controls;
namespace DoubleAnimationExample {
public partial class MainPage : UserControl {
public MainPage() {
InitializeComponent();
}
private void fadeUpButton_Click(object sender, RoutedEventArgs e) {
fadeUp.Begin();
}
private void fadeDownButton_Click(object sender, RoutedEventArgs e) {
fadeDown.Begin();
}
}
}Cuando se compile y ejecute el código anterior, verá el siguiente resultado.
Repetir y revertir
Las animaciones ofrecen algunas propiedades para repetir automáticamente y todas las animaciones inversas.
Si establece la propiedad de comportamiento de repetición en un tiempo de spam, la animación se repetirá hasta que haya transcurrido la cantidad de tiempo especificada o simplemente puede decirle cuántas veces le gustaría que se repita.
Esto admite puntos decimales para que pueda repetir cuatro veces y media.
Puede repetir para siempre y también puede decirle a la animación que una vez que llegue al final, debería ejecutarse en reversa al inicio.
Animación de fotogramas clave
A menudo, una simple animación de A a B es demasiado simple. Por ejemplo, desea animar una pelota que rebota en el suelo. Este no es un simple movimiento de punto a punto. La bola cae, se acelera gradualmente y luego invierte su dirección cuando golpea el fondo. Disminuye la velocidad de nuevo a medida que regresa a la cima de su recorrido.
Echemos un vistazo a un ejemplo sencillo de Key Frame animation.
A continuación se muestra el código XAML, que contiene una elipse y una animación doble con fotogramas clave.
<UserControl x:Class = "LinearKeyFrames.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
Width = "400" Height = "300">
<UserControl.Resources>
<Storyboard x:Name = "ballAnim" SpeedRatio = "0.2">
<DoubleAnimation From = "0" Duration = "00:00:03" To = "96"
Storyboard.TargetName = "ellipse"
Storyboard.TargetProperty = "(Canvas.Left)" />
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName = "ellipse"
Storyboard.TargetProperty = "(Canvas.Top)">
<LinearDoubleKeyFrame KeyTime = "00:00:00" Value = "0"/>
<LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" />
<LinearDoubleKeyFrame KeyTime = "00:00:01" Value = "48"/>
<LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/>
<LinearDoubleKeyFrame KeyTime = "00:00:02" Value = "48"/>
<LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/>
<LinearDoubleKeyFrame KeyTime = "00:00:03" Value = "0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name = "LayoutRoot" Background = "White">
<Canvas>
<Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" />
</Canvas>
</Grid>
</UserControl>Aquí está la implementación para mouse left evento button down, que comenzará la animación cuando el usuario presione el botón izquierdo del mouse en la página web.
using System.Windows.Controls;
using System.Windows.Input;
namespace LinearKeyFrames {
public partial class MainPage : UserControl {
public MainPage() {
InitializeComponent();
this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
}
void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
ballAnim.Begin();
}
}
}Cuando se compile y ejecute el código anterior, verá el siguiente resultado.
Al hacer clic en la página web, verá que la bola comienza a moverse.
