Animation Overview

Introducing Animations

Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. The brain perceives the group of images as a single changing scene. In film, this illusion is created by using cameras that record many photographs, or frames, each second. When the frames are played back by a projector, the audience sees a moving picture. In Silverlight, you animate objects by applying animation to their individual properties. For example, to make a UIElement grow, you animate its Width and Height properties. To make a UIElement fade from view, you animate its Opacity property. Silverlight contains many objects that have properties that can be animated.

Note:
In Silverlight, you can perform simple animations only on properties whose values are of type Double, Color, or Point. In addition, you can animate properties of other types by using ObjectAnimationUsingKeyFrames, but this is done using discrete interpolation (jumping from one value to another), which is not what most people consider to be true animation.

The next section shows how to create a simple animation that makes a Rectangle, a type of UIElement, fade in and out of view.

Making a UIElement Fade In and Out of View

This example shows how to use a Silverlight animation to make a Rectangle fade in and out of view by animating a property value. It uses a DoubleAnimation, which is a type of animation that generates Double values, to animate the Opacity property of a Rectangle. As a result, the Rectangle fades in and out of view. To see a preview of the animation you will be walked through, click the link below to run the sample and then click on the rectangle to begin the animation.

Run this sample.

The first part of the example creates a Rectangle element and displays it in a StackPanel.

<StackPanel>
  <Rectangle MouseLeftButtonDown="Mouse_Clicked"
    x:Name="MyAnimatedRectangle"
    Width="100" Height="100" Fill="Blue" />
</StackPanel>

To create an animation and apply it to the rectangle's Opacity property, you do the following:

Create a DoubleAnimation
Create a Storyboard
Begin the Storyboard in response to an event

These steps are discussed in detail in the following sections. For the full example, see the Complete Example section.

Creating a DoubleAnimation

Because the Opacity property is of type Double, you need an animation that produces Double values. A DoubleAnimation is one such animation; it creates a transition between two Double values. To specify the starting value of the DoubleAnimation, you set its From property. To specify its ending value, you set its To property.

An opacity value of 1.0 makes the object completely opaque, and an opacity value of 0.0 makes it completely invisible. To make the animation transition from 1.0 to 0.0, you set its From property to 1.0 and its To property to 0.0.
```
<DoubleAnimation From="1.0" To="0.0"  />
```
Specify a Duration for the animation. The Duration property of an animation specifies how long it takes to go from its starting value to its destination value. The following example sets the duration of the animation to one second.
```
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" />
```
The preceding example creates an animation that transitions from 1.0 to 0.0, which causes the target element to fade from completely opaque to completely invisible. To make the element fade back into view after it vanishes, set the AutoReverse property to true. To make the animation repeat indefinitely, set its RepeatBehavior property to Forever.
```
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" 
  AutoReverse="True" RepeatBehavior="Forever"/>
```

Creating a Storyboard

To apply an animation to an object, you create a Storyboard object and use the TargetName and TargetProperty attached properties to specify the object and property to animate.

Create the Storyboard and add the animation as its child.
```
<Storyboard>
  <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
```
Although the Storyboard in this example contains only a single animation, you may add multiple animations.
Use the TargetName attached property to specify the object to animate. In the following code, the DoubleAnimation is given a target name of myAnimatedRectangle, which is the name of the object to animate.
```
<Storyboard>
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
```

Use the TargetProperty attached property to specify the property to animate. In the following code, the animation is configured to target the Opacity property of a Rectangle.

<Storyboard>
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle" 
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

Associating the Storyboard with an Event

At this point you have specified the target object of the animation and how the animation behaves; now you need to specify when the animation begins. You can do this by using an event.

1. Make the Storyboard a Resource. Place the Storyboard inside a resource block so that you can easily reference the Storyboard from code to start, stop, pause, and resume. The following markup shows the Storyboard declared in the StackPanel object resources block. Note that you can declare the Storyboard in any resources block that is within the same scope as the object you wish to animate.

<StackPanel>
  <StackPanel.Resources>
    <!-- Animates the rectangle's opacity. -->
    <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
    x:Name="MyAnimatedRectangle"
    Width="100" Height="100" Fill="Blue" />

</StackPanel>

2. Attach an Event to an Element. There are a variety of events you can use to start an animation, including mouse-related events such as MouseLeftButtonDown, which is raised when a user clicks an object, or the Loaded event, which is raised when an object first loads. For more information about events, see Events and Delegates. In this example, the MouseLeftButtonDown event is attached to the Rectangle so that when the user clicks the rectangle, the event is raised.

<Rectangle MouseLeftButtonDown="Mouse_Clicked"
  x:Name="MyAnimatedRectangle"
  Width="100" Height="100" Fill="Blue" />

3. Control the Animation from the Event Handler. Storyboard has several methods that allow you to control the playback of the Storyboard animation, including Begin, Stop, Pause, and Resume. In this example, the Begin method is used to start the animation when the user clicks the rectangle and raises the MouseLeftButtonDown event.

C#

// When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}

Visual Basic

' When the user clicks the Rectangle, the animation
' begins.
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

Complete Example

The following example shows the complete XAML markup for creating a rectangle that fades in and out of view when it is loaded.

  <UserControl x:Class="animation_ovw_intro.Page"
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="400" Height="300">

  <StackPanel>
    <StackPanel.Resources>
      <!-- Animates the rectangle's opacity. -->
      <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>
</UserControl>

C#

// When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}

Visual Basic

' When the user clicks the Rectangle, the animation
' begins.
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

Run this sample.

Start, Stop, Pause, and Resume an Animation

The previous example showed how to start an animation using the Begin method; however, Storyboard also has the Stop, Pause, and Resume methods that can be used to control an animation. The following example presents a series of buttons that allow the user to control the animation of an Ellipse across the screen.

<UserControl x:Class="interactive_animation.Page"
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="400" Height="300">
  <Canvas>
    <Canvas.Resources>
      <Storyboard x:Name="myStoryboard">

        <!-- Animate the center point of the ellipse. -->
        <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>
        <!-- Describes an ellipse. -->
        <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
          Center="20,20" RadiusX="15" RadiusY="15" />
      </Path.Data>
    </Path>

    <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
      <!-- Button that begins animation. -->
      <Button Click="Animation_Begin"
        Width="65" Height="30" Margin="2" Content="Begin" />

      <!-- Button that pauses Animation. -->
      <Button Click="Animation_Pause"
        Width="65" Height="30" Margin="2" Content="Pause" />

      <!-- Button that resumes Animation. -->
      <Button Click="Animation_Resume"
        Width="65" Height="30" Margin="2" Content="Resume" />

      <!-- Button that stops Animation. Stopping the animation returns the
        ellipse to its original location. -->
      <Button Click="Animation_Stop"
        Width="65" Height="30" Margin="2" Content="Stop" />
    </StackPanel>

  </Canvas>
</UserControl>

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

Run this sample.

Controlling the Begin Time of Animations

Storyboard as well as all the other animation objects (DoubleAnimation, DoubleAnimationUsingKeyFrames, ColorAnimation, and so on) inherit from the Timeline class (see Animations Are Timelines later in this topic). The Timeline class confers many useful properties to these animation objects including the BeginTime property. As the name suggests, the BeginTime property allows you to specify a time at which point the animation object begins activity. For example, you could specify a time of two seconds on the BeginTime of a Storyboard. When you begin the Storyboard using the Begin method, the Storyboard will wait two seconds and then begin. In addition you can specify BeginTime on the animation objects inside of the Storyboard. For example, if you have a Storyboard with a two-second BeginTime and this Storyboard contains two DoubleAnimation objects -- one with no BeginTime specified and the other with a BeginTime of three -- the first DoubleAnimation will start two seconds after the Begin method is called on the Storyboard and the second DoubleAnimation will begin five seconds afterward (two seconds delay for the Storyboard plus three seconds delay for the DoubleAnimation). The following example shows this.

