- Understanding Interpolation
- Interpolation Types
- Specifying the Default Spatial Interpolation
- Specifying Spatial Interpolation in the Motion Path
- Using the Graph Editor: An Overview
- Understanding Value and Speed Graphs
- Viewing Property Graphs
- Specifying the Graph Type
- Viewing Optional Information in the Graph Editor
- Moving Keyframes in the Graph Editor
- Adding and Removing Keyframes in the Graph Editor
- Separating a Position’s Dimensions
- Setting a Keyframe’s Temporal Interpolation Type
- Adjusting Temporal Interpolation Manually
- Applying Keyframe Assistants
- Smoothing Motion with Roving Keyframes
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Interpolation Types
With the exception of hold interpolation, After Effects uses the same methods to calculate both spatial and temporal interpolation. This section describes how each interpolation type is expressed spatially, in a motion path, and temporally, in a speed graph.
No interpolation
No interpolation is applied to properties that have no keyframes and aren’t animated. Static properties display an I-beam icon (rather than keyframes) in the layer outline, and the Stopwatch icon isn’t selected.
Linear
Linear interpolation dictates a constant rate of change from one keyframe to the next. Between two keyframes, linear interpolation defines a straight path; temporally, it results in a constant speed. When a keyframe’s incoming and outgoing interpolation are linear, a corner is created in the motion path. Temporally, speed changes instantly at the keyframe (Figures 9.7 and 9.8).
)
Figure 9.7 Spatially, linear interpolation defines a corner at each keyframe and a straight path between keyframes. The ball in the classic Pong game, for example, moves in perfectly straight lines and ricochets in sharp corners.
)
Figure 9.8 Temporally, linear interpolation results in a constant rate of change between keyframes. When speed differs between pairs of keyframes, the change is instantaneous.
Auto Bézier
Auto Bézier interpolation automatically reduces the rate of change equally on both sides of a keyframe.
Spatially, a keyframe set to auto Bézier is comparable to a smooth point, with two equal direction lines extending from it. It results in a smooth, symmetrical curve in a motion path. A satellite in an elliptical orbit, for example, takes even, round turns (Figure 9.9). (In addition, the satellite may auto-orient its rotation according to the direction of its movement. See “Orienting Rotation to a Motion Path Automatically,” in Chapter 7.)
)
Figure 9.9 Auto Bézier interpolation creates a curved path with equal incoming and outgoing interpolation. The keyframes of an orbital path may use perfectly symmetrical curves.
Temporally, auto Bézier interpolation reduces the rate of change equally before and after a keyframe, creating a gradual deceleration that eases into and out of the keyframe (Figure 9.10).
)
Figure 9.10 Temporally, auto Bézier interpolation yields gradual, even speed changes and a curved graph. For example, the blade of a fan goes from a lower speed to a higher speed gradually (not instantaneously).
Continuous Bézier
Like auto Bézier, continuous Bézier interpolation reduces the rate of change on both sides of a keyframe. However, continuous Bézier interpolation is set manually, so it doesn’t affect the incoming and outgoing rates of change equally. In the motion path, continuous Bézier interpolation results in a smooth and continuous, but asymmetrical, curve. Typically, the path of a thrown ball follows an arc that’s continuous but asymmetrical; or imagine the ball rolling over a hill that’s steeper on one side than the other (Figure 9.11).
)
Figure 9.11 You might use continuous Bézier interpolation to show the path of a ball rolling over a hill that’s less steep on one side than the other.
Temporally, continuous Bézier interpolation reduces the rate of change unequally before and after a keyframe (Figure 9.12).
)
Figure 9.12 Temporally, rate of change is reduced smoothly—but unevenly—on either side of a continuous Bézier keyframe. A rolling ball may decelerate gradually as it crests a hill but accelerate more sharply on its descent.
Bézier
Like continuous Bézier, you set Bézier interpolation manually, but the change is discontinuous. Bézier interpolation causes an abrupt decrease or increase in the rate of change on either or both sides of a keyframe.
Spatially, Bézier keyframes are comparable to a corner point in a mask path. As in a corner point, the direction lines extending from the keyframe are unequal and discontinuous. In a motion path, Bézier interpolation creates a discontinuous curve, or cusp, at the keyframe. Bézier interpolation can achieve the discontinuous curve of a ball’s bouncing path (Figure 9.13).
)
Figure 9.13 Bézier interpolation can allow the motion path to follow discontinuous curves, such as the one that describes the path of a ball’s bounce.
In the value graph, Bézier interpolation can reduce or increase the rate of change before and after a keyframe (Figure 9.14). For example, you can use Bézier interpolation to create a sharp acceleration at a keyframe (such as when a ball falls and bounces).
)
Figure 9.14 Temporally, Bézier interpolation can create sudden acceleration and deceleration. The bouncing ball accelerates until the moment of impact and then suddenly decelerates as it ascends.
Hold
Although you can observe its effects both spatially and temporally, hold interpolation is a strictly temporal type of interpolation, halting changes in a property’s value at the keyframe. The value remains fixed until the current frame of the composition reaches the next keyframe, where the property is set to a new value instantly. For example, specifying hold keyframes for a layer’s Position property causes the layer to disappear suddenly and then reappear in different places. Instead of a dotted motion path, a thin solid line connects hold keyframes, indicating not the motion path but the order of keyframed positions (Figure 9.15). Similarly, nonspatial properties proceed instantly from one held keyframed value to another. Whereas using linearly interpolated keyframes to change a layer’s opacity value from 0 to 100 is comparable to using a dimmer light, using hold keyframes is more like using a light switch. In the speed graph, hold keyframes appear as keyframes with a speed of 0 (Figure 9.16).
)
Figure 9.15 In this figure, the layer’s position property uses hold keyframes. The layer remains in the position defined by a keyframe until the next keyframe is reached, at which time the layer instantly appears in its new position. A thin solid line between keyframes isn’t a motion path; it indicates the order of keyframed positions.
)
Figure 9.16 Keyframes of other properties that use hold interpolation retain their current value until the next keyframe.
Bézier Curves and the Motion Path
Motion paths consist of Bézier curves: the same kind of curves that define shapes in drawing programs like Photoshop and Illustrator, as well as the masks you create in After Effects. Instead of drawing a shape freehand, you can define a shape using a Bézier curve. In a Bézier curve, you define vertices (aka control points), which are connected by line segments automatically. (It already sounds a lot like keyframes and interpolation, doesn’t it?)
In a Bézier curve, the line segments are defined and controlled by tangents, aka direction lines (Figure 9.17). Two direction lines can extend from each vertex. The length and angle of one direction line influences the shape of the curve preceding the vertex; the other influences the curve following the vertex. (Imagine that the direction lines exert a gravitational pull on the line that enters and exits a vertex.) Dragging the end of a direction line alters the line and thus its correspond-ing curve.
)
Figure 9.17 The Bézier curves you use to define a shape in a drawing program or a mask in After Effects...
Just as a Bézier curve consists of vertices connected by line segments, a motion path consists of position keyframes connected by line segments—albeit dotted lines (Figure 9.18). The same techniques you use to draw shapes in a drawing program can be applied to creating motion paths in After Effects. (In fact, you can copy a mask path into a composition as a motion path.)
)
Figure 9.18 ...also define a motion path in After Effects. However, the terms used to describe the curve depend on the context.
Mixed incoming and outgoing interpolation
A keyframe can use different interpolation types for its incoming and outgoing interpolation. A keyframe’s incoming and outgoing spatial interpolation can be a mix of linear and Bézier. A keyframe’s temporal interpolation may use any combination of linear, Bézier, and hold for its incoming and outgoing interpolation. As usual, the shape of the motion path or graph in the Graph Editor indicates mixed interpolation. In the standard view of the time graph (rather than in the Graph Editor view), keyframe icons also indicate the temporal interpolation type.
Keyframe icons and interpolation
The Graph Editor shows interpolation explicitly in the form of a value or speed graph. Regardless of the interpolation type, keyframe icons appear as small boxes, or control points, on the graph. Roving keyframes always appear as small dots.
But as you saw in Chapter 7, keyframe icons look different when you’re not using the Graph Editor. In the standard view of the time ruler, an expanded property’s keyframes appear as relatively large icons. Because no graph is visible, each icon’s shape helps indicate the incoming and outgoing interpolation (Figure 9.19). If you expand a heading only, any individual property’s keyframes appear as small dots to indicate their presence and position.
)
Figure 9.19 Though the standard view of the timeline doesn’t graph interpolation, the shape of each keyframe’s icons indicates the type of interpolation.