animations

Silverlight enables you to use markup to define animations.  This QuickStart introduces Silverlight animation features and walks you through the process of creating your first Silverlight animation. 

This QuickStart contains the following sections.

walkthrough: animate an object

step 1: find something to animate

First, you'll need something to animate. Let's use an Ellipse. The following example creates an Ellipse and paints it black.

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black" />
</Canvas>

[hide] [restart]

Notice that the ellipse has a name:

x:Name="ellipse"

The ellipse needs a name so that it can be animated. Now that you have an object to animate, the next step is to create an EventTrigger that will start the animation.

step 2: create an EventTrigger

An EventTrigger performs an action when something triggers it. As its name implies, that "something" is an event, specified by its RoutedEvent property. Because you want the EventTrigger to start an animation, use a BeginStoryboard as its action.

You also need to decide which event will trigger the animation. Today, that's pretty easy, because EventTrigger objects only support one event, the Loaded event, so we'll set the RoutedEvent property to Canvas.Loaded.  This will start our animation when the main Canvas loads. The following example shows the markup thus far.

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          
          <!-- Insert Storyboard here. -->
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

[hide] [restart]

Now you're ready to create a Storyboard and an animation.

step 3: create a Storyboard and an animation

A Storyboard can describe and control one or more animations. For this example, we'll just use one animation. In Silverlight, you animate by applying animations to properties. Use a DoubleAnimation to animate the Canvas.Left property of the Ellipse. You use a DoubleAnimation because the property being animated, Canvas.Left, is of type Double (a double precision floating point number).

For the animation to operate, give it a target name (Storyboard.TargetName="ellipse"), a target property (Storyboard.TargetProperty="(Canvas.Left)"), a value to animate to (To="300"), and a Duration (Duration="0:0:1"). The Duration property specifies the length of time the animation takes to transition from its starting value to its ending value. A value of 0:0:1 specifies a Duration of one second.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation 
              Storyboard.TargetName="ellipse"
              Storyboard.TargetProperty="(Canvas.Left)"
              To="300" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

[hide] [restart]

You used DoubleAnimation because the property we are animating, Canvas.Left, is of type Double (A Double is a double precision floating point number). 

Contratulations! You've just created your first Silverlight animation. Read on if you'd like to learn more about the Silverlight animation system.

other types of animations

Silverlight also supports animating colors (ColorAnimation) and points (PointAnimation).  When animating colors, remember the difference between a color and the SolidColorBrush.  When you specify a color name or hexadecimal value to set a shape's Stroke and Fill properties, Silverlight converts that string into a SolidColorBrush.  To animate shape's Stroke or Fill, you need to animate the Color property of the SolidColorBrush you used to set that property. In general, when you want to animate a property that takes a brush, its best to use the more verbose syntax when declaring that brush rather than a color name or hexadecimal value, so that you can assign it a name.  

The following example animates the color of two ellipses. The Fill of the first ellipse is explicitly set using a SolidColorBrush. The example gives the SolidColorBrush a name and animates its Color property. The second animation is slightly more complex, because the Fill of the second ellipse is set using a color name. When the markup runs, the system creates a SolidColorBrush of the appropriate color and uses it to paint the ellipse. Because there is no <SolidColorBrush> tag to name, the system-generated SolidColorBrush can only be animated by using indirect property targeting.

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
               Storyboard.TargetName="e1_brush"
               Storyboard.TargetProperty="Color"
               From="Red" To="Blue" Duration="0:0:5" />
            <ColorAnimation 
               Storyboard.TargetName="e2"
               Storyboard.TargetProperty="(Fill).(Color)"
               From="Red" To="Blue" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse Fill="Black"
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
    <Ellipse.Fill>
      <SolidColorBrush x:Name="e1_brush" Color="black"/>
    </Ellipse.Fill>
  </Ellipse>
  
  <Ellipse x:Name="e2" Fill="Black"
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
</Canvas>

[hide] [restart]

properties of Timelines