<StackPanel>
    <StackPanel.Resources>

        <!-- Storyboard starts 2 seconds after its Begin
             method is called. -->
        <Storyboard BeginTime="0:0:2" x:Name="myStoryboard">

            <!-- Animates the rectangle's width. No 
                 BeginTime specified so by default begins 
                 as soon as it's parent (the Storyboard)
                 begins. -->
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedRectangle" 
              Storyboard.TargetProperty="Width"
              To="300" Duration="0:0:1" />

            <!-- Animates the rectangle's opacity. A BeginTime
                 of 3 seconds specified so begins three seconds
                 after the Storyboard begins (total of 5 seconds)-->
            <DoubleAnimation BeginTime="0:0:3"
              Storyboard.TargetName="MyAnimatedRectangle" 
              Storyboard.TargetProperty="Opacity"
              To="0" Duration="0:0:1" />
        </Storyboard>
    </StackPanel.Resources>

    <Rectangle x:Name="MyAnimatedRectangle" 
               Loaded="Start_Animation"
               Width="100" Height="100" Fill="Blue" />

</StackPanel>

C#

// Start the animation when the object loads.
private void Start_Animation(object sender, EventArgs e)
{
    myStoryboard.Begin();
}

Visual Basic

' Start the animation when the object loads.
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
    myStoryboard.Begin()
End Sub

Run this sample.

You can think of a Storyboard as a container for other animation objects (for example, DoubleAnimation) as well as other Storyboard objects. That is, you can nest Storyboard objects within each other and specify BeginTime values for each Storyboard separately. Using nested Storyboards can help you orchestrate elaborate animation sequences. Each child Storyboard will wait until its parent Storyboard begins and then start the countdown before it in turn begins.

Creating an Animation in Procedural Code

Rather than using XAML, you can also create an animation completely in procedural code (such as C# or Visual Basic). The following example shows how to create an animation that animates the Canvas..::.Top and Canvas..::.Left attached properties of a Rectangle.

C#

private void Create_And_Run_Animation(object sender, EventArgs e)
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 200;
    myRectangle.Height = 200;
    Color myColor = Color.FromArgb(255, 255, 0, 0);
    SolidColorBrush myBrush = new SolidColorBrush();
    myBrush.Color = myColor;
    myRectangle.Fill = myBrush;

    // Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle);

    // Create a duration of 2 seconds.
    Duration duration = new Duration(TimeSpan.FromSeconds(2));

    // Create two DoubleAnimations and set their properties.
    DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
    DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();

    myDoubleAnimation1.Duration = duration;
    myDoubleAnimation2.Duration = duration;

    Storyboard sb = new Storyboard();
    sb.Duration = duration;

    sb.Children.Add(myDoubleAnimation1);
    sb.Children.Add(myDoubleAnimation2);

    Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
    Storyboard.SetTarget(myDoubleAnimation2, myRectangle);

    // Set the attached properties of Canvas.Left and Canvas.Top
    // to be the target properties of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
    Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));

    myDoubleAnimation1.To = 200;
    myDoubleAnimation2.To = 200;

    // Make the Storyboard a resource.
    LayoutRoot.Resources.Add("unique_id", sb);

    // Begin the animation.
    sb.Begin();
}

Visual Basic

