How to: Animate an Object by Using Key Frames
This example shows how to animate an object, which in this example is the Background property of a Page control, by using key frames.
Example
The following example uses the ObjectAnimationUsingKeyFrames class to animate color changes for the Background property of a Page control. The example animation changes to a different background brush at regular intervals. This animation uses the DiscreteObjectKeyFrame class to create three different key frames. The animation uses key frames in the following manner:
At the end of the first second, animates an instance of the LinearGradientBrush class. This section of the example applies a linear gradient to the background color so that the color transitions from yellow to orange to red.
At the end of the next second, animates an instance of the RadialGradientBrush class. This section of the example applies a radial gradient to the background color so that the color transitions from white to blue to black.
At the end of the third second, animates an instance of the DrawingBrush class. This section of the example applies a checkerboard pattern to the background.
The animation begins again and repeats indefinitely.
Note
DiscreteObjectKeyFrame is the only type of key frame that you can use with the ObjectAnimationUsingKeyFrames class. Key frames like DiscreteObjectKeyFrame create sudden changes in values, that is, the color changes in this example occur suddenly.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
swap different brush objects at regular intervals, making the background of the Page
change. -->
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Duration="0:0:4" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for
use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
a specified timeline. Other types of interpolation are too problematic to apply
to objects. -->
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes
to a LinearGradientBrush after the first second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes
to a RadialGradientBrush after the second second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<RadialGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="MediumBlue" Offset="0.5" />
<GradientStop Color="Black" Offset="1.0" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly
changes to a DrawingBrush (creates a checkerboard pattern) after the
third second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,1" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="Black"
Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
</Page>
For the complete sample, see KeyFrame Animation Sample.