Just as there are different types of key-frame animations for animating different property types, there are also different types of key-frame objects: one for each type of value animated and interpolation method supported. Key-frame types adhere to the following naming convention:

_interpolationMethod_typeKeyFrame

where _interpolationMethod is the interpolation method the key frame uses and _type is the type of value that the class animates.

A key-frame animation that supports all three interpolation methods will have three key-frame types that you can use. For example, you can use three key-frame types with a DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, and SplineDoubleKeyFrame. (Interpolation methods are described in detail in Interpolation Methods.)

The following example uses the DoubleAnimationUsingKeyFrames object defined in the preceding example to demonstrate how the Value and KeyTime properties work.

• The first key frame immediately sets the animation's output value to 0.

• The second key frame animates from 0 to 350. It starts after the first key frame ends (at time = 0 seconds) and plays for 2 seconds, ending at time = 0:0:2.

• The third key frame animates from 350 to 50. It starts when the second key frame ends (at time = 2 seconds) and plays for 5 seconds, ending at time = 0:0:7.

• The fourth key frame animates from 50 to 200. It starts when the third key frame ends (at time = 7 seconds) and plays for 1 second, ending at time = 0:0:8.

Because the Duration property of the animation is set to 10 seconds, the animation holds its final value for two seconds before ending at time = 0:0:10. Because the FillBehavior property is set to Stop, when the time ends the rectangle returns to its original location.

<Canvas>
  <Canvas.Resources>
    <Storyboard x:Name="myStoryboard">

      <!-- Animate the TranslateTransform's X property
        from 0 to 350, then 50,
        then 200 over 10 seconds. -->

      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="MyAnimatedTranslateTransform"
        Storyboard.TargetProperty="X"
        Duration="0:0:10" FillBehavior="Stop">
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
          <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
          <LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </Canvas.Resources>
  <Rectangle MouseLeftButtonDown="Mouse_Clicked" 
    Fill="Blue" Width="50" Height="50">
    <Rectangle.RenderTransform>
      <TranslateTransform 
        x:Name="MyAnimatedTranslateTransform" 
        X="0" Y="0" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

// When the user clicks the Rectangle, the animation begins.
public void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}

With linear interpolation, the animation progresses at a constant rate of the segment duration. For example, if a key-frame segment transitions from 0 to 10 over a duration of 5 seconds, the animation produces the values shown in the following table at the specified times.

With discrete interpolation, the animation function jumps from one value to the next without interpolation. If a key-frame segment transitions from 0 to 10 over a duration of 5 seconds, the animation produces the values shown in the following table at the specified times.

Notice how the animation does not change its output value until the very end of the segment duration.

Splined interpolation is more complex. It is described in the next section.

Splined interpolation can be used to achieve more realistic timing effects. Because animations are so often used to imitate effects that occur in the real world, you might need fine control of the acceleration and deceleration of objects, and close manipulation of timing segments. Spline key frames enable you to animate with splined interpolation. With other key frames, you specify a Value and KeyTime. With a spline key frame, you also specify a KeySpline. The following example shows a single spline key frame for a DoubleAnimationUsingKeyFrames. Notice the KeySpline property; this property distinguishes a spline key frame from the other types of key frames.

<SplineDoubleKeyFrame Value="500" 
  KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

A cubic Bezier curve is defined by a start point, an end point, and two control points. The KeySpline property of a spline key frame defines the two control points of a Bezier curve that extends from (0,0) to (1,1). The first control point controls the curve factor of the first half of the Bezier curve, and the second control point controls the curve factor of the second half of the Bezier segment. The resulting curve describes the rate of change for that spline key frame. The steeper the curve, the faster the key frame changes its values. As the curve gets flatter, the key frame changes its values more slowly.

Run the sample below to see how changing the KeySpline value effects the interpolation of the animation. Also, this sample demonstrates the effect of the KeySpline on the Bezier curve which represents the interpolation.

Run this sample

You might use KeySpline to simulate physical trajectories such as falling water or bouncing balls, or apply other "ease in" and "ease out" effects to motion animations. For user interaction effects like background fades or control button rebound, you might apply splined interpolation to speed up or slow down the rate of change for an animation in a specific way.

The following example specifies a KeySpline of 0,1 1,0.

<SplineDoubleKeyFrame Value="500" 
  KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

The following illustration shows the Bezier curve spline.

The preceding key frame animates rapidly when it begins, slows down, and then speeds up again before it ends.

The following example specifies a KeySpline of 0.5,0.25 0.75,1.0.

<SplineDoubleKeyFrame Value="350" 
  KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />

The following illustration shows the Bezier curve.

Because the curvature of the Bezier curve changes very little, this key frame animates at an almost constant rate; it slows down somewhat toward its very end.

The following example uses a DoubleAnimationUsingKeyFrames to animate the position of rectangle. Because the DoubleAnimationUsingKeyFrames uses SplineDoubleKeyFrame objects, the transition between each key-frame value uses splined interpolation.

Run this sample

<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="myStoryboard">

            <!-- Animate the TranslateTransform's X property
             from its base value (0) to 500, then 200,
             then 350 over 15 seconds. -->
            <DoubleAnimationUsingKeyFrames
         Storyboard.TargetName="SplineAnimatedTranslateTransform"
         Storyboard.TargetProperty="X"
         Duration="0:0:15">

                <SplineDoubleKeyFrame Value="500"
             KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

                <SplineDoubleKeyFrame Value="200"
             KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />

                <SplineDoubleKeyFrame Value="350"
             KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />

            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>

    <Rectangle MouseLeftButtonDown="Mouse_Clicked" Fill="Blue"
 Width="50" Height="50">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="SplineAnimatedTranslateTransform"
         X="0" Y="0" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

' 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

// When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}

Splined interpolation can be difficult to understand; experimenting with different settings can help.

You can use key frames with different interpolation types in a single key-frame animation. When two key-frame animations with different interpolations follow each other, the interpolation method of the second key frame is used to create the transition from the first value to the second. For an example that uses linear, splined, and discrete interpolation in one key-frame animation, see What Is a Key-Frame Animation?.

Like other animations, key-frame animations have a Duration property. In addition to specifying the animation's Duration, you have to specify which portion of that duration is reserved for each key frame. You do this by describing a KeyTime for each of the animation's key frames. Each key frame's KeyTime specifies when that key frame ends.

The KeyTime property does not specify how long the key frame plays. The amount of time a key frame plays is determined by when the key frame ends, when the previous key frame ended, and the animation's duration.

You may use time values to specify a KeyTime. The value should be greater than or equal to 0. The following example shows an animation with a duration of 10 seconds and four key frames whose key times are specified as time values.

• The first key frame animates from the base value to 100 over the first 3 seconds, ending at time = 0:0:03.

• The second key frame animates from 100 to 200. It starts after the first key frame ends (at time = 3 seconds) and plays for 5 seconds, ending at time = 0:0:8.

• The third key frame animates from 200 to 500. It starts when the second key frame ends (at time = 8 seconds) and plays for 1 second, ending at time = 0:0:9.

• The fourth key frame animates from 500 to 600. It starts when the third key frame ends (at time = 9 seconds) and plays for 1 second, ending at time = 0:0:10.

Run this sample

<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
   Storyboard.TargetName="MyAnimatedTranslateTransform"
   Storyboard.TargetProperty="X"
   Duration="0:0:10">

                <!-- KeyTime properties are expressed as TimeSpan values. -->
                <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
                <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
                <LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" 
         Width="50" Height="50">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="MyAnimatedTranslateTransform" 
   X="0" Y="0" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

' 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

// When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}