![]() | 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.
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.
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.
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.
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]
Both Storyboard and DoubleAnimation are types of Timeline objects. Timelines have a number of useful properties:
"(ownerType.propertyName)"
.
For example, "(Canvas.Top)" targets the Canvas.Top property."propertyName"
.
For example, "Opacity"
targets the Opacity property."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. "Forever"
or "Automatic"
. The default value is "Automatic"
.
For information about these special values, see the Duration
object in the Silverlight SDK.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"
.Forever
.
"Forever"
makes the timeline to repeat indefinitely. "0:0:5"
for an animation with a Duration of
2.5 seconds makes the animation repeat twice.iterationCount x
.
For example, a value of "4x"
makes the timeline repeat four times."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]
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.
Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices.