Anatomy of a Silverlight Animation

For the most part we should be using Storyboards to do animations. Though it is possible to do programmatic animation and we do sometimes programmatically set properties the Storyboard infrastructure in Silverlight provides a standard easy to use and optimized way to-do animation and is a key tenet of the Silverlight technology especially around performance.

Storyboards like other elements in Xaml are defined with tags. The Storyboard element then can be a resource or in a trigger. We can also point a Storyboard at a specific element where each animation can target a different property and we can also target each specific animation at a given element and property separately. Let us start with a Storyboard then like this example:

<Storyboard x:Name="MyFirstStoryBoard"></Storyboard>

From this Storyboard we will build out our animations. The individual animations go in the story board. There are several kinds of animations such as color, point, key frame and key spline animations but we will start with point and color animations. Now look at this simple double animation.

<DoubleAnimation Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Canvas.Left)"
To="48" Duration="0:0:3" />

This is a DoubleAnimation that, when the Storyboard is triggers changes one property value to another over the course of the duration. In this case the animation is targeted on the PolygonElement at the Left value. This animation does not have a ‘From’ setting so the property goes from whatever value it at to the ‘To’ setting and then over the duration of the ‘Duration’ setting in this case 3 seconds. We could also set a ‘BeginTime’ using the same time format as that of the Duration like this code sample:

<DoubleAnimation Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Canvas.Left)" From="5"
To="48" Duration="0:0:3" BeginTime="00:00:02" />

This animation then targets the Canvas.Left property of the element named ‘PolygonElement’. At 2 seconds past the trigger of the animation it will change the left value from 5 to 48 over the course of 3 seconds. This was a double animation and you can have any number of these in a given story board. You can also use color animations in the same way with double animations. Take this code example:


<ColorAnimation
Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Fill).(Color)"
From="#3c5f0c" To="#728f4a" Duration="0:0:5" />

Like the double animation earlier this ‘ColorAnimation’ is targeted at the same element but on a different property namely one that is a color ‘Fill.Color’. When this animation is triggered the ‘Fill.Color starts at one color and transforms to the other over the course of 5 seconds.