Silverlight: Animation Basics

• Overview
• Animation Classes
• Triggers
• Interactive Animations
• Further Reading

Overview

Animations are simply the visual result of changing property values on objects over a period of time. To move something on the screen you might change the Left and Top properties, to make something fade in or out you change the object's Opacity, and so on.

While it's possible to create animations manually in code, it is usually better to utilize the optimized animation capabilities of Silverlight.

Animation Types

• To/From/By: Let's you transition between two values.
• Key-frame animations: Transition between multiple values. Interpolate using discrete, linear or spline methods.

Animation Classes

Here are the main classes you will come across when working with animations.

• BeginStoryboard - An action that starts the contained Storyboard.
• Storyboard - Contains one or more animations that are applied to objects.
• DatatypeAnimation - Changes the desired property values.

You must use the correct type of animation depending on the data type of the property you are animating.

If the property data type is...

• Double, use DoubleAnimation.
• Color, use ColorAnimation.
• Point, use PointAnimation.

<BeginStoryboard>
    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Canvas.Left)"
                        To="300" Duration="0:0:1"/>
    </Storyboard>
</BeginStoryboard>
    

For key-frame animations you'll use the UsingKeyFrames variant, such as DoubleAnimationUsingKeyFrames with a collection of key-frames that use the desired interpolation method.

<BeginStoryboard>
    <Storyboard>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Canvas.Left)">
            <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
            <LinearDoubleKeyFrame Value="140" KeyTime="0:0:0.4" />
            <LinearDoubleKeyFrame Value="160" KeyTime="0:0:0.6" />
            <LinearDoubleKeyFrame Value="300" KeyTime="0:0:1" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</BeginStoryboard>
    

Triggers

Animations can be started automatically based on Triggers. The following shows starting an animation using the Canvas.Loaded event and the <BeginStoryboard> action. Silverlight 1.0 only supports starting an animation on the Loaded event for an object.

<Canvas>
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <BeginStoryboard>
        <Storyboard>
            <!-- Animations go here -->
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Canvas.Triggers>
</Canvas>
    

View Sample

Interactive Animations

Animations can also be controlled interactively from code using the Begin(), Pause(), Resume(), Stop() and Seek() methods. In XAML, use the x:Name attribute to specify an ID for the storyboard you wish to control.

<BeginStoryboard>
    <Storyboard x:Name="MyAnimation1">
        <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Canvas.Left)"
                        To="300" Duration="0:0:1"/>
    </Storyboard>
</BeginStoryboard>
    

In Silverlight 1.0 you could use the following mouse event handler to start the animation.

function startAnimation(sender, mouseEventArgs)
{
    // Get a reference the the storyboard and start it
    sender.findName("myStoryboard").Begin();
}
    

Further Reading

Related information on the web is listed below.

• Silverlight QuickStarts: Animations
• SDK Blog: Animation Using Keyframes and Splines