animations

show toc

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.

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

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.

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

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.

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

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.

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

properties of Timelines

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

The following example demonstrates these timeline properties.

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

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.