Silverlight Animation Overview

  • Article

Animation can enhance your graphical creation 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 overview provides an introduction to the Microsoft Silverlight animation system.

This topic contains the following sections:

  • Introducing Animations
  • Making a UIElement Fade In and Out of View
  • Animation Types
  • Applying an Animation to a Property
  • Interactive Animations
  • What Happens After an Animation Ends?

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   You can only animate properties that use a property value of Double, Color, or Point.

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.

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

XAML 
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue">
  </Rectangle>
</Canvas>

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

  • Create a DoubleAnimation.
  • Create a Storyboard.
  • Associate the Storyboard with an event trigger.

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

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.

  1. 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.

    XAML 
    ...



    <DoubleAnimation From="1.0" To="0.0"  />
...

    1. 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 five seconds.

      XAML 
      ...



      <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
...

      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 its AutoReverse property to true. To make the animation repeat indefinitely, set its RepeatBehavior property to Forever.

        XAML 
        ...



        <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
...

        Creating a Storyboard

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

        1. Create the Storyboard and add the animation as its child.

          XAML 
          ...



          <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.

          1. The Storyboard has to know where to apply the animation. Use the Storyboard.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.

            XAML 
            ...



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

            1. Use the Storyboard.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.

              XAML 
              ...



              <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 a Trigger

              To set the animation to start automatically, use an event trigger.

              1. Create a BeginStoryboard object and associate your storyboard with it. A BeginStoryboard is a trigger action that applies and starts a Storyboard.

                XAML 
                ...



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

                1. Create an EventTrigger and add the BeginStoryboard as its child. Set the RoutedEvent property of the EventTrigger to the Loaded event of the object that owns the animation. This example uses the rectangle's Loaded event to start the Storyboard.

                  XAML 
                  ...



                  <EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
...

                  1. Add the EventTrigger to the Triggers collection of the Rectangle.

                    XAML 
                    ...



                    <Rectangle
Name="MyAnimatedRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
...

                    Complete Example

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

                    XAML 
                    <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue">
    <Rectangle.Triggers>
      <!-- Animates the rectangle's opacity. -->
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyAnimatedRectangle"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>
</Canvas>

                    In addition to starting a storyboard automatically when an object loads, you can use the interactive methods of the Storyboard object to start, pause, resume, and stop an animation. For more information, see the Interactive Animations Overview.

                    Animation Types

                    The preceding example used a DoubleAnimation to animated 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, such as the Width property of an element, use an animation that produces Double values, such as a DoubleAnimation. To animate a property that takes a Point, use an animation that produces Point values, and so on.

                    There is at least one animation for each property type that can be animated, and sometimes there are more. Silverlight provides two categories of animation types: From/To/By animations and key-frame animations. The following table describes the animation categories and the naming conventions they follow.

                    Category Description Naming convention
                    From/To/By animation Animates between a starting and destination value, or by adding an offset value to its starting 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 offset value, set the By property of the animation.

                    The examples in this overview use these animations, because they are the simplest to implement.

                    		 type_ Animation
                    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. Some types can be animated only with key-frame animations. Key-frame animations are described in detail in the Key-Frame Animations Overview. <Type>AnimationUsingKeyFrames

                    The following table shows several common animation types and some properties with which they are used.

                    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.

                    Point

                    PointAnimation

                    PointAnimationUsingKeyFrames

                    Animate the Center position of an EllipseGeometry.

                    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 time progresses for it.

                    Because an animation is a Timeline, it also represents a segment of time. An animation also 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.

                    The Duration Property

                    As previously mentioned, a timeline (and therefore, an animation) represents a segment of time. The length of that segment is determined by the Duration 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 one second, which is the default.

                    The following syntax shows a simplified version of the Extensible Application Markup Language (XAML) attribute syntax for the Duration property.

                    hours : minutes : seconds

                    The following table shows several Duration settings and their resulting values.

                    Setting Resulting value

                    0:0:5.5

                    5.5 seconds.

                    0:30:5.5

                    30 minutes and 5.5 seconds.

                    1:30:5.5

                    1 hour, 30 minutes, and 5.5 seconds.

                    For more information about Duration values and the complete Extensible Application Markup Language (XAML) syntax, see the Duration reference page.

                    AutoReverse

                    The AutoReverse property specifies whether a timeline plays backward after it reaches the end of its Duration. If you set this animation property to true, an animation reverses after it reaches the end of its Duration, playing from its ending value back to its starting value. By default, this property is false.

                    RepeatBehavior

                    The RepeatBehavior property specifies how many times a timeline plays. By default, timelines have an iteration count of 1.0, which means they play one time and do not repeat at all.

                    Applying an Animation to a Property

                    The previous sections described the different types of animations and their timing properties. This section shows how to apply the animation to the property that you want to animate. Storyboard objects provide one way to apply animations to properties. A Storyboard is a container timeline that provides targeting information for the animations it contains.

                    Targeting Objects and Properties

                    The Storyboard class provides the TargetName and TargetProperty attached properties. By setting these properties on an animation, you tell the animation what to animate. However, before an animation can target an object, the object must either be given a name by using the x:Name attribute (as in the previous example), or the property needs to be targeted indirectly. The following example demonstrates how to target a property indirectly.

                    XAML 
                    <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="200"
  Background="White"
  x:Name="Page">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <BeginStoryboard>
        <Storyboard x:Name="ColorStoryboard">
          <!-- Animate the background color of the canvas from red to green
               over 4 seconds. -->
          <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="Page" 
           Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
           From="Red" To="Green" Duration="0:0:4" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Canvas.Triggers>
