12 Principles of Animation – Timing, Spacing, Squashing & Stretching
January 27, 2014 § 1 Comment
Thinking & Practice Tutorial 27/01/14
The 12 principles were set out by animators to add realism to motion graphics. These principles were designed before character animation, but because they are dealing with moving objects they are still relevant and can be applied to character animation.
Timing and Spacing
The first thing we looked at was timing and spacing.
Timing – how long it takes to complete an action
Spacing – the distance between each pose or key
All animation is about timing and spacing. A new composition was created with a solid sized 100 x 100. Position was turned on and the stopwatch was started to activate the animation. Once the timeline and the shape is moved, a dotted motion line appears – this represents how many frames there are between keys.
If the time between the keys is decreased, the shape moves faster because there are less frames and the spacing has been changed. That effects the timing of our action. The speed of the moving object can determine an impression of weight (faster = heavier, slower = lighter); this adds an essence of realism to this simple motion graphic.
The following graphic explains this:
Squash and Stretch
In a new composition, three different coloured circle solids were placed at the top. Using the pan behind tool, the centre point of the shape was moved to the bottom before dragging out the shape using shift and moving it to top of the timeline.
The first shape was turned off to compare the linear movement of the shape against the shape that we applied different settings to. As the other two objects hit the bottom of compositions, the scale needed to be altered. The x axis was changed to 200 and the y axis to 50. The shapes then gradually squashed as they approached the bottom of the composition as shown:
The scale needs to changed just before the objects hit the ground. The frame was selected then copied and pasted into the composition. Then press play and the animation shows the squash, if the speed is altered the animation will improve. This brings us to another principle of animation – exaggeration. To exaggerate the movement of objects and convey an essence of both form and weight. Exaggerating distortion on third shape gives the impression of the whole feel of the object appearing more rubbery and has more character. Adding motion blur and easy ease further enhance this. Switching the first shape on that was not altered and viewing it in comparison to the final shape shows that the first shape is basic linear movement, but the final shape has more character and form. This shows some of the basic principles at work.