This is the second in a series of posts about animation by Rex Smeal, animator, and friend to cephalopod and amphibia alike.

Welcome back! If you haven’t read the first part of our animation basics trilogy, you should check it out! This second article is about Timing!

Timing

So, if Spacing determines how quickly or slowly something moves, what is there left to call timing? A lot of the time (ha ha), timing is the functional time requirement of your subject. For example, when animating a boxer throwing a punch, you must make the timing quick enough to accurately convey the speed of the punch: too fast and we miss it, too slow and he looks silly. Another example would be interfaces, which need to move quickly into place in order to be practical.

This is something most people know how to do instinctively, or can easily adjust for when a mistake is obviously too slow or too fast. Where timing gets interesting is the way choices in timing can affect multiple elements moving together.

As mentioned in the Spacing article, where Spacing is the placement of instances through time, Timing is the distribution of time across defined instance points, or keyframes.

Techniques

Real World Imitation

All good animators spend a great deal of time looking at real-world reference footage. Animal motion, the motion of objects under gravity: stones, balls, feathers, objects halted by a rope. Using natural timing at least as a starting point will cause objects to appear much more real. The closer the timing of an imaginary object mirrors a counterpart in reality, the more readily a viewer will accept it, irrelevant of how ridiculous the subject itself is. For example, an animated desk lamp that moves with the timing of a real, living creature can be more easily believed by an audience than a hyper-realistic figure which moves sluggishly or haltingly.

Where spacing demonstrates path of motion and slows and starts at a micro level, the wider choices about where objects move at what times is determined at a macro Timing level. These two concepts do blur quite a lot at their borders; I think of timing as requirements and spacing as the flair of a motion.

Timing Contrast

If one were listening to a drum which kept steady 4:4 time it would become very boring very fast. But with a second instrument playing a melody, or a second drum playing a different beat, interesting new combinations arise and we’re enjoying contrasts in timing. In terms of animation, this means that monotonous or homogenous motion across multiple objects is going to look bland, and a dynamic and heterogeneous cascade of objects moving at different speeds and in different styles, whilst requiring a little more effort on the part of the animator, will look much more interesting!

This isn’t always desirable, as often an audience is required to concentrate on something that isn’t moving, and in those situations a panoply of motion cues isn’t going to be advantageous.

Secondary Animation

Imagine a car driving around a corner (and our spacing is evenly distributed around the corner as we’re recklessly not slowing down), I guess you could say that this would be our Primary animation (an object appearing to move on it’s own initiative/by it’s own power). If the car has a trailer though we might call the motion of the trailer Secondary animation (an object’s motion that is separate from, but mostly determined by a primary object).

The other forces acting on the trailer might be gravity, it’s own momentum, the elasticity of the tether to the car, and if it were a lighter object, such as a flag, wind might be another factor. A flag on a stick, long hair on someone’s head, the tail of a kite, an injured arm hanging loosely from someone’s shoulder, even your clothes on your body are all examples of a secondary action linked to, caused by, but not identical to, a strong primary motion force.

This linked or tethered motion often provides a nice timing contrast, and good use of secondary animation both accentuates and deepens a motion and makes it much more interesting and attractive to a viewer. In fact, the emergent action of an object under forces is often more interesting than the primary motion. In touchscreen interface motion, the primary motion could be considered to be the gestures of the user and the interfaces move as secondary action.

Staggering

Some people like to call this overlap, and the definitions get very messy when you’re talking about it in terms of secondary animation or two parts of one object, but what it really means is two parts of the same object moving in a similar (or even identical) way at different times. This helps to separate the objects, and adds a lot of interest to the motion. Inversely, regular timing can unite otherwise separate objects.

These two groups are composed of identical frame instances, just presented out of synch by one and two frames for the staggering effect.

Cycles

Cycles are a really interesting technique, particularly as an economy measure. An animation cycle is where a sequence or motion may be looped and reused more than once. The difference between a ‘Cycle’ and a ‘Loop’ is that a cycle may only apply to one component, whereas a loop generally applies to everything that is displayed.

One of the most well-known uses for this technique is the “run cycle” where a character’s two steps loop seamlessly to create the illusion of an ongoing running action, when in reality the animator has obviously only been required to animate two steps.

The main difficulty in making viable cycles is preventing your audience from really seeing too much of the “seam” where the cycle repeats. In many cases there won’t be a seam: a spinning object, for example, could be said to loop from any point in it’s rotation. But more complex motions, like a character jumping, or running, often lend themselves to a logical starting point.

Keeping away from dead stops and overly regular spacing will help, obviously repeating frames will sit as a kind of afterimage in the viewer’s mind as the animation cycles. Where cycle economy becomes really powerful (infinite, really) is when there are several cycles working together, all with different lengths. Take this simple example.

Okay now brace yourself for some maths: Two cycles (with different timing) are playing in the next example, and the total length of the animation is double the longest of the two cycles. Despite doubling the on-screen time of the animation, technically we’ve only really stolen twelve frames for free here (24+36=60). But this is with two relatively compatible cycles.

If I had added another really short cycle with an uneven number of just five frames, the animation as a whole would not have truly looped until unique frame number 360, stealing us 295 frames for free and making the largest and most terrible gif ever to be displayed on the Internet.

This is great for long animations of spinning logos, but also useful for things like water ripples, cloud motion, shifting colours across an object. Extending cycle lifetime is the strongest way to avoid obvious repetition, and joining cycles like this is the cheapest way to extend overall cycle lifetime.

With the use of procedural animation, we can control these cycles just as we control loops in code: randomised frame segment orders, dynamic particle generators, and so on. Using these techniques, we can extend these cycle times dramatically, or infinitely, for no extra ‘drawings’ and close to zero extra effort. Eased rests, cycles and code-assisted animation are where an intelligent animator will be able to save the most time/money.

We hope you’ve enjoyed part two! Chat to us on Twitter and Facebook, or email us or if you have any questions!

Join us next time for the final episode in this animation basics series: Spatial Distortion!

Animation Basics: Part 2