Animation definition and principles of animation

What is the meaning of animation?

• Linguistically: according to Cambridge English Dictionary, it means moving images created from drawings, models, etc. that are photographed or created by a computer.
  
• And in multimedia, according to Wikipedia’s definition: it’s one of the most exciting forms of pictorial presentation. It refers to a simulated motion picture depicting movement of drawn (or simulated) objects.
  
• It's a way of tricking our eyes into thinking that lots of static pictures are one moving image.
  
• Multimedia is defined as the integration of multiple forms of media. It includes text, audio, animations, video and so on.
  

What are animation types?

• Simple animations
  
• Traditional animation
  
• Stop motion
  
• 2D animation
  
• 3D animation
  
• Motion capture
  
• Motion graphic
  
• Hydrotechnics
  

The 12 principles of animation

In 1981, Ollie Johnston and Frank Thomas, the famous Disney animators, introduced twelve basic principles of animation to produce more realistic works. Since that time, many animators have adopted these principles, and some considered them as the "Bible of animation."

The 12 principles were originally created to be applied to traditional, hand-drawn animation, but they are still used in today’s complex animation due to their relevance to the process of character animation as well as user experience design.

The principles were derived from the great animation book “The Illusion of Life: Disney Animation” and Illustrated with examples below:

1. Squash and Stretch

Squash and stretch is the most important principle among the twelve. It revolves around applying a contrasting change of shape to the object, from a squashing form to a stretching one, or vice versa, to give a feeling of weight and flexibility to the animation, making it more realistic. It can be applied to simple objects, like a bouncing ball, or more complex ones, like the human face.

What makes this principle the most important one by far, is the fact that the volume of an object doesn't change when either squashed or stretched. If the length of a ball is stretched vertically, its width, and also its depth when it comes to the 3D space, has to contract horizontally to conserve the volume of the ball.

This can be exaggerated in animation. Take the human face when someone speaks as an example. There's a lot of squash and stretch happening as the different muscles of the face move.

The easiest way to understand how squash and stretch works is to look at a bouncing ball. As the ball starts to fall and picks up speed, it will stretch out just before impact, and it squashes the moment it impacts the ground. Then as the ball takes off again, it stretches.

This principle can be implemented in many different areas of animation, like the eyes when they blink, or when someone gets surprised or scared, their face squashes down, and stretches. Squash and stretch is a great principle to utilize to exaggerate animations and add more life and appeal to a movement.

2. Anticipation

The second principle is called anticipation. Anticipation makes the movement appear more realistic by preparing the audience for the action as if it was happening in real life. For example, a dancer who is performing a dance and is about to jump has to bend his knees first to jump correctly.

Anticipation is also used to anticipate a character or a movement’s arrival into the scene, another example is a baseball player who is about to throw the ball, he has to prepare for the movement by moving his arm back.

This principle sets the audience up for an action that is about to happen, like if a character is going to move forward, they may go back first to set their balance, or if a character is reaching out to get something from afar, they might move their hand back before they move it forward.

3. Staging

This principle just like staging in a theatre. It’s how you set up your scene; where you position lights, where you place the characters, how you set the angle of the camera, and basically handling all different elements that make up the scene.

Handling foreground and background elements is one of the fundamentals of good staging. You may want to setup the camera in a certain way to make all elements easily viewed from a specific angle, focusing on the important details, and communicating with the audience without confusion. Staging aims to present an idea, whether it’s an action, an expression or a mood, in a manner that’s very clear and straightforward.

4. Straight ahead Action and Pose to Pose

The drawing process has two different approaches, one is the “Straight ahead action”, which begins by drawing the scene frame after frame from the start to the very end, and the other approach is called “Pose to pose”, which starts with drawing out the main key frames, and filling the rest of the scene later.

The “Straight Ahead” approach is better in creating a more dynamic flow of movement and a more realistic action. However, it’s not easy to maintain proportions and create exactly convincing poses with this approach. That’s where “Pose to pose” shines, as it works best in scenes where relation to surroundings is more important. Both techniques are usually used together.

Straight Ahead is a linear and a spontaneous technique, as you create each instance or pose of the animation one after the other as you go through it. Pose to pose, however, is more systematic. You just plan the most important poses that could properly create the action.

5. Follow Through and Overlapping Action

Follow Through and Overlapping Action are closely related. They give the feeling that the objects follow the laws of physics, like the law of inertia. “Follow through” basically means that loose parts of an object should keep moving even after the object itself has stopped, then they should be pulled back to the center of mass while showing different degrees of oscillation damping.

“Overlapping action” means that certain parts of the body move at various rates, resulting in minor actions occurring simultaneously, overlapping the main action. For an example, swinging arms is the action that overlaps the major running movement.

These secondary moving parts can be inanimate objects, like clothes or the antennae of an insect, or parts of the body, like arms or hair. Another example is the human torso moving in and out while breathing. Timing is key when it comes to using this technique. As overusing it will result in a comical effect, while appropriate timing can achieve a more realistic animation, delivering a convincing result.

6. Slow In and Slow Out

