12 Principles of Animation

 

 

  1. Squash and Stretch – 

One of the most important animation principles as it indicates to the viewer that the person or object has a sense of speed, momentum, weight and mass (and also effected by these things in their environment).  The audience can more readily pick up on what the animation is trying to convey when they can visibly see the rigidity and volume of the object. Take for instance the picture of the ball below and the young man’s face.

An illusion of of weight and volume is conveyed through the visible squash and stretch of the ball. The more squash and stretch, the softer the object. The less squash and stretch, the more rigid and hard the object.

You can see this technique can also be applied to human characters in the image below; an animator can use squash and stretch to exaggerate facial expressions.

rgb_vn_principi_animazione_squash_and_stretch1stretch-1

2. Anticipation

c3b6n-hareket-anticipation

Anticipation is a part of everyday life movements but we are not so quick to notice them. The key difference between real life anticpation and animation anticipation is that it is often over emphasised in the latter. This is to give the audience more of a visual cue as to what action is about to take place. It often helps to give characters a sense of vitality on the screen and helps convey their personality through their unique movements.

 

3. Staging

Staging_Example

12-Principles-of-Animation-Staging

Staging in Animation covers quite an array of things. Staging can refer not only to where the camera is in the scene and its movements, but to even the way the characters themselves are placed in the scene. It can also refer to how the scene setting is set up too!

Staging can often make or break a scene. If you look at the image above of the two blue characters talking; although we as the audience can tell in both shots that the characters are talking to one another, the characters in the bad staging one are making no visual contact with their audience. This means there is little to be gained from their visual expressions or body language cues! On the other hand, if you look at the characters in the good staging one, we can clearly see they are talking to one another but they are also inviting us, as the audience, into their discussion! Much better storytelling.

 

4. Straight ahead and pose to pose

Straight-Ahead-and-Pose-to-Pose

extremos-427x311-custom

The terms Straight ahead and Pose to Pose refer to a method of animating. Often in traditional animation, each character action was either drawn from beginning to end, creating an unpredictable look and feel, or they were broken down into a more predictable set of key poses in “pose to pose”.

Pose to pose is often helpful for establishing the the first, middle and last pose so that the animator has a clear vision of where the character’s action begins and ends (where they want to end up).

 

5. Follow through and overlapping action

tumblr_inline_mi4hrjRP4U1qz4rgp

3818346_orig

Follow through simply refers to the reactive animation that occurs after an action is completed, telling the audience how the character feels about that action. It gives the animation a sense of realism.

Overlapping Action describes the movements which happen in cause and effect of the follow through of the character. They are often delayed and have to catch up with the main action. This could be a coat dragging behind a character as they run then flying forward when they suddenly stop or slow down.

6. Slow-in and slow-out

57f7f8b4fe77846fc9fe48ff0e13f413

Also called “ease in ease out”, this part of animation refers to the movement of a character or object in a motion which starts off slow, accelerates to terminal velocity then slows down again. A good visual image of this is an old clock pendulum’s movements.

 

7. Arc

arc

Just like anticipation, arcs are a very natural part of everyday life movements in humans and animals. Most actions follow arc patterns e.g. an arm moving back and forth with a hand dragging this way and that to emphasise the movement.

Applying arcs to animation helps avoid linear robot style movements and gives the characters’ movements a fluid, natural flow.

8. Secondary Action

overlap-07

This refers to the action that goes along with the primary action, making the character’s thoughts and feelings more apparent to the audience. This secondary action often makes the character’s performance more powerful.  Einstein’s arm movements above demonstrate this. He lifts his arm but then goes to touch/scratch his forehead implying he is confused or anxious about something.

 

9. Timing

12-Principles-of-Animation-Timing-1

“Timing is very much a personal touch, as the name suggests this is the speed and timing of actions in a scene. Using more frames can slow down an action, or the opposite to speed it up. Timing can be used to add impact to actions, create humour, shock the viewer, and more.” – https://louisescudie.wordpress.com/2016/04/12/12-principles-of-animation/

 

10. Exaggeration

10_exaggeration

Exaggeration in animation is often used to over- emphasise the thoughts, feelings or movements of the character, often making them more appealing to the audience. It also helps to make the character’s movements more obvious to the viewer.

 

11. Solid Drawings

a001f-12_principles_solid_drawing25252bexag

solid drawing

Solid drawing refers to a character having a clear sense of form, volume and weight through their character design/silhouette. A successful solid drawing should be balanced and convincingly suggest the character is in three-dimensional space.

12.Appeal

005_shape_language

PAPERMAN-

Last but definitely not least, appeal is what draws the audience to a character. Appeal is first often created through the initial character design.

It is easy to jump to the conclusion that an appealing character is simply cute or beautiful but that is far from the truth. At the heart of it, an appealing character has charisma and can evoke some kind of emotion or reaction in the viewer. The most appealing characters are those which we can’t help but become invested in and sit on the edge of our seats waiting to see what the outcome of their story is! These characters can be “good” or “bad”.

 

The 12 Principles of Animation explained through animations funny enough haha

 

Additional Reading:

https://ohmy.disney.com/movies/2016/07/20/twelve-principles-animation-disney/

Thomas, F., Johnston, O. and Thomas, F. (1995). The illusion of life. 1st ed. New York: Hyperion.

 

Image references:

https://hollycdesigns.files.wordpress.com/2017/05/98113-rgb_vn_principi_animazione_squash_and_stretch1.jpg
https://jamesnicholasblogs.files.wordpress.com/2014/12/stretch-1.jpg
https://kalyankrishna4886.files.wordpress.com/2013/09/c3b6n-hareket-anticipation.jpg
http://www.bluepony.com/wp-content/uploads/2014/11/Staging_Example.jpg
https://i2.wp.com/www.createcg.net/wp-content/uploads/2015/03/12-Principles-of-Animation-Staging.jpg
http://www.bluepony.com/wp-content/uploads/2014/11/Straight-Ahead-and-Pose-to-Pose.jpg
https://caworld3.files.wordpress.com/2013/04/extremos-427×311-custom.jpg
https://38.media.tumblr.com/1d2e5ccb3c894c89a51ce4bcd9dbe3e4/tumblr_inline_mi4hrjRP4U1qz4rgp.png
http://animationrose.weebly.com/uploads/4/2/4/6/42467485/3818346_orig.jpg
https://s-media-cache-ak0.pinimg.com/originals/57/f7/f8/57f7f8b4fe77846fc9fe48ff0e13f413.jpg
https://road2animate.files.wordpress.com/2010/04/arc.png
http://www.3dcharacters.de/3d-Character-Animation-Studio-Dateien/interview/overlap/overlap-07.jpg
https://09c449efca3bbeb52dcea716-ddjaey2ypcfdo.netdna-ssl.com/wp-content/uploads/2013/06/12-Principles-of-Animation-Timing-1.png
https://mylesofdesign.files.wordpress.com/2014/04/a001f-12_principles_solid_drawing25252bexag.jpg
https://hallucinationrain.files.wordpress.com/2014/03/10_exaggeration.jpg
https://hollycdesigns.files.wordpress.com/2017/05/6cafa-soliddrawing.jpg
http://www.dsource.in/sites/default/files/course/principles-animation/appeal/images/005_shape_language.gif
https://a.dilcdn.com/bl/wp-content/uploads/sites/25/2016/07/PAPERMAN-.gif

 

 

 

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s