Principles of Animation

by ... posted on
ANIMATION

Even though I program for a living, I still employ animation in many of my day-to-day tasks. I believe that everyone who develops software with visual elements should have some understanding of the principles of animations. First, I’ll go over the “classic” 12 Principles of Animation by Frank and Ollie. Then, I’ll briefly summarize Tezuka’s Fundamentals of Movement. Finally, I’ll present a new approach to learning and applying the principles of animation.

12 Principles of Animation a la Disney

Animation’s etymology comes from “anima” which means breathe or life. As such the name implies that the discipline is all about adding life to what is not alive. And one can achieve this by applying these principles to their art.

  1. Squash and Stretch. Implying a sense of weight by considering:
    • shapes and volume of characters and objects
    • flexibility and material composition (ex: rubber vs metal)
  2. Anticipation. Preparing the audience for what’s to come by:
    • broadcasting actions with “tells”
    • holding poses especially windup peaks
  3. Follow Through and Overlapping Action are slightly different but rooted in physics and can be considered the opposite end of Anticipation.
    • Follow Through is about inertia i.e. objects in motion that stop will continue moving for a bit till reaching a resting pose. 
    • Overlapping Action is your classic pony tail; different parts of a body will move at different speeds. 
  4. Slow in and Slow out. Sometimes called ease-in and ease-out or just easing. This principle is about acceleration and deceleration and the number of drawings or frames used to depict it in a sequential animation. Slower motions have more visual presence or in-betweens while faster motions have fewer.
  5. Arcs are all about trajectories and how an object would naturally move. Animations that look “robotic” suffer from the lack of this principle. 
  6. Secondary Action. Inclusion of supporting animations that enhance but do not take away from the main/hero/star animation.
  7. Straight Ahead and Pose to Pose. These can be thought of as styles of animation with the former about drawing all motions sequentially and latter about drawing key poses and filling in-betweens later. It is worth mentioning computer animation here because computer generated imagery and mathematical interpolation affect this principle tremendously.
  8. Timing. In a few words, it’s the duration of an animated action. This is a tough principle since it starts physically but can easily segue into emotional and even esoteric territory. It’s about how an object moves within a given period of time. It’s about speed and acceleration of actions AND reactions. It’s also about holding or prolonging frames (or moments in time) at specific times to convey tone and personality.
  9. Staging. Borrowed from theater and cinema, this principle is about scene composition so that audiences can focus on what’s important in the animated sequence. This includes:
    • camera position and motion
    • character/object placement (and relationships)
    • lighting and shadows (colors and gradients too)
  10. Solid Drawing. The ability to draw and render properly. Poor understanding of anatomy, lighting, shading and composition will lead to poor animation. Computer animation does not make this principle obsolete. Same rules apply!
  11. Appeal or acting and charm. Do the characters or objects have presence and/or charisma? The audience must find them interesting. A common litmus test is to look at the silhouette and if it’s clear and distinguishable, you’re on the right track!
  12. Exaggeration! This is not necessarily about cartoonish distortion though caricatures are common examples. Think of it as dramatic emphasis. You want reality but extended along a spectrum of exaggeration that makes simple motions fascinating to watch.

That’s the dozen principles! It’s a lot to take in and as you could probably tell, many of them overlap and seem similar yet are subtly different! I recommend studying 2-3 at a time and not to rush it. And many will agree while knowing (or being able to recite) all 12 principles of animation is great, it’s more critical to know HOW to apply them.

Tezuka School’s Fundamentals of Movement

These are pretty similar to the above and were documented in one of the most effective animation books I read while studying animation, Tezuka School of Animation, 1: Learning the Basics. It was written for children so it was very simple and easier to grok than most of my school’s curriculum materials!

  • Arc. Objects move along an arc and the distance from the fulcrum must be maintained.
  • Speed Distribution. Objects usually do not move at fixed or constant speeds. 
  • Squash and Stretch. Energy applied to an object modifies its appearance.
  • Delay. Parts of an object will move at different times usually based on their material. This was depicted with a horse tail (of course) and the cutest elephant trunk!
  • Anticipation. Main actions will have preparatory actions. Generally, the more powerful the action, the more preparation is needed.
  • Joints. This is also called breaking of the joints. It’s about studying how joints connect and limit motion and ensuring they are properly drawn or taken into account while animating. The book’s examples depicted raising an arm and grabbing objects.
  • Transfer of Weight. Take the center of gravity into account to ensure poses are natural i.e. possible. The example depicted was standing up from a seated position and how the center of gravity of the character shifted per pose.
  • Drag. Subordinate actions must accompany the main action following a couple or so “beats” behind. To add drag, one must add “timing gaps” and ensure that objects like scarves, capes and long hair do not move at the same time as the character.
  • Reaction. While it was called Reaction, the final fundamental basically explained Overshoot caused by inertia. 

