Section 6.3. Animation Using Key Frames

6.3. Animation Using Key Frames

KeyFrame animations are another method for animating elements in XAML. They differ from non-key animations in that they use a number of key frames (values) as the destination rather than allowing the system to iterate through the values. KeyFrame animations allow you to control the specific valuesand the interpolation methods used to arrive at themacross a number of key frames that make up the animation.

KeyFrame animations use different classes than non-key frame animations, but they are easily recognizable because each one uses the term "KeyFrame" in its name. As with non-key animations, there are KeyFrame animations for almost every primitive data type and some XAML elements.

Creating a KeyFrame animation requires the following steps:

1. Set a Duration for the animation.

2. For each key frame, select its appropriate type, set its value and key time, and add it to the animation's KeyFrame collection.

3. Associate the animation with an element's attribute, just as you would for a non-key animation.

Recreating the animation from Example 6-8 using KeyFrame animations instead of a non-key animation is a good way to illustrate the concept of a KeyFrame. The first step is to understand KeyTime, which is required for each key frame added to the animation's KeyFrames collection.

A KeyTime specifies when the key frame will end, as illustrated in the following example. It is tempting to view KeyTime as the amount of time the key frame will play, but this is incorrect. That value is determined by when the key frame ends, when the previous key frame ended, and the animation's duration.

     <DoubleAnimationUsingKeyFrames Duration="0:0:10">         <LinearDoubleKeyFrame Value="0" KeyTime="0:0:3" />         <LinearDoubleKeyFrame Value="100" KeyTime="0:0:10" /> 

In this XAML fragment, the animation has a Duration of 10 seconds. The first key frame's KeyTime is set to 0:0:3, which means it will end three seconds into the animation. The second key frame's KeyTime is set to 0:0:10, which means it will end when the animation ends. Because the previous key frame ends at 3 seconds, and the second key frame is set to end at 10 seconds, the second key frame will play for a total of 7 seconds.

The KeyTime attribute can be specified using other values. It is most commonly specified as a duration, but you can also express the key time as a percentage of the total duration, or you can allow the interpreter to allocate time based on a distribution pattern that either spreads the duration equally over all frames or distributes it across key frames such that the animation will progress at a steady pace.

The possible values for KeyTime are:

KeyTime

This value can be specified as a duration (hours:minutes:seconds) or as a percentage of the total duration, e.g., 20%.

Uniform

This value automatically distributes the duration across all key frames based on how many there are. If the Duration is set to 10 seconds and there are five key frames, each key frame will play for 2 seconds (10/5 = 2). This can result in non-uniform speed because it is based on the number of key frames, not the change in values!

Paced

This value automatically distributes the duration based on the number of key frames and value changes to ensure a smooth, even speed.

Example 6-10 uses key frame animation to construct the same animation created in Example 6-8 using non-key animation. The only real difference between the two examples is the declaration of the animation type. Using LinearDoubleKeyFrame elements produces a similar result to the one produced by using DoubleAnimation to animate the rotation angle value linearly from the previous value to the destination value.

Example 6-10. Animating a Rectangle using key frame animation

 <Page xmlns="http://schemas.microsoft.com/winfx/avalon/2005"    xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"    <Page.Storyboards>          <SetterTimeline              TargetName="MyRectangle "              Path="(Rectangle.RenderTransform).(RotateTransform.Angle)">              <DoubleAnimationUsingKeyFrames  Duration="0:0:20 " >                 <LinearDoubleKeyFrame  Value="90 " KeyTime="0:0:5 " />                 <LinearDoubleKeyFrame  Value="180 " KeyTime="0:0:10 " />                 <LinearDoubleKeyFrame  Value="270 " KeyTime="0:0:15 " />                 <LinearDoubleKeyFrame  Value="360 " KeyTime="0:0:20 " />              </DoubleAnimationUsingKeyFrames >          </SetterTimeline>    </Page.Storyboards>    <StackPanel>        <Canvas            Width="400 "            Height="550 ">            <Rectangle                Canvas.Top="100 "                Canvas.Left="100 "                Fill="Blue "                Width="100 "                Height="100 "                Stroke="black "                StrokeThickness="5 "                Opacity="0.25 " />           <Rectangle               Name="MyRectangle "               Canvas.Top="100 "               Canvas.Left="100 "               Fill="blue "               Width="100 "               Height="100 "               Stroke="black "               StrokeThickness="5 ">               <Rectangle.RenderTransform>                   <RotateTransform                       Angle="0 "                       Center="50,50 " />               </Rectangle.RenderTransform>           </Rectangle>        </Canvas>     </StackPanel> </Page> 

Most KeyFrame elements have three distinct types: linear, discrete, and spline . Each uses a different interpolation technique to move from the previous value to the destination value. The interpolation technique used can be determined from the name of the KeyFrame, e.g., SplineDoubleKeyFrame uses a spline interpolation technique, while LinearDoubleKeyFrame uses a linear interpolation technique.