The 12 principles of animation

 

The 12 principles of animation

Squash and stretch-

Squash and stretch is debatably the most fundamental principle. When a ball hits the ground, the force of the motion squashes the ball flat, but because the ball needs to maintain its volume, it also widens on impact.

For example a character jumping up can be stretched vertically during the fast portion of the jump to accentuate the vertical, but can squash at the apex of the jump arc and again on impact with the ground.

Anticipation-

Anticipation is the preparation for the main action. For example a person who is about to jump.

Staging-

Staging is one of the most overlooked principles. It directs the audiences attention toward the most important elements of a scene in a way that effectively advances the story.

This could involve the use of camera, lighting or character composition to focus the viewers attention on what is relevant to that scene while avoiding unnecessary detail and confusion.

Straight Ahead Action and Pose-to-Pose

Straight ahead action is where you draw each frame of an action one after another as you go along. With pose-to-pose, you draw the extremes – that is, the beginning and end drawings of action – then you go on to the middle frame, and start to fill in the frames in-between.

Pose-to-pose gives you more control over the action. You can see early on where your character is going to be at the beginning and end instead of hoping you’re getting the timing right. By doing the main poses first, it allows you to catch any major mistakes early. The problem with it is that sometimes it’s too neat and perfect.

Follow-Through and Overlapping Action

When a moving object such as a person comes to a stop, parts might continue to move in the same direction because of the force of forward momentum. These parts might be hair, clothing, or even flesh of an overweight person. This is where you can see follow-through and overlapping action. The secondary elements (hair, clothing, fat) are following-through on the primary element, and overlapping its action.

 Ease In, Ease Out

When you start your car, you don’t get up to 60 mph right away. It takes a little while to accelerate and reach a steady speed. In animation it is called Ease Out.

Likewise, if you brake, you’re not going to come to a full stop right away.  You step on the pedal and decelerate over a few seconds until you are at a stand-still. Animators call this an Ease In.

This principle describes the visual result of acceleration and deceleration on moving elements whereby actions generally have slower movements at the start and end as the action begins and is completed, often due to the weight of the object or character body part.

A cannonball fired high in the air from a cannon would display a fast in and a slower (yet still fast) out if its target were far away and it slowed due to air resistance.

            

Arc

Obeying the laws of physics is a good rule of thumb when working on an animation. Objects tend to follow a path or an arc when moving. E.g when throwing grenades in games, they never travel in a straight line, they always go up and arc.

This principle adds an extra level of detail to an animation and makes it look realistic.

Secondary action

A secondary action emphasises or gives support to the main within the scene. A secondary action can help add depth and dimension to characters or objects.

These Actions should not take away or distract from the main action.

e.g When a character shakes their head, the head movement is the primary motion, and the movement of the hair and floppy hat are examples of secondary motion.

The following video also shows secondary action:

Timing

If an object moves too quickly or too slowly compared to its real world counter part the effect may not be believable. correct timing allows you to control reactions of characters and objects and the mood. 

Timing of reactions gives individual movements time to breathe, such as holding a pose after a sword swing before the next so the player sees it; or, during a cinematic moment, the delay before a character’s next movement can illustrate a thought process at work as he or she pauses

Here is an example of timing:

Exaggeration

Exaggeration is the process of over exaggerating movements or design. Exaggeration can make characters of objects feel more dynamic. In anime the characters faces are sometimes exaggerated for example when Sakura punches Naruto in the face:

You can see that both of their faces show exaggeration since in reality no ones face looks like that as they are being punched.

Solid Drawing

Understanding the fundamentals of drawing is needed. This will include drawing from 3D space, perspective, form and anatomy, Light and shadow, weight and volume etc...

Appeal

Appealing to the viewer is important. Characters, object and environments need to appeal to the viewer. Solid drawing plays  a part in this, easy to read designs and personality. There is no set way to get this right, but stong character development and good solid animation go a very long way.

A character must look appealing to a viewer or else they automatically not like them.