The Twelve Principles of Animation

For this week our project was to research the twelve principles of animation by finding an animator and showing an example of their work that demonstrates one of the principles.

This is our presentation.

So we decided to divide the principles amongst the four of us. Thomas took squash and stretch, anticipation and staging; Eoin looked at straight ahead and pose-to-pose, follow through and overlapping action and slow in-slow out; Michelle looked at exaggeration, solid drawing and appeal. I got secondary action, arcs and timing.

 


Secondary action can easily be mistaken for overlapping action but is in fact entirely different:

“Gestures that support the main action to add more dimension to the character animation” – Frank Thomas and Ollie Johnston

This is an example of secondary animation, animated by Eric Larson:

The primary action is the cat, Figaro, snuggling into the blankets and the secondary action that reinforces this is his side-to-side movements that move the blanket.

I tried to make an example myself; here the primary action is the arm’s movement and the secondary action is the claw snapping:

Secondary actions can go unnoticed but their subtly will still bring an action to life:

In that clip, where Primes’s primary action is leaning forward and yelling, you wouldn’t notice the secondary action of him tightening his grip on his shield before he whacks the seven shades of shit out of the dinobot (you could also say the steam coming from the dinobot’s nose while he’s charging is a secondary action – but that’s visual effects not animation)! Lead animator was C. Michael Easton.

 


Timing:

“The personality of an animation is greatly affected  by the number of frames inserted between each main action.”

This next gif is from Pixar’s “Burn-E”:

rUjRHuS

Timing is used very effectively here. The delay after he turns to see that the antennae has been cut off to him slamming his arms down, makes it funny. It also allows the audience time to process what has happened. If the delay was any shorter the effect would not be as great and if it was any longer it wouldn’t make much sense as the events would be too isolated from each other.

In this clip and throughout the movie Godzilla’s movements are very slow and this is to emphasis his colossal size. One of the lead animators was Scott Paquin.


 

Arcs:

Actions of most organic, living things follow a curved path. Only things of a mechanical nature will move in straight lines.

The flight paths of the dragons in this freaking awesome short is a fantastic example of arcs. That last dragon is my favourite ❤

This was animated by Squeeze Studio Animation

I’ve seen a lot of animated work where the animations just don’t have that umph and after researching arcs, I can say that in my opinion this is one of the most important principles of animation.

Dragons are a great example for arcs! This is a pretty cool clip of the coolest dragon of all time (animation supervisor was Dave Clayton):

 


Squash and Stretch:

SquashAndStretch.gif
Would this be as appealing without squash and stretch?

Objects will squash together or stretch out to emphasise their momentum, weight, mass and speed. The more something squashes, the softer it will look. Squash and stretch can apply to all aspects of animation.

 

images
Squash and stretch in facial features

The most important thing to remember when animating is that the volume of the subject undergoing squash and stretch must be consistent throughout.

My attempt at squash and stretch on a cube:

In this clip, from “Foster’s Home for Imaginary Friends”, squash and stretch of Cheese’s head emphasises his fear:

Animated by Craig McCracken.

In some cases more S&S doesn’t make the animation better. Less of it will indicate a firmer material but it all boils down to what you are trying to achieve. Finally, it should be considered with every pose and not just something you add in later.

A thing to remember when using broad S&S but want to achieve ‘feel it, not see it’, is to recover out of the extreme S&S poses quickly (transition back to the neutral shape). This gives a nice snappiness to the S&S and keeps the audience from picking up on it and getting distracted. – AnimationMentor


Anticipation is used to prepare the audience for the main action, without it they may miss it.

Without anticipation your animation can feel unrealistic and lack any character. Generally, the bigger the action, the more anticipation it needs. With having a longer anticipation for an action, you would expect the action to be fast, although, switching up the action after the anticipation can be a great way to add a more comedic feel to your animation.

In this video, the anticipation is obvious before Coyote starts to run and before Road Runner stops running. Animated by Chuck Jones:

