Programming WPF, 2nd Edition

Keyframe Animations

So far, we have looked at only simple point-to-point animations. Whether we use the To and From properties, or the By property, animations run from some start value to an end value. This is fine for simple animations, and although we could create more complex animations by building sequences of simple animations, this would be very cumbersome. Fortunately, there is a better way. WPF provides animation objects that allow us to specify a series of times and values.

In traditional animation in television and cinema, it is common to start by drawing the most important steps of the animation. These keyframes define the basic flow of the scene, capturing its most important points. Only once these keyframes are satisfactory are the remaining frames drawn. The drawings in between the keyframes do not require much creative input—they are simply meant to interpolate from one keyframe to the next. WPF uses the same concept. You could consider the simple From and To approach to be equivalent to providing just two keyframes: a "before" frame and an "after" frame where WPF interpolates between the two for you. Keyframe animations simply extend this concept to multiple frames.

Tip

As with the simpler animation types, keyframe animations still target one property at a time. So, they are not quite the same as keyframes in traditional animation where each frame would consist of a whole drawing. You cannot provide two drawings and tell WPF to morph from one to the other.

Keyframe animation ...