Silverlight: Key-Frame animations

This topic describes key-frame animations in Silverlight. With key-frame animations, you can animate with more than two target values and control the interpolation method of the animation.

Prerequisite

To learn about this overview, you should familiarize yourself with the Silverlight animation.

What is a key-frame animation?

Like a from/to/by animation, a keyframe animation displays the value of the target property in animated form. It creates a transition between its target values through its Duration. However, the From/to/by animation creates a transition between two values, while a single keyframe animation can create a transition between any number of target values.

Unlike a from/to/by animation, a keyframe animation does not have the from, to, or by attributes required to set its target value. Instead, the key frame object is used to describe the target value of the Keyframe animation. To specify the target value for an animation, you need to create a Keyframe object and add it to the KeyFrames property of the animation. When the animation runs, it transitions between frames that you specify.

Some key-frame methods support multiple interpolation methods in addition to multiple target values. The interpolation method of an animation defines how to transition from a value to the next. There are three types of interpolation: discrete, linear, and spline.

To animate with a keyframe animation, you need to complete the following steps:

Declare the animation and specify its Duration according to the method used for the From/to/by animation.

For each target value, create a keyframe of the appropriate type, set its value and KeyTime, and add it to the KeyFrames collection of the animation.

Follow the method used for From/to/by animations to associate animations with properties.

The following example uses the DoubleAnimationUsingKeyFrames object to animate a Rectangle element across screens.

Xaml

<Canvas>
<Canvas.Resources>
<storyboard x:name= "Mystoryboard" >
<!--Animate the TranslateTransform ' s X property
From 0 to then, then seconds. -->
<doubleanimationusingkeyframes
Storyboard.targetname= "Myanimatedtranslatetransform"
Storyboard.targetproperty= "X"
duration= "0:0:10" >
<!--Using a lineardoublekeyframe, the rectangle moves
Steadily from it starting position to
The 3 seconds. -->
<lineardoublekeyframe value= "keytime=" 0:0:3 "/>"
<!--Using a discretedoublekeyframe, the rectangle suddenly
Appears at the fourth second of the animation. -->
<discretedoublekeyframe value= "keytime=" 0:0:4 "/>"
<!--Using a splinedoublekeyframe, the rectangle moves
Starting point. The animation starts out slowly at
The then speeds up. This is keyframe ends after the 6th
Second. -->
<splinedoublekeyframe keyspline= "0.6,0.0 0.9,0.00" value= "0" keytime= "0:0:6"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<rectangle mouseleftbuttondown= "mouse_clicked" fill= "Blue"
Width= "height=" >
<Rectangle.RenderTransform>
<translatetransform x:name= "Myanimatedtranslatetransform" x= "0" y= "0"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>

Vb

'　When　the　user　clicks　the　Rectangle,　 the　animation
'　begins.
Private　Sub　Mouse_Clicked(ByVal　 sender　As　Object,　ByVal　e　As　MouseEventArgs)
　　　　 myStoryboard.Begin()
End　Sub

As in from/to/by animations, use the Storyboard object to apply key frame animations to properties.