Easing - Everything You Need to Know

I finally got around to it.

Easing – Everything you need to know

Contents

Key terms
Introduction
Basic easing
Ghost frame easing
Exceptions to easing

Key Terms

Acceleration: The process of speeding up. Going from moving slowly to moving fast.
Anim: short for animation. The moving picture.
Anticipation: Easing before the object gets up to speed.
Deceleration: The opposite of Acceleration. Slowing down. Going from moving fast to moving slowly.
Followthrough: Easing after the movement to slow down again.
Onionskin: when you move anything in pivot a shadow is left where it was before you moved it. That shadow is called the onionskin.
Pixel: The screen you’re looking at is made of pixels. If you look closely enough (not recommended because you’ll damage your eyes) you’ll see the thousands of little hexagons. Each of these will change colour individually to make up the overall image you see on your screen. Pivot is a pixel based programme, meaning that if you enlarge a .stk too much it will become weird and square (as opposed to vector based flash which looks fine however big). When doing tiny movements, as we will be later, their size can be measured in pixels.
Spacing: The distance between where an object is this frame and where it was the previous frame. Continuous spacing, for instance, would be keeping that distance the same over many frames.

Introduction

Easing is the single most important part of any animation. You can have the best storyline in the world and a knowledge of physics to rival Hawking but the animation will look shit if you don’t know how to ease. Without it, your anim will appear choppy, and unsmoothed.

Put simply, easing refers to acceleration and deceleration. Any movement in real life will be eased automatically – it’s a law of physics. Things cannot just jump from one speed to another; they need to go through all the stages in between. Think of a car. It will have a statistic telling you how long it takes to go from 0 to 60. That’s easing. No cars will start at 0 and then begin to go at 60 the second you press the pedal.

I will be using balls to demonstrate in most of the following examples because they’re quickest and easiest for me to do it with, but all of this applies to every single movement you ever do. You move an arm, it gets eased in exactly the same way as these balls.

Easing is most essential in animation, because it is what allows the eye to be tricked into detecting movement. Observe:



Your eye can follow this ball along it’s path without noticing any sort of jump because once the gap between successive frames is as big as it is at top speed your eye is already expecting the ball to be at that position some time in the future and is looking out for it.

Compare that to this uneased example:



If an animation is eased well enough, it can even still look ok at a lower frame rate, like this:


Against this:


If your animation looks bad at half speed, it’s probably not a great animation.

Basic Easing

This is what you should be doing all the time. The more advanced forms of easing below are just little extras that you can throw in once in a while when you have no other option. This is the kind that everyone uses and it’s by far the most effective, not to mention the easiest to get your head around and the quickest to animate.

It works by gradually increasing the amount that something moves each frame. The frames are always playing at a constant speed, so moving only a little bit each frame will mean a slower animation than one where you move a lot each frame. Therefore, the way to make it look like something is accelerating is to start off with little spacing and finish with big spacing.

Take a look at the first four frames from the good example of easing above:




You’re going to have to look seriously closely to spot the onionskin there. That’s because for the first few frames of a movement the spacing will be miniscule. Depending on the movement and how fast I need it to be finished, I will always have one frame where there is just one pixel of movement and ideally the next two frames would be two pixels and three pixels respectively.

A lot of people skip out this part of the easing and move straight into about 5 pixels, assuming that it will be enough because it is smaller than the top speed of whatever they’re animating. Usually you can get away with that, true, but it doesn’t look quite as good as having a one pixel movement at the end.

A word of caution though: you must be careful not to overease. I’m pushing the limits really by only increasing the spacing by one pixel over three frames. If my fifth frame only had a four pixel difference and my sixth a five pixel one then the ball would appear to be accelerating too slowly and the effect is ruined. Instead you need to increase the spacing by a factor of about 2 each time (this is by no means set in stone; if your animation looks wrong at one level of easing then change it. Don’t fix what you do by what you read here).


After the tiny spacing you want to just increase the spacing gradually over the next three frames. The fourth frame after that tiny spacing you should definitely be at full speed, but you’ll probably reach it before then. Again, it depends on the individual movement, how far it has to go, and how fast a speed it’s going to reach.

After the movement is over it needs to do exactly the same thing in reverse as it did when it was accelerating. Usually the deceleration will be the same as the acceleration, but there are some special cases which will be covered later under ‘exceptions’.


Ghost Frame Easing

This is a complex form of easing which you should not attempt until you have mastered every basic of animation and you are making stuff of reasonable quality. In general it needs to be combined with the basic easing in order to look good.

Ghost frame easing should only be used in situations where you need to make a movement so quickly that you have no time for easing as you normally would. What it involves is basically merging two frames together.

This next paragraph will explain precisely how ghost framing works with references to biology and psychology. You may want to skip it if you’re not one for heavy reading.

Adding an additional fade into a frame is a manner of tricking the eye into seeing twice as many frames as there actually are. It's as though you animated at 32fps and inserted the extra frames of easing between the existing frames with a blur. This is because when the eye watches an animation it is already just taking a picture of each frame and then letting that image fade as the next one appears. The brain cannot process the information that fast so it merges them causing the illusion of motion. With the ghost frame it seems as though the brain has just caught the tail end of the image because it was processing slowly and it assumes that the ghost must have been part of the movement so it adds it in retrospectively.

The most effective way to animate it is probably to animate your movement in half the speed you want it at the end with standard basic easing. Then, insert a new .stk over the onion skin of the previous frame on all the frames. This second .stk should be identical to the first but faded (go to custom colours and move the bar closer to the white edge). Now delete every other frame (meaning delete one, leave one, delete one, leave one, etc.) The effect should be something like this:



This is an obvious improvement on what it looks like without any ghost frames:



and is faster than what it looks like if the ghost frames are made into actual frames:



Note: There will still be a frame or two of anticipation and follow through with no ghost and only a pixel or two of movement, otherwise it looks wrong.


Exceptions to Easing

There are a few cases where it’s ok not to ease. This is whenever the moving object is coming into contact with something which is not going to move or is going to provide a lot of resistance.

The most common one is during a bounce. When the ball hits the ground it stops instantly and then goes back up at the same speed it hit the ground at, like this:



It would not look right if it was like this:



Which looks more like there is some sort of force pushing it back up again.

Note that the ball will still always ease at the top of the bounce as it accelerates under gravity. I would also like to add at this point that the bar across the top of my pivot screen showing all the frames at once looks awesome for both of these animations.

Another example where easing is at least lessened is when the object goes through something but slows down on the way. This is most commonly used on a punch, but to be honest I’m not up for making a full blown punch animation to show you and you wouldn’t get the close-up view you needed anyway. Have a ball going through a wall instead:



Essentially all it does is to instantly cut the spacing down by however much you think looks right, without needing to go through the intervening stages.



I know I’ve alluded to some mysterious “advanced” forms of easing above and have only included one. I’m still working on getting the others sorted and understood before I put them in. I’ll add something eventually, I hope. Anyway, I hope you find this hepful.

This is such a tank tutorial man.

Thanks.

this is the best easing tutorial I've ever seen! you're truly amazing, zed. (feel free to put that on your sig =P)