In Silverlight, animations can enhance your Web site by adding movement and interactivity. By animating a background color or applying an animated transform, you can create dramatic screen transitions or provide helpful visual cues. This QuickStart shows you how to create basic animations by changing property values and by using key frames.
This QuickStart contains the following sections:
For a complete description of animations, see Animation Overview in the Silverlight documentation on MSDN.
Animating a Double Property
Animations in Silverlight are created by animating property values of objects. For example, you can animate the width of a rectangle, the angle of a RotateTransform,
or the color value of a button. In the following example, the Opacity property is animated. To try this example, click the rectangle to see it fade in and out of view indefinitely.
XAML
<StackPanel x:Name="rootElement">
<StackPanel.Resources> <Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</StackPanel.Resources>
<Rectangle MouseLeftButtonDown="Mouse_Clicked"
x:Name="MyAnimatedRectangle"
Width="100" Height="100" Fill="Blue" />
</StackPanel>
C#
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
myStoryboard.Begin();
}
Visual Basic
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
myStoryboard.Begin
End Sub
The following sections discuss the steps for animating the Opacity property and examine the XAML that is used for each step.
Identifying the Property to Animate
In this example, you are animating the Opacity property of a rectangle. You do not have to declare the property you want to animate on the object itself. However, you typically name the object that you want to animate. Naming the object makes it easier to specify which object is being targeted by the animation. The following XAML shows how to name the rectangle MyAnimatedRectangle.
<Rectangle x:Name="MyAnimatedRectangle" ...
Creating a Storyboard and Making it a Resource
A Storyboard is the container that you put animation objects in. You have to make the Storyboard a resource that is available to the object that you want to animate. The following XAML shows how to make the Storyboard a resource of the root element (StackPanel).
<StackPanel x:Name="rootElement">
<StackPanel.Resources> <Storyboard x:Name="myStoryboard">
<!-- Animation objects go here. -->
<StackPanel.Resources>
<StackPanel>
...
Adding an Animation Object to the Storyboard
Because the value of the property you are animating (Opacity) uses a double, this example uses the DoubleAnimation object. An animation object specifies what is animated and how that animation behaves. The following XAML shows how the DoubleAnimation is added to the Storyboard.
...
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
...
This DoubleAnimation object specifies the following animation:
Storyboard.TargetProperty="Opacity" specifies that the Opacity property is animated.Storyboard.TargetName="MyAnimatedRectangle" specifies which object this property is animating (the rectangle).From="1.0" To="0.0" specifies that the Opacity property starts at a value of 1 and animates to 0 (starts opaque and then fades).Duration="0:0:1" specifies how long the animation lasts (how fast the rectangle fades). Because the Duration property is specified in the form of "hours:minutes:seconds", the duration used in this example is one second.AutoReverse="True" specifies that when the animation ends, it goes in reverse. In the case of this example, it fades and then reverses to full opacity.RepeatBehavior="Forever" specifies that when the animation starts, it continues indefinitely. In this example, the rectangle fades in and out continuously.
Starting the Animation
The most versatile way to start an animation is to use an event such as clicking or loading. In this example, the MouseLeftButtonDown event is attached to the rectangle so that when the user clicks the rectangle, the animation begins.
...
<Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle"
Width="100" Height="100" Fill="Blue" />
...
The Storyboard (the animation) is started by using the Begin method of the Storyboard.
myStoryboard.Begin()
Note
You can use code (for example, C# or Visual Basic) instead of XAML to set up an animation. For an example, see Animation Overview in the MSDN Library.
Animating a Color Property
The previous example showed how to animate a property that used a value of double. What if you want to animate a color? Silverlight provides animation objects that are used to animate other types of values. The following basic animation objects animate properties of double, color, and point, respectively:
Note
You can also animate properties that use objects. For more information, see the Advanced Animations section.
The following example shows how to create a color animation. To try this example, click the rectangle to change the background color of the canvas from red to green over 4 seconds.
XAML
<StackPanel MouseLeftButtonDown="Mouse_Clicked">
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<ColorAnimation Storyboard.TargetName="mySolidColorBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Green" Duration="0:0:4" />
</Storyboard>
</StackPanel.Resources>
<StackPanel.Background>
<SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
</StackPanel.Background>
</StackPanel>
C#
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
myStoryboard.Begin();
}
Visual Basic
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
myStoryboard.Begin
End Sub
Starting, Stopping, Pausing, and Resuming
The previous example showed how to start an animation by using the Begin method. Storyboard also has Stop, Pause, and Resume methods that can be used to control an animation. The following example creates four buttons that enable the user to control the animation of an Ellipse across the screen. To try this example, click the buttons to see how the animation behaves.
XAML
<Canvas>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<PointAnimation Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5"
From="20,200"
To="400,100"
RepeatBehavior="Forever" />
</Storyboard>
</Canvas.Resources>
<Path Fill="Blue">
<Path.Data>
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="20,20" RadiusX="15" RadiusY="15" />
</Path.Data>
</Path>
<StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
<Button Click="Animation_Begin"
Width="65" Height="30" Margin="2" Content="Begin" />
<Button Click="Animation_Pause"
Width="65" Height="30" Margin="2" Content="Pause" />
<Button Click="Animation_Resume"
Width="65" Height="30" Margin="2" Content="Resume" />
<Button Click="Animation_Stop"
Width="65" Height="30" Margin="2" Content="Stop" />
</StackPanel>
</Canvas>
C#
private void Animation_Begin(object sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
myStoryboard.Stop();
}
Visual Basic
Private Sub Animation_Begin(ByVal sender As Object, ByVal e As RoutedEventArgs)
myStoryboard.Begin
End Sub
Private Sub Animation_Pause(ByVal sender As Object, ByVal e As RoutedEventArgs)
myStoryboard.Pause
End Sub
Private Sub Animation_Resume(ByVal sender As Object, ByVal e As RoutedEventArgs)
myStoryboard.Resume
End Sub
Private Sub Animation_Stop(ByVal sender As Object, ByVal e As RoutedEventArgs)
myStoryboard.Stop
End Sub
Advanced Animations (Key-Frame Animations)
Up to now, the examples in this QuickStart have shown animating between two values. (These are called From/To/By animations.) Key-frame animations let you use more than two target values and control an animation's interpolation method. By specifying multiple values to animate, you can make more complex animations. By specifying the animation's interpolation (specifically, by using the KeySpline
property), you can control the acceleration of an animation.
The following example shows how to use a key-frame animation to animate the height of a rectangle. To try this example, click the rectangle to see the effect.
XAML
<StackPanel Background="#FDF5E6">
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Height">
<LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />
<SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300"
KeyTime="0:0:0.8" />
<SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
KeyTime="0:0:1.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</StackPanel.Resources>
<Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue"
Width="200" Height="30" />
</StackPanel>
C#
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
myStoryboard.Begin();
}
Visual Basic
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
myStoryboard.Begin
End Sub
The XAML includes the following three key frames. Each key frame specifies a value to animate to at a certain time. The entire animation takes 1.5 seconds.
- The first key frame is a LinearDoubleKeyFrame. LinearTypeKeyFrame objects such as LinearDoubleKeyFrame create a smooth, linear transition between values. However, in this example, it is just used to specify that the animation is at value 30 at time 0.
- The second key frame (SplineDoubleKeyFrame) specifies that the height of the rectangle is 300 at time 0.8 seconds after the animation begins. SplineTypeKeyFrame objects such as SplineDoubleKeyFrame create a variable transition between values according to the value of the KeySpline property. In this example, the rectangle begins by moving slowly and then speeds up toward the end of the time segment.
- The third key frame (SplineDoubleKeyFrame) specifies that the height of the rectangle is 250 at time 1.5 seconds after the animation begins (0.7 seconds after the last SplineDoubleKeyFrame ended). In contrast to the last SplineDoubleKeyFrame, this key frame makes the animation start off fast and slow down toward the end.
Perhaps the trickiest property used by the SplineDoubleKeyFrame is the KeySpline property. This property specifies the first and second control points of a Bezier curve, which describes the acceleration of the animation.
See Also
Send Feedback