Both Storyboard and DoubleAnimation are types of Timeline objects. Timelines have a number of useful properties:

  • Storyboard.TargetName: The name of the object you're animating.  If you don't specify a Storyboard.TargetName, the timeline uses the Storyboard.TargetName of its parent timeline. If you didn't specify a Storyboard.TargetName for any of its parent timelines, the timeline targets the element that owns the EventTrigger that starts it.
  • Storyboard.TargetProperty: The property you're animating.  If you don't specify a Storyboard.TargetProperty, the timeline uses the Storyboard.TargetProperty of its parent timeline.   The syntax for this property varies, depending on the type of property being animated.
    • To target an attached property, use the following syntax: "(ownerType.propertyName)". For example, "(Canvas.Top)" targets the Canvas.Top property.
    • To target any other type of property, use the following syntax: "propertyName". For example, "Opacity" targets the Opacity property.
  • BeginTime: The time at which the timeline should start.  Be careful about your syntax here because the default unit of measure is "days" (simply setting this property to "2" results in a BeginTime of 2 days!). Use the following syntax to specify hours, minutes, and seconds: hours:minutes:seconds. For example, "0:0:2" specifies a BeginTime of 2 seconds (zero hours, zero minutes, 2 seconds). If you don't specify a BeginTime, the property value defaults to 0 seconds.
  • Duration: The length of time the timeline should take to play forward once. For an animation, this is the length of time it takes to play from its starting value to its ending value. The Duration property uses the same syntax as the BeginTime property. Again, be careful not to specify days when you mean seconds!  Duration can also be set to the special values "Forever" or "Automatic". The default value is "Automatic". For information about these special values, see the Duration object in the Silverlight SDK.
  • FillBehavior: How a timeline should behave when it stops playing. This property takes one of two values, Stop or HoldEnd.  "Stop" returns the property value to the value it held before the animation began; "HoldEnd" indicates that the animated property will stay at the final value of the animation. The default value is "HoldEnd".
  • RepeatBehavior: Indicates how frequently the timeline should repeat. This property can take three types of values: an iteration count, a time value, or the special value Forever.
    • "Forever" makes the timeline to repeat indefinitely. 
    • A time value makes the timeline play for the specified length of time. For example, setting RepeatBehavior to "0:0:5" for an animation with a Duration of 2.5 seconds makes the animation repeat twice.
    • An iteration value makes the timeline play for the specified number of iterations. You express iteration values using the following syntax: iterationCountx. For example, a value of "4x" makes the timeline repeat four times.
    The default value is "1x", which makes the timeline play once.

The following example demonstrates these timeline properties.

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard 
              Storyboard.TargetName="e1"
              Storyboard.TargetProperty="(Canvas.Left)"
              BeginTime="0:0:1">
            <DoubleAnimation To="300" />
            <DoubleAnimation To="300" Storyboard.TargetName="e2"/>
            <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/>
            <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/>
            <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/>
            <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/>
            <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/>
            <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="e1" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/>
  <TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock>
  <Ellipse x:Name="e2" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/>
  <TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock>
  <Ellipse x:Name="e3" Fill="Purple"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/>
  <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock>
  <Ellipse x:Name="e4" Fill="Blue"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/>
  <TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock>
  <Ellipse x:Name="e5" Fill="Green"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/>
  <TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock>
  <Ellipse x:Name="e6" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/>
  <TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock>
  <Ellipse x:Name="e7" Fill="Orange"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/>
  <TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock>
  <Ellipse x:Name="e8" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/>
  <TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock>
</Canvas>

[hide] [restart]

specify animation transition values

DoubleAnimation, ColorAnimation, and PointAnimation have From and To properties that specify the beginning and ending values of the property to animate.  If From is not specified, the current value of the property to be animated is used as the animation's starting value. Instead of setting an ending value using the To property, you may use the By property to set an offset amount.

what's next

The next topic, scripting, describes how to make your Silverlight content interactive.

Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices.