Silverlight Tips of the Day - Blog by Mike Snow

Silverlight Tip of the Day #78 – Animating Objects with DoubleAnimationUsingKeyFrames

In Tip of the Day #77 I explored using DoubleAnimation to animate a given controls property value using the From/To method. In this tip we will be exploring DoubleAnimationUsingKeyFrames. Unlike DoubleAnimation which goes from one value to another, DoubleAnimationUsingKeyFrames is a container for a set of key frames that will determine the properties value at a given set of points along a time line.

There are three different key frame types available:

1. LinearDoubleKeyFrame – Animates a double value using linear interpolation. This means the animation will smoothly transition between values.
2. DiscreteDoubleKeyFrame – Animates a double value using discrete values. This means the animation will jump between positions.
3. SplineDoubleKeyFrame – Animates a double value using splined interpolation. This key frame makes use of a KeySpline. To understand better how this works I would recommend reviewing how cubic Bezier curves work. Essentially it has a start point (always 0), an end point (always 1) and two control points. You set the two control points using the KeySpline. The result is a curve that represents the rate of change for the animation.

To demonstrate this functionality we will create an animation timeline of a image of a mage walking in a square using as seen in this demo below. Each direction uses a different type of key frame.

Looking at the XAML below you will see we use LinearDoubleKeyFrame  to animate the images left property from the timeline of seconds 0 to 2 moving the image to the right. Than, using SplineDoubleKeyFrame  the top property gets animated from seconds 2 to 4 where I move the image down the screen. You will see it start off slow, the rapidly speed up as it follows the curve set. Next, using SplineDoubleKeyFrame  again the left property animation kicks in again from seconds 4 to 6 moving the mage back to the left. Notice no KeySpline was set so it essentially did what the LinearDoubleKeyFrame  would have done. Finally, the top property kicks in at second 7 causing the image to jump to Top=0 since we used DiscreteDoubleAnimation.

I have set the RepeatBehavior = “Forever” which will cause the animation to repeat non-stop.

And the source in Page.xaml:

<Storyboard x:Name="MageSB" RepeatBehavior="Forever" >                   

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" 

                                   Storyboard.TargetName="MyMage">                        

        <LinearDoubleKeyFrame KeyTime="00:00:00" Value="0"></LinearDoubleKeyFrame>

        <LinearDoubleKeyFrame KeyTime="00:00:02" Value="120"></LinearDoubleKeyFrame>

        <SplineDoubleKeyFrame KeyTime="00:00:04" Value="120"></SplineDoubleKeyFrame>

        <SplineDoubleKeyFrame KeyTime="00:00:06" Value="0"></SplineDoubleKeyFrame>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" 

                                   Storyboard.TargetName="MyMage">

        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"></SplineDoubleKeyFrame>

        <SplineDoubleKeyFrame KeySpline="1.0,0.0 1.0,0.00" KeyTime="00:00:04" Value="80"></SplineDoubleKeyFrame>

        <DiscreteDoubleKeyFrame KeyTime="00:00:07" Value="0"></DiscreteDoubleKeyFrame>

    </DoubleAnimationUsingKeyFrames>

</Storyboard>

Thank you,
--Mike Snow

 Subscribe in a reader