Animating with Ease In/Out: Deriving the calculations for smooth animations using no calculus.
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:
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.
First, let’s describe our problem in a way that enumerates what we have to work with.
- We want to specify how long it takes the animation to take place.
- We want to specify how much time is spent accelerating, and decelerating.
- We want to specify where the object is moving to (and possibly where it’s moving from).
- During the animation, at any given time, we know what time it is and want to figure out where the object should be.
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