Creating key-frame-based animations

Key frame animations in WPF enable you to animate an element using more than two target-values and control an animation's interpolation method. A key frame animation has no From/To properties with which we can set its target values.

The animation's target values are described using key frame objects, which you need to add to the animation's KeyFrames collection. When the animation runs, it transitions between the key frames that you specified.

In this recipe, we will learn how to create a key-frame-based animation and use it in our application.

Getting ready

We need to create a project first. Open Visual Studio IDE and create a new project named CH08.KeyFrameBasedAnimationDemo, based on the WPF application template.

How to do it...

Let's follow these steps to create a key-frame-based animation:

1. Open the MainWindow.xaml file.
2. Add two rows inside the Grid, by specifying RowDefinitions:

<Grid.RowDefinitions> 
    <RowDefinition Height="*"/> 
    <RowDefinition...