principles of animation

PRINCIPLES OF ANIMATION

By Sunil Talekar


1 Squash and stretch2 Anticipation3 Staging4 Straight ahead action and pose to pose5 Follow through and overlapping action6 Slow in and slow out


7 Arcs8 Secondary action9 Timing10 Exaggeration11 Solid drawing12 Appeal

Squash and stretch

Squash and stretch

This is probably the most important rule of animation:

it refers to the natural deformation, weight and flexibility of objects.

It's a phenomenon we can observe in real life, watching a ball bounce, for example.

If you apply a lot of squash and stretch, you'll get a cartoon-type of animation, pleasing to the eye, often wanted in motion design video.

This rule really smoothes the movement.

Squash and stretch

Anticipation

Anticipation is the rule of animation where you introduce a movement by another one.

For example, a baseball player, before throwing the ball, will prepare for the action by moving his arm back (and in fact his whole body will take a special "pose").

This allows you to prepare your audience for what will happen next and get a more "realistic" impact. In motion design, for example, if you want to animate a rotating object, make a slight rotation in the opposite way just before the animation itself as if the object was preparing itself to rotate

Anticipation

Staging

A process that actors know really well:

showing something in an explicit way on screen and directing the viewer's attention on it to make the purpose of the scene really clear.

The position from the camera and the orientation of what you want to show can completely change the understanding of an element.

A good way to know if your staging is going to work is to imagine your scene as a silhouette.

If you can understand the silhouette without knowing what's inside, your message is going to work. This is obviously a technique that works very well in animation.

Staging

Straight ahead action and pose to pose

These are two different ways to animate something. "Straight ahead" animation is when you animate a character or something as it is moving, like when you move in real life, you animate it frame by frame, without a plan.

On the other hand, "pose-to-pose" animation is when you begin by placing the most important states, or "keyframes" of your animation, creating the transition between two keyframes.

That way, you have a preview of what your animation will look like without having to animate the whole thing.

This allows you a lot more flexibility, if some pose has to be changed; you don't have to re-do the whole thing.

Nowadays, all animators work in "pose-to-pose", and computer animation software allows us to be even more efficient as it automatically generates the "in-between" frames.

Straight ahead action and pose to pose

Follow through and overlapping action

Follow-through and overlapping action are ways to give a more "believable" look to your animation.

The overlapping action is the tendency for the different parts/elements of your object to move with different timings (e.g. the arms of a character are not animated with the same timing as its legs.

Doing such a thing would give a really robotic-look to your animation, and that's one of the most common problems with animations today). Also bear in mind the fact that some elements continue to move when the "main" one stopped.

For example, when a character stops walking, his arms won't stop at the same time than the feet. It is a kind of "afterwards anticipation".

Follow through and overlapping action

Slow in and slow out

When you move your arm, it won't move at a defined speed all the time.

The movement is like a robot's where it starts slowly, accelerates and then slows down to get to its final destination.

It also allows us to emphasize the key-poses of our animation which in a way, gives more time for the viewer to see it.

Slow in and slow out

Arcs

Here we are talking about the trajectory of your animated element through time.

An arched trajectory really helps when it comes to the realism and the impact of your animation, as the movement appears smoother and gentler.

Secondary action

It's always good to add some secondary animation to your character/object.

For example, a female character running will have her hair moving according to the speed of her run.

Another is to imagine a bull with a ring in the nose.

The ring is an independent object that deserves his own animations but are related to the bull's face movement.

Secondary action

Timing

this is one of the most important rules.

Timing is the number of images it takes for an animation to move from one key image to another.

This will set the rhythm of the animation and allow you to have some non-linear action.

That will increase a lot the quality and generate more interest for your animation.

Spacing is the difference between two frames. In other words, it’s the detail of the timing.

Timing

Exaggeration

When it comes to cartoon or non-realistic animation,

exaggerating a movement will always bring more quality to your animation.

It allows your object or character to not look static and fixed but fluid and with their own way of thinking.

Exaggeration

Solid drawing

This is mostly applicable to 3-dimensional elements.

If only talking about 3D objects, but every object has its own thickness, shape, reaction to lights and shadows.

In traditional animation, this requires a lot of skills, but in CG animation, it is much easier to give life and importance to an object with for example, a simple drop shadow.

Solid drawing

Appeal

Here we are talking about the charisma of your animation.

If we we’re talking about an actor, we would refer to it as their acting ‘game’.

If you want something to be positive, design it with the appropriate features: a smile, round shapes, light colors… and if you want to express a bad thing, use de-saturated dark and sad colors, mad eyes, spikes, triangle and square shapes.

Appeal

Thanks

principles of animation

Design