Previously on the blog I’ve explained how a KeySpline can be used to do animation easing. I also demonstrated a tool for converting an animation curve (in this case a Path drawn in Blend) into an actual animation.
This time let’s look at the new KeySpline editor in Blend 2 and walk through an example of how to visualize and edit your easing graphically. If you want to follow along, create a new project (WPF or Silverlight) and draw a red-filled circular Ellipse at the top of the page to serve as our falling object. Create a new Storyboard, move the playhead to time 1 and move the Ellipse to the bottom of the page and change its Fill to gray. If you preview the Storyboard now, or build and run, you’ll see the ‘ball’ falls at a steady rate and changes color at a steady rate. Now, what if we want the ball to look like it’s falling under gravity (so, speeding up as it falls) and cooling down from red-hot back to gray (so, cools quickly at first, then more slowly).
In Expression Blend 2 you can actually select a keyframe and edit its KeySpline. The KeySpline is the thing that determines how the animated property changes between the previous keyframe and the keyframe you selected. You can think of each keyframe as being a point on a curve. Each keyframe is connected to the one before it by a segment of this curve. So selecting a keyframe then editing its KeySpline is actually editing the shape of the curve between the selected keyframe and the keyframe before that. Even the first keyframe has a curve going from time 0 to the keyframe (a special case of this is when the first keyframe is at time 0, in which case that curve has no size so editing it will have no effect).
Let’s see how to edit the KeySpline to get the acceleration and cooling behavior we want. With the Storyboard still open, go to the object tree and expand your ellipse. Now select the keyframe icon on the RenderTransform row by clicking it once:
In the property inspector you’ll see an Easing category inside which is the KeySpline editor. It’s currently a straight line but you can drag the two yellow control point handles around to change that, or use the number editors below to edit the coordinate values more precisely. Make the KeySpline look like the picture below.
Across the top of the KeySpline editor is a little graphic that serves as a reminder for where your selected keyframe lives on the curve you’re editing. I’ve put a red circle around the gray graphic representing your selected keyframe. Remember, the selected keyframe is the one at the end of the curve segment you’re editing. The previous keyframe (or the value at time 0 if you’ve selected the first keyframe) is represented by the lighter keyframe icon graphic at the top-left. So this curve is showing that the animation from the value at time 0 to the value of your selected keyframe makes very little progress in the first half of its duration but then makes up for that towards the end by changing the value very rapidly. Imagine this behavior with respect to the position of a falling ball and then preview your Storyboard, or build and run, to see the new curve in action.
For the cooling effect, you want a differently shaped curve. This time you’re animating from Red to Gray but you want to progress along this animation rapidly at first then slowing down. So select the keyframe on the Fill row and make its KeySpline look like this:
You can create more interesting curves, including inflection points, by moving both control points (the yellow handles). Have fun and please keep the Blend feedback coming.