This is another example; at the start of the clip we see Po slow down, his eyes narrow then suddenly widen and his jaw lowers – this lets us know that he is staring at something and the audience are now going to see it:

When animating a character, what body part is going to lead the next action? The Foot, shoulder, eyes etc.

The anticipation can either be bold or subtle as long as it tells the audience that something is going to happen.


Staging is how we present something in a way that it is clear to the audience. We can do this by manipulating the camera position/angle, the setting or even the timing to direct the viewer’s eye to where the action is happening so they don’t miss anything. Sometimes we need to insert pauses to allow the audience time to absorb what has just happened.

When text is on the screen, we need to give it enough screen time – about the time it takes to read it out aloud three times. Likewise with ideas we want to exaggerate them so the audience clearly knows what’s going on.

Staging_Example
Image source

The first shot of Lord Farquuad is a good example of staging as it uses a high camera angle to make him look even shorter:

Raman Hui was the supervising animator.

 


Straight Ahead and Pose-to-Pose:

Straight ahead is better for unpredictable animations such as water, fire or clouds etc. Overlapping action is an example of unpredictable animation. One of the drawbacks is that the subject can easily change size or the action might not fit the timeframe of the scene.

This character from “Howl’s Moving Castle” is a good example:

tumblr_mhivn4WYHT1raym3wo1_500.gif
Calcifer – Animated by Takeshi Imamura

Pose-to-pose gives you the most control as you’ll know what the animation will look like very early on.

Straight-Ahead-and-Pose-to-Pose.jpg

A combination of both methods is the preferred way to animate.

 


Follow Through and Overlapping Action:

These can add realism and help break up an animation and make it more interesting.

For follow through, when a character or object stops, parts of it will continue moving in the direction they were heading. When considering follow through you are basically thinking about inertia.

In this gif (Disney’s Sleeping Beauty), Aurora’s hair and dress are a good example of follow through as they drag behind her movements and overshoot when she slows down:

tumblr_m2y6zeAo1b1rs46nfo1_500-1.gif

For overlapping action, a second action would start before the first action had completely finished. This keeps the interest of the viewer, since there is no dead time between actions.

(From Disney’s Mulan) Mushu’s left foot is lifted while he’s pointing to the right and is an example of overlapping action:

tumblr_nkb8c3opPI1sx3znro1_500.gif

 


 

Slow In, Slow Out:

Like follow through and overlapping action, slow in-slow out follows the laws of physics. The principle is the movement of an object or character’s body that needs time to accelerate and slow down.

tumblr_inline_nl4z72AOzE1rtysx6.gif

This gif from Hotel Transylvania shows the slow in of Dennis’s launch and the acceleration of his fall. Lead animator – Kevin Jackson.

 


 

Exaggeration:

This is used to convey personality in characters and to emphasise a particular feature in your animation; an action or a mood. It’s particularly good for animating emotions as they will come across more clearly to the audience.

“Tom and Jerry” (animated by William Hanna and Joseph Babera) is full of exaggerated actions, poses and facial features.

 


Solid Drawing:

For a 2D character, solid drawing takes into account the weight, volume, balance and the anatomy in a pose. Meaning you must be able to draw the character from all angles.

SolidDrawing

With solid drawing you need to think about how you pose out your 3D character rig, ensuring there is correct balance and weight in the pose, as well as a clear silhouette. You also want to avoid what is called “twinning,” which basically means the pose you have created is mirrored across to the other side. – Digital Tutors

Solid-Drawing
Figure on the right has a more interesting pose

Appeal:

Could involve a scene or a character. You can add more appeal by altering your posing but it mostly lies in the character design. An over complicated character design can lack appeal.

Generally, characters will have more appeal if their appearance matches their personalities.

A good example if Baymax from “Big Hero 6”.

giphy.gif

 

 

 

Advertisements

2 Comments Add yours

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