CONTENTS

Introduction

When to Use Expressions

What Is an Expression?

Adding Expressions

The Pick Whip

Vectors and Dimensions

Ranges of Values

Interpolation Methods

Objects

Global Objects

The Default Object

Methods and Attributes

Vector Math

an example

OTHER MATERIAL

Geometry

Tables

Project Index

HOME

Interpolation Methods: linear(), ease()

We've discussed how to 'manually' scale a range of values, by combining a simple division and multiplication—for instance to convert 360 degrees of rotation into a 100% change in opacity. But this isn't the only way. After Effects offers a couple of built-in interpolation methods specifically designed to turn changes in one set of values into changes in another set:

These methods look more complicated than they really are, mostly because they accept so many arguments. These arguments are:

t          The incoming data source, e.g. 'rotation', 'time', or a variable of your choice. The values from t must be numbers (dimension of 1). Required.

t_min  The minimum expected value for 't'. Optional—if t_min and t_max are omitted, After Effects will assume values of 0 and 1, respectively.

t_max The maximum expected value for 't'. Optional.

value1 The minimum value to output. When t equals or is less than t_min, the method will output value1. Value1 can be a number or a vector—the results will have the same dimension as value1. Required.

value2 The maximum value to output. When t equals or exceeds t_max, the method will output value2. Value2 can be a number or vector—if it doesn't have the same dimension as value1, After Effects will ignore components or append values of 1, as necessary. Required.

To see how these arguments work together, consider this example:

In English, this expression would read something like: 'as time goes from 0 to 5, output values from 0 to 360, with linear interpolation.' Applied to a layer's rotation parameter, this expression would cause the layer to rotate 360 degrees over the first five seconds of the comp.

If you try this, notice that the layer stops rotating at 5 seconds. This is a chief difference between these methods and the hand-rolled 'divide by 5, multiply by 360' technique we used earlier. The interpolation methods clamp their incoming and output values at the minimum and maximums you specify.

Another difference is that you can specify different styles of interpolation: ease(), ease_in() and ease_out(). These styles work exactly like their identically-named keyframe interpolation styles (available via the Animation->Keyframe Assistant menu). You can use these interpolation methods to provide a more natural progression between sets of values—a smoothness that would be harder to achieve with simple division and multiplication.

To see how the various ease styles work, consider the following animations, which each use the same arguments, but with different interpolation methods:

 
Click here to download this project file. (Windows users, click here.)

Example: Scroll Bars

As a quick, and simple, example of what you might do with these methods, we'll create a simple scroll bar animation. We'll start with two layers, the scroll bar, and a text block that will appear to scroll. We'll attach our expression to the text block's anchor point, because this won't affect our ability to position the layer in the comp (its position will remain unchanged even as the layer scrolls).

Remember that moving the anchor point in one direction makes the layer appear to move the other direction in your comp. In our case, we'll be moving the anchor point down, in order to make the layer appear to move up in the comp. In order to achieve full scrolling, the full length of our text block, we'll want the anchor point's y-value to start at zero and end at the layer height. This gives us our output values:

For our input values, we could just use zero and the height of the comp. We'll inset the values a bit, just to make the results look a little better. Assuming comp dimensions of 320x240, we'll use a range of 25 to 215. So, as the scroll bar's y-position goes from 25 to 215, the text block will appear to scroll.

Of course, our input data will come from our scroll bar layer's y-position, so:

Putting this all together, with better variable names, we get an expression that looks like this:

Finally, we'll want to put these results ('scrolled_amount') in an array, leaving the anchor point's x-coordinate as it was. The complete expression then looks like:

The final animation looks like this (only the scroll bar's position has been keyframed):

Of course, there's no reason you need to scroll vertically. We could just as easily create a horizontal scroll bar, with only minimal changes to our expression. For an even more impressive effect, we could create a circular 3D scroll, by applying the same basic expression to a rotation parameter of a 3D layer:

These are stills because the animations don't export in Flash format very well. In any case, they are more fun, and easier to understand, when you can interact with them directly. Click here to download the project file. (Windows users click here.)