Angular and linear keyframe blending

In games, character animation is usually done using keyframes. That is, by defining important poses and placing them on a timeline. For example, in a roll animation, the keyframes might look like this:

Note the green and red borders around keyframes 1 and 2 -- they will make it easier to identify them again later.

As you can see, there are only five frames here. However, if the roll lasts for a second and the display refreshes at 60 frames per second, we need to stretch these five frames out to 60 frames! To make this look smooth, we need to create 'in-between' frames that connect the keyframes in a believable way.

The most simple solution is to linearly blend the position and rotation of each bone from one keyframe to the next. Here are some in-between frames created using this method:

This gets the job done, but not very well. The linear arm movement looks unnatural -- the hand appears to bend backwards and pass through the thigh.

The easiest way to solve this kind of problem is to use angular blending. In this method, we pick a root bone (usually the pelvis) and then propagate local rotations out from there. For example, in this roll transition, the wrist joint has no independent movement, but inherits the rotation of the arm and upper body. Here are some in-between frames using angular blending:

In this case, the angular blending works much better than linear... not surprising for a roll animation! However, we often need to combine linear and angular blending in the same animation (as in a punch or kick), or need to change the root of the angular hierarchy (as in a swing or throw). We can look at how these more complex cases work later.

Do you have any questions about how these blending methods work? The rolling in Overgrowth is more complicated than just blending between five keyframes, but I simplified it for clarity here.