</Canvas>

                    Notice that the property value being animated (Color) belongs to a SolidColorBrush object, which is not named or even explicitly declared. This indirect targeting is accomplished using the following special syntax.

                    XAML 
                    <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="200">
  <Canvas.Background>
    <SolidColorBrush x:Name="mySolidColorBrush" Color="White" />
  </Canvas.Background>
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <BeginStoryboard>
        <Storyboard x:Name="ColorStoryboard">
          <!-- Animate the background color of the canvas from red to green
               over 4 seconds. -->
          <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush" 
           Storyboard.TargetProperty="Color"
           From="Red" To="Green" Duration="0:0:4" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Canvas.Triggers>
</Canvas>

                    Alternatively, you could explicitly create the SolidColorBrush, name it, and target its Color property directly. The following example shows how to create the same animation as the previous example, except that it uses direct property targeting.

                    XAML 
                    <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="200">
  <Canvas.Background>
    <SolidColorBrush x:Name="mySolidColorBrush" Color="White" />
  </Canvas.Background>
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <BeginStoryboard>
        <Storyboard x:Name="ColorStoryboard">
          <!-- Animate the background color of the canvas from red to green
               over 4 seconds. -->
          <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush" 
           Storyboard.TargetProperty="Color"
           From="Red" To="Green" Duration="0:0:4" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Canvas.Triggers>
</Canvas>

                    Applying and Starting Storyboards

                    To start a storyboard in XAML, you associate it with an EventTrigger. An EventTrigger is an object that describes what actions to take when a specified event occurs. One of those actions can be a BeginStoryboard action, which you use to start your storyboard. Event triggers are similar in concept to event handlers because they enable you to describe how your application responds to a particular event. Unlike event handlers, event triggers can be fully described in XAML; no other code is required.

                    To start a Storyboard in code, you can use the Begin method of the Storyboard class.

                    Interactive Animations

                    The previous example showed how to start a Storyboard when an event occurs. Using code, you can also interactively control a Storyboard declared in XAML after it starts: you can pause, resume, and stop the Storyboard. For more information, see the Interactive Animations Overview. In addition, you can dynamically access properties of animations and storyboards using JavaScript. See Working with Animations Programmatically for more information.

                    What Happens After an Animation Ends?

                    The FillBehavior property specifies how a timeline behaves when it ends. By default, a timeline starts Filling when it ends. An animation that is Filling holds its final output value.

                    The DoubleAnimation in the previous example does not end because its RepeatBehavior property is set to Forever. The following example animates a rectangle by using a similar animation. Unlike the previous example, the RepeatBehavior and AutoReverse properties of this animation are left at their default values. Therefore, the animation progresses from 1 to 0 over five seconds and then stops.

                    XAML 
                    <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue">
    <Rectangle.Triggers>
      <!-- Animates the rectangle's opacity. -->
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyAnimatedRectangle"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>
</Canvas>

                    Because its FillBehavior was not changed from its default value, which is HoldEnd, the animation holds it final value, 0, when it ends. Therefore, the Opacity of the rectangle remains at 0 after the animation ends. Attempting to change the Opacity value in code will appear to have no effect until the animation is stopped.

                    The animation in the following example is identical to that in the preceding example, except that this example changes the FillBehavior property of the animation to Stop. As a result, the Opacity value of the rectangle reverts to 1 after the animation ends.

                    XAML 
                    <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue">
    <Rectangle.Triggers>
      <!-- Animates the rectangle's opacity. -->
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyAnimatedRectangle"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0" Duration="0:0:5" FillBehavior="Stop" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>
</Canvas>

                    See Also

                    Interactive Animations
                    Key-Frame Animations
                    Working with Animations Programmatically
                    How to: Create a Timer
                    Timeline
                    Storyboard
                    Overviews and How-to Topics