Private Sub Create_And_Run_Animation(ByVal sender As Object, ByVal e As EventArgs)
    ' Create a red rectangle that will be the target
    ' of the animation.
    Dim myRectangle As Rectangle = New Rectangle
    myRectangle.Width = 200
    myRectangle.Height = 200
    Dim myColor As Color = Color.FromArgb(255, 255, 0, 0)
    Dim myBrush As SolidColorBrush = New SolidColorBrush
    myBrush.Color = myColor
    myRectangle.Fill = myBrush
    ' Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle)
    ' Create a duration of 2 seconds.
    Dim duration As Duration = New Duration(TimeSpan.FromSeconds(2))
    ' Create two DoubleAnimations and set their properties.
    Dim myDoubleAnimation1 As DoubleAnimation = New DoubleAnimation
    Dim myDoubleAnimation2 As DoubleAnimation = New DoubleAnimation
    myDoubleAnimation1.Duration = duration
    myDoubleAnimation2.Duration = duration
    Dim sb As Storyboard = New Storyboard
    sb.Duration = duration
    sb.Children.Add(myDoubleAnimation1)
    sb.Children.Add(myDoubleAnimation2)
    Storyboard.SetTarget(myDoubleAnimation1, myRectangle)
    Storyboard.SetTarget(myDoubleAnimation2, myRectangle)
    ' Set the attached properties of Canvas.Left and Canvas.Top
    ' to be the target properties of the two respective DoubleAnimations
    Storyboard.SetTargetProperty(myDoubleAnimation1, New PropertyPath("(Canvas.Left)"))
    Storyboard.SetTargetProperty(myDoubleAnimation2, New PropertyPath("(Canvas.Top)"))
    myDoubleAnimation1.To = 200
    myDoubleAnimation2.To = 200
    ' Make the Storyboard a resource.
    LayoutRoot.Resources.Add("unique_id", sb)
    ' Begin the animation.
    sb.Begin()
End Sub

Run this sample.

Note:
Do not attempt to call Storyboard methods such as Begin within the constructor of the page. This will cause your animation to fail silently.

Animation Types

The preceding example used a DoubleAnimation to animate a property. In addition to the DoubleAnimation type, Silverlight provides several more animation objects. Because animations generate property values, different animation types exist for different property types. To animate a property that takes a Double value, such as the Width property of an element, use an animation that produces Double values, such as the DoubleAnimation. To animate a property that takes a Point value, use an animation that produces Point values, such as the PointAnimation, and so on.

Silverlight provides two categories of animation types: From/To/By animations and key-frame animations. The following table describes the animation categories and their naming conventions.

Category	Description	Naming convention
From/To/By animation	Animates between a starting and ending value: To specify a starting value, set the From property of the animation. To specify an ending value, set the To property of the animation. To specify an ending value relative to the starting value, set the By property of the animation (instead of the To property). The examples in this overview use these animations, because they are the simplest to implement.	typeAnimation
Key-frame animation	Animates between a series of values specified using key-frame objects. Key-frame animations are more powerful than From/To/By animations because you can specify any number of target values and even control their interpolation method. Key-frame animations are described in detail in Key-Frame Animations.	typeAnimationUsingKeyFrames

Property type	Corresponding basic (From/To/By) animation	Corresponding key-frame animation	Usage example
Color	ColorAnimation	ColorAnimationUsingKeyFrames	Animate the Color of a SolidColorBrush or a GradientStop.
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	Animate the Width of a Rectangle or the Height of an Ellipse (or any FrameworkElement)
Point	PointAnimation	PointAnimationUsingKeyFrames	Animate the Center position of an EllipseGeometry.
Object	None	ObjectAnimationUsingKeyFrames	Animate the Fill property from one GradientBrush to another.

Animations Are Timelines

All animations inherit from the Timeline object; therefore, all animations are specialized types of timelines. A Timeline defines a segment of time. You can specify the timing behaviors of a timeline: its Duration, how many times it is repeated, and even how fast it progresses.

Because an animation is a Timeline, it also represents a segment of time. An animation calculates output values as it progresses though its specified segment of time (or Duration). As the animation progresses, or "plays," it updates the property that it is associated with.

Three frequently used timing properties are Duration, AutoReverse, and RepeatBehavior.

Duration Property

A timeline (and therefore, an animation) represents a segment of time. The length of that segment is determined by the Duration property of the timeline, which is usually specified by using a TimeSpan value. When a timeline reaches the end of its duration, it has completed an iteration.

An animation uses its Duration property to determine its current value. If you do not specify a Duration value for an animation, it uses the default value of one second.

The following syntax shows a simplified version of the XAML attribute syntax for the

Product Families

Resources

About Microsoft

Popular Places

Popular Searches

Popular Downloads

Creating a DoubleAnimation

Creating a Storyboard

Associating the Storyboard with an Event

Complete Example

Animations Are Timelines

Duration Property