That’s nine bullet points of Tezuka’s Fundamentals of Movement. 

Another Approach to Animation Principles

I humbly propose another way to look at the principles of animation. It’s basically derived from both Disney and Tezuka sets and I, Sunder Iyer, present:

Sequential Animation is Dramatic Physics

Insert “Physics” into one’s “Dramatic Machine” to produce “Animation.”

Example: Newton’s 3 Laws of Motion → Dramatic Machine → Exaggerated Movements with Lag & Drag and Action & Reaction

To understand animation is to understand physics and understand how to depict and distort it. It might seem anticlimactic that to understand Animation is to understand Physics but as I see it, there’s no way around it. Animation is Drama applied to Physics. To that end, I’ll break down some laws of Physics and how to “pass” them through a Dramatic function.

Drama Applied to Newton’s First Law of Motion

An object is at rest or continues to move at a constant velocity unless acted upon by an external force.

To apply Drama to Newton’s First Law of Motion means to understand that objects are affected by this law and must be depicted with a more intense version of this effect. As a static object applies external force to move, it must take time to accelerate or ease into motion. Once it’s moving, it will continue to maintain that speed but even though the velocity is meant to be constant, it’s important to consider damping or resistance caused by the atmosphere the object is in! How an object moves in water is different than how it would on the ground and even while free falling in the atmosphere!

Unless more force is constantly applied, the object should naturally slow down to a resting state. Now, if the object is forced to stop, inertia must be depicted and this too can be done with a dose of drama. For example, if a car applies its brakes, it doesn’t just stop on the spot; it needs to edge forward a bit. But to dramatize this, you can reduce the inertia duration and compensate the time loss with volume compression. In other words, the car can cartoonishly squash as it comes to an abrupt halt as it still skids and stutters a little bit in the direction it was moving. 

Drama Applied to Newton’s Second Law of Motion

Oversimplification: Force is equal to Mass times Acceleration

Acceleration is the rate of change of velocity over time. Momentum is mass times velocity. Or the force needed to move an object is related to its mass, its velocity and time taken. A big object has more mass so if it needs to move quickly a lot of force is needed. So, if you wanted to animate a big friendly giant jumping, you need to take all these variables into account. This giant needs a lot of force to jump so you need to animate a slower, exaggerated squat that will take more time than normal to generate enough (muscular or kinetic) energy to propel upwards. Essentially, a tiny force cannot propel a heavy object over a huge distance. It will look unrealistic and may break suspension of belief.

Tip: Watch and compare the animations of the Jaegers in the first Pacific Rim movie to its sequel. 

Drama Applied to Newton’s Third Law of Motion

Trivially: every action has an equal and opposite reaction

Let’s say a character punches a wall. To depict that the punch was powerful, the wall needs to react accordingly. Perhaps, it cracks; the energy transfer from fist to brick occurs slowly for dramatic effect - with a small crack first and then the crack grows quickly across the wall.

Conservation of energy is important to show and exaggerate in animation! Collisions must transfer energy correctly and to dramatize it, the energy can affect common and uncommon variables. A hop on the ground can kick up particles that can be visualized as tiny dust clouds (even if there are no particles that would realistically produce it). Once again, the variables need to make sense; a child’s small hop or skip on a concrete sidewalk cannot produce a massive dust cloud without looking odd.

There are more applications (such as physics of sound or audio) that I’ll document elsewhere but to sum it up: before one animates, one should consider the physics of the sequence and drag an imaginary exaggeration UI Slider on it to properly design motion for animation.