In the real world, the human body, and many moving objects, usually need time to both accelerate and slow down. That’s why animation looks more realistic if it contains more drawings towards the start and the end, to accentuate extreme poses, and add a natural easing effect. This principle is especially effective when it comes to characters starting from one extreme pose to another. Because without the ease in and ease out effects, the movement will seem very robotic.

A clear demonstration for this principle is a moving car. Cars don’t just reach full speed instantly. A car starting from a stop begins to accelerate and gains speed gradually, and it also decelerates before it stops completely. The same rules apply to animation to make it look smooth and natural. This easing effect can be accomplished by increasing the number of drawings, or frames, at both the start and the end of the action.

7. Arc

Most actions in the natural world follow an arched path, they don’t occur in a straight line unless they’re mechanical movements, which are more linear and less curved. This can be observed in most projectiles, and in rotating joints when a character is moving a limb, like when the wrist or the heel maintain an arched movement when someone is walking.

The flatter the arc, the faster the object travels and the more momentum it packs, and the more pronounced the arc, the slower the object becomes. This principle works well with animation to make it appear more fluid and realistic. If an object in motion is suddenly moved out of its arc, the animation will appear weird and unrealistic. This technique can be achieved in animation, by making sure that the drawings of certain parts between two extreme poses contain the necessary instances of a logical arched movement.

8. Secondary Action

Secondary actions add more life to the scene by supporting small details in the main action. An example of a secondary action is the changing facial expressions of a moving character. These secondary actions should help emphasize the main action and must never take the attention away from it, or they would be better left out completely. Their purpose is to serve as minor detail-enhancers for the main action, breathing life into the animation to achieve a more convincing outcome.

The more dramatic the action, the less important these secondary actions become, that’s why it’s better to add them at the start and the end of power-packed actions, instead of during or else they’ll probably go completely unnoticed. It’s fair to say that secondary action can be confused with overlapping action at times due to their similarity. The key difference, however, is that overlapping action results from the main action, while secondary actions are subtle movements, independent of the main action.

9. Timing and spacing

Timing is key when it comes to creating good animation and can make drastic differences when played with. Slow in and slow out is actually a subset of this principle. Timing in animation is basically the number of frames or drawings between two poses for a certain action. It sets the speed at which actions execute and can give objects a sense of realism by making them appear to obey the laws of physics, for example. Heavier objects move slower when pushed, while lighter ones will move faster.

For a film rate of 30 frames per second, an object travelling between two points in 30 frames would take one second to finish its action. That would be the timing. Spacing here refers to how each frame is positioned with respect to other frames. Closely placed frames indicate slower movement, while the further the frames from each other, the faster the object moves.

Timing can also help communicate the emotional state of a character. An alert person usually has faster blinking eye movement than a tired one. This makes timing not only useful in adding a physical sense to the animation, but also conveys the mood and personality of characters.

10. Exaggeration

Making animation more realistic is always a good thing to achieve. However, making animation too realistic and closely imitating the real world can result in a boring and dull animated outcome. That’s why exaggeration becomes useful sometimes. Exaggerating actions should be carefully fiddled with as you don’t want to extremely exaggerate everything. Just enough exaggeration adds life to the animation, and correctly increasing it could result in much needed wilder forms of action, but going over the top would take the animation away from reality and completely destroy how convincing it could be.

Some cases where exaggeration becomes useful are scenes where supernatural phenomena or extreme alterations of physics occur. It’s important to add some restrains in such scenes, especially where there are several elements, to avoid confusing the viewers. Adjusting exaggeration takes experiments to hit just the right levels while staying true to reality. It depends on whether you seek more realism or a more caricature style. Just remember not to strip the animation completely from realism while seeking exaggeration.

11. Solid drawing

Giving objects the necessary volume and weight in the right parts, and considering how everything is drawn in the three-dimensional space -even if you’re drawing in the 2D space- are key practices that make up good solid drawing. The principle of solid drawing is based on the fact that the real world is 3D, and the animations should always appear to be living in the same world. 

That’s why animators have to understand the basics of 3D space and learn the anatomy and shape of different objects, so they can convey the desired depth to the drawings through shadows, gradients, scaling or perspective. Avoiding twinning is one of the key practices in solid drawing. This means to make sure that any pose isn’t duplicated to the other side of the drawing, to add some balance and avoid unappealing mirrored poses.

12. Appeal

Just like how charisma works in the real world, appeal in animation serves to add a compelling attractiveness to the characters. It helps to present unforgettable personalities that can stick out in the memory of the audience. Appeal isn’t just for likable characters, monsters can be appealing too. It’s about making every different character interesting and connected to the audience. This can be achieved by giving every character something special and enjoyable that’s difficult to describe. Whether by drawing baby-like faces for likable characters, or setting majestic poses for heroic ones.

Finding the right parts of the animation to exaggerate or highlight can easily give some appeal to the characters, but in most cases, you’re better off with something simple and accurate, as a complicated design will lack appeal. The ultimate purpose of appeal is to make characters touch the audience, so complicating things will only result in confusion and will make it harder to convey the desired effect.

Watch 12 principles of animation