Computer Animation Week 2: The Twelve Principles of Animation

This week, we learned about the 12 principles of animation. These principles help to make animations more lifelike and help us develop emotional attachment to the characters. They are:

1. Squash and stretch

This principle gives objects the illusion of weight, but also flexibility. The basic idea is to make objects in an animation “squash” upon an impact (shorten along one axis and lengthen along the perpendicular axis), and “stretch” upon accelleration (opposite from squash, lengthens along first axis and shortens along second). This change in shape gives the object the illusion of being flexible and lively, as opposed to being completely rigid.

In the above image, A does not employ squash and stretch, while B does. As you can see, the shape remains the same for each frame in A, while in B the shape stretches for frames 2, 3, 5, and 6, squashes in frame 4, and is normal in frame 1 and 7.

2. Anticipation

Anticipation occurs when a character “winds up” prior to doing an action. It prepares the viewer for the action that is about to occur, and gives the action a more realistic feeling. It generally involves a character or object moving slightly in one direction before doing the main action in the opposite direction.

An example of anticipation can be found in the above image, where Donald Duck is winding up as he is about to start running. Even though people do not wind up before they start running in real life, it helps to increase realism in the animation.

3. Staging

The purpose of staging is to draw the viewer’s attention to the most important element in a scene. This is accomplished by framing, lighting, and viewing angle, among other things. This principle is important because it allows the viewer to focus on what is important in the scene, while being able to ignore details that may not be very important. With good staging, the animators are able to present any idea in such a way that it is completely clear and not misunderstood by the audience.

4. Straight ahead action and pose to pose

These are actually two different ways of drawing actions. Straight ahead is the process of drawing each frame one by one, from start to end. This results in more spontaneous and creative animation, as the poses are not planned out ahead of time. Pose to pose involves drawing out specific key frames that are most important for conveying the emotions or actions of the scene, and then filling in the rest of the frames later. As game developers, we will most likely be using the latter for our animation purposes because it is easier to have our artist make key frames of poses and let our animation engine interpolate between these key frames.

The above image shows an example of pose to pose action, where the black drawings are the key frames and the red drawings are frames that are filled in to complete the animation afterward.

5. Follow through and overlapping action

This principle demonstrates the fact that not all parts of a body will accelerate or decelerate at the same speed. For example, if a dog with floppy ears starts running, we expect its ears to start moving only after the rest of the body starts moving, showing that the ears are flexible and not rigid. Likewise, when the dog comes to a stop, the ears will follow through the stopping motion, and stop ahead of the dog and after it has stopped.

In the above image, one can see this principle in action when the character’s cape comes to rest long after the character has reached the ground.

6. Ease in and ease out

A character or other animate object is not capable of instantly accelerating or decelerating when it starts moving. Thus, in animation, putting extra frames at the beginning and end of movement gives the feeling of gradual acceleration and deceleration, which increases the realism of the movement. This is known as ease in and ease out, or slow in and slow out.

The above image demonstrates ease in and ease out. At the beginning and end of the movement, there are more frames than in the middle, indicating that the coin will move slower at the beginning and end than while it is in the middle of its movement.

7. Arcs

Living things generally move in arcs rather than straight lines. For example, when you throw a ball, your arm does not move straight out. Rather, your hand will move in an arc from behind you, up to above your head, and subsequently to your front. An example can be seen in the image below, where the club moves in an arc rather than a straight line.

8. Secondary action

In animation, secondary actions are those that add to and support the main action in a scene. For example, if the main action is a character walking, a secondary action could be the character swinging his arms while walking. An important aspect of secondary action is that it should not take away or distract from the main action, but rather accent it, making it more lively and life-like. In the image below, the primary action is the mouse running, and the secondary actions are the movement of its tail and its hat.

9. Timing

Timing refers to the number of frames that are used to produce an animation, which changes the speed of the animation. Timing is important because it is what forms the foundation for conveying emotion in a scene. For example, if a character is moving slow and sluggish, it can be deduced that the character is unhappy or tired. Timing can also be used for comical purposes, such as a pause before a very funny moment. It is also important for conveying that objects follow the laws of physics, increasing realism. For example, a large object should move slower than a very small object.

10. Exaggeration

Exaggeration is used to make realistic animation seem less static and boring. It can also be used to make it more obvious to the audience what emotions are being conveyed in the scene. For example, in the below image, Wile E. Coyote is extremely surprised by something. This emotion is made very obvious, and also comical, by the fact that his jaw has literally dropped to the ground.

11. Solid drawing

Solid drawing is the idea of conveying characters and objects in three dimensions, to give them a feeling of volume and weight. This is accomplished via correct anatomy, perspective, and shading. This is an important principle for hand-drawn animations, but thanks to the ability of computers to automate 3D image rendering from defined models, it is not as great of a concern to us as game developers.

12. Appeal

Appeal in an animated character is its ability to convince the viewer that it is real and interesting. Of particular importance here is the animator’s ability to convey emotion through the character’s facial expressions and body movement.

Leave a comment