Animating with Ease In/Out: Deriving the calculations for smooth animations using no calculus.

posted 2013-Aug-8

The problem with Linear Interpolation

Animating an item directly from point A to B is simple when using “linear interpolation”. One simply moves the item at a constant rate for the duration of the animation:

A B Velocity Time

The “problem” with this, shown above, are the changes in the velocity of the object. Linear interpolation produces instantaneous, infinite acceleration and deceleration. Physical objects that humans interact with in the real world do not work that way. Objects always spend some time coming up to speed and—unless there’s a brick wall involved—some time slowing down at their destination.

Computer interfaces are more pleasing to humans when the velocities change. So let’s figure out how to do that. And let’s do so in a way that makes sense, and is easy to re-derive when you are stranded on a deserted island and need to come up with the answer.

Plotting Velocities

First, let’s describe our problem in a way that enumerates what we have to work with.

Let’s draw a diagram showing the velocities we want:

The items in black are what we have control over. The items in green we may need to work out.

Calculating the Distance from Velocity

Now, I said that there wouldn’t be any calculus involved. That’s mostly true, except that we’re going to use one helpful fact often taught in calculus class. The area under a velocity curve is equal to the distance traveled. At any time if we can figure out how much hashed area there is to the left, we know how far along we should be in our animation.

With that one tool in our belt we can revert to geometry to write the equations needed for our program. Let’s start at the beginning of our animation and work out what we need along the way.

more to come

net.mind details contact résumé other