Understanding Timing in Animation Part 4

Understanding Timing in Animation Part 1
Understanding Timing in Animation Part 2
Understanding Timing in Animation Part 3

Movement is essentially the cartoonist’s greatest tool for producing dynamic energy. Classical cartoon personality and energy comes from exaggeration and distortion in movement. When a Warner Bros. Looney Tunes character moves, they don't move like a real person they move in highly exaggerated and distorted fashion. They squash and stretch all over the place. When they run, parts of their body move at different rates of speed and they go through distortions and contortions that are anything but realistic, yet they are totally believable in a cartoon world. One of the first guidelines toward how to develop energy in a cartoon is the recognition that we want it to be believable not necessarily realistic.

Believable means we have to, for the most part, honor and account for the laws of nature and physics. Thanks to Sir Isaac Newton there are three laws that are well defined that govern most motions.

(1)The first law is the "law of inertia". An object at rest tends to stay at rest and an object in motion tends to stay in motion with the same speed and in the same direction unless acted upon by an unbalanced force. Simple stated if something is moving it is going to continue to move unaffected until some force or other object is encountered. Or, if something is stationary, it will remain stationary until some force is applied to get it moving.



(2) The second law states that the acceleration of an object is dependent upon two variables - the net force acting upon the object and the mass of the object. Newton's second law provides the explanation for the behavior of objects upon which the forces do not balance. The second law states that unbalanced forces cause objects to accelerate with an acceleration which is directly proportional to the net force and inversely proportional to the mass. This one is telling us that big heavy objects don’t move as fast or as easily as smaller lighter objects. It takes more to slow down a charging bull then to slow down a charging mouse. It is very much in play when we are deciding how to show the acceleration or deceleration of an object.

(3) Newton’s third law: "For every action, there is an equal and opposite reaction." When you fire a gun you feel the recoil.



Newton’s laws are telling you that if you want to be believable than "may the forces be with you." The important concepts for creating believability all center on visualizing and using the effects of the forces at work in your cartoon world. Notice I didn’t say in the “real” world because some of the funniest things in cartoons follow physics that has been exaggerated or just plain ignored. Wyle Coyote hangs suspended in space over that canyon for a lot longer than an object would in reality, but it is the anticipation of the drop and Wyle's facial recognition of the upcoming pain that is so classically cartooney. So some laws are meant to be stretched for comical effect.

Now you all have seen or heard people refer to using a "line of action" in establishing a character's poses. And you may have heard them say it needs to be a "strong" line of action. But usually that's about it. Rarely does anyone ever really explain what "strong" is referring to or how these lines of action relate from pose to pose in their animations. The line of action in an animation sequence is directly reflecting the major influences of the forces at work. How the line twists and bends, snaps and recoils is all force driven. If you want to really capture energy in your actions just begin by animating the main line of action throughout the entire sequence. Then you can go back and begin to add the actual character’s structure on top. But don't make the mistake of trying to draw a full character pose and then another full character pose and then another full character pose and think that your animation will have a good flow or energy. Think in terms of major forces at work and use the line of action to capture and reflect those forces. Then think of the minor forces at work and you will capture them as drags overlaps and secondary actions. One useful approach to creating great poses is to work across a series of poses in an iterative manner. What that means is, that you do the main lines of action first for all the key poses and then make a second and third and even forth pass through those poses picking up and adding the lesser but equally important forces at work.



Illustrations are frozen on a single snapshot; animations are expressed in time across a sequence of images. So you want to create them across a sequence of images moving back and forth through the sequence in small steps building the action as you go. This way, long before your sequence will look like Bugs Bunny or whomever you're animating; it will capture the essence of the action with lots of fluid energy. The application of forces to objects is at the heart of timing in our animation creations. Therefore all your observations in planning how to animate an action need to include applying Newton’s laws. The audience expects things to behave according to the physical laws of nature and if you don’t show that in your timing of actions, the audience will instinctively detect and reject that aberration with the one exception that they will accept and laugh at variations that are obviously created to add to the gag being presented.

End of Part 4

Understanding Timing in Animation Part 3

Understanding Timing in Animation Part 1
Understanding Timing in Animation Part 2


In Understanding Timing in Animation Part 2 we mentioned the use of timing diagrams. These are simple graphic charts that animators use to describe the timing of an animated action or part of an action. Timing diagrams are very common place in examples of how to animate and seem relatively simple, but from experience with many people new to animating I have found that their creation and usage is not well understood. So I want to spend a little time talking about the basics of how a timing diagram is created and used.

FIG 1
This first example of a timing diagram (FIG 1) is the most basic form. It shows two keys 1 and 3 with a single inbetween 2. The vertical bar is the time line (it could be a horizontal line or even a curved line). It just represents a segment of time by its length. The amount of time it represents is determined by the frames which are shown as numbered cross hash marks and of course the frame rate of presentation. So this example is three frames at 24 fps or 1/8th of a second. The spacing between frames is indicated by the physical distance displayed along the time line between each pair of frame marks. So in this example the drawing at frame 2 is half way spaced between drawing 1 and drawing 3. What that is telling the animator is that when he/she creates this inbetween the rate of change between frame 1 and frame 3 is equal and constant.

FIG 2
The next example (FIG 2) is similar to the first example. It shows five frames of drawings. Frames 1 and 5 are the keys. Frame 3 is a half way breakdown. And frames 2 and 4 are also halfway inbetweens. The rate of change between drawing 1 and drawing 3 is constant. The animator would draw the frame 3 inbetween drawing first after having drawn the frames 1 and 5. Then the animator would draw frame 2 using frames 1 and 3 as references and then frame 4 using frames 3 and 5 as references.

FIG 3
Our next example (FIG 3) shows acceleration. Frames 1 and 4 are the keys. Frame 3 is a halfway inbetween. But frame 2 is a half way inbetween for frames 1 and 3 which means that the change following frame 1 is placed to create a slowing out which accelerates between frames 3 and 4 because of the greater degree of change indicated by the larger gap.

FIG 4
This next example (FIG 4) is just the opposite and shows a deceleration. Frames 1 and 4 are the keys. Frame 2 is a halfway inbetween. And frame 3 is a half way inbetween for frames 2 and 4 which means that the change following frame 2 is placed to create a slowing into frame 4. There is a deceleration between frames 2 and 4 because of the extra drawing which creates a closer spacing which produces a slowing effect.

FIG 5
So far all of these examples have used half way inbetweens which means that each inbetween is relationally balanced with respect the preceding and following drawings in the sequence. This is not always the desired situation. Sometimes we want an inbetween to “favor” either the preceding or following drawings. This next example (FIG 5) shows the use of a favor inbetween which is only fractionally changed from drawing 1. Then there is a speed up indicated by the large gap to frame 3.

FIG 6
If you look again at FIG 1 and FIG 2, both of these diagrams indicate a constant rate of change, but you should notice that because the FIG 2 diagram has two additional inbetweens its action will be slower than the FIG 1 diagram’s action. But suppose we wanted our action to still have a constant rate of change but be faster than FIG 2 but slower than FIG 1. We can indicate this type of action by using “thirds” instead of “halves” for our inbetweens as shown in FIG 6. This spacing still indicates a constant rate of change between keys 1 and 4 but by having an additional inbetween as compared to the figure FIG 1 diagram we get a slower action but not as slow as indicated by the FIG 2 diagram. This can be an issue if the action looks like it is moving too fast with only one inbetween but also too slow with three inbetweens. The difficult part is finding the 1/3rd position between the two keys for the first inbetween. The second inbetween would then just be a half.

FIG 7

Our last example (FIG 7) is a “slow out” to a constant speed to a “slow in” diagram. All the inbetweens are halves relative to their preceding and following drawings. We are accelerating out from drawing 1 and decelerating into drawing 9, while the action is moving at a constant speed in the middle.

Two additional notes are that if we had static hold drawings or wanted to show exposures of 2’s or 3’s for example, we would just indicate that by the numbers used for the frame numbers on the chart. An omitted frame number indicates a repeat exposure. Also, some animators like to indicate the relative order of creation of the drawings by using longer hash lines for the drawing to make first and progressively shorter hash lines for the later drawings. A circled drawing number indicates a key.

Now that we have a better understanding of the meaning of these example timing diagrams, we will be ready in the next part of this series to begin talking about timing and how we translate some physical world’s effects into our timing charts.

Continued in Part 4

Understanding Timing in Animation Part 2

Please read Understanding Timing in Animation Part 1 before continuing

Because timing is such an important part of an animated presentation, one of the best planning tools for any animator is a stop watch. You can get a great stop watch for estimating the timing of actions for less than $10 at most discount stores. Some people think they need a special “animator's” stop watch which has built in calculations for film footage and/or frames, but this isn't really needed.

Footage is actually another way of representing the amount of time that something is shown on the screen. Depending on the size of the film stock used, you can calculate the number of feet or fractions of feet used to present a specified amount of screen time. Basically instead of saying something lasts on the screen for 16 frames at 24 FPS, you would say it lasts for 1 foot of 35mm film length. The length of film footage created per week has been used historically in many studios as a method of measuring production output. Footage is not a big deal in computer animation, we don’t think in terms of film stocks, and all that you need to calculate the needed number of frames is to know the FPS constant for your movie and then multiply it by the number of seconds or fractions of a second that you decide represents the action. Just remember you can’t have a fraction of a frame, so everything is rounded to the next whole frame.

Once you determine the speed, the spacing is largely a matter of intuition and visualization that comes from lots of practice and experience. Most animators come to understand and appreciate that the “pencil test” is a major often repeated step in the process of adjusting an action’s timing. Fortunately “pencil tests” are quick and easy to perform in the computer world. Each timing problem is unique and there are no simple formulas, it’s primarily a process of trial, adjustment and experience.

We will soon learn how to create and use “timing diagrams” which graphically represent the number of frames used and their relative spacing. An older term for these diagrams, which I also like, is to call them railway diagrams because they resemble a sort of train track. In a complex bit of character animation you will potentially create a number of different timing diagrams because there are many concurrent timing problems associated with the various parts of the performance. But there are more basics to cover before we layer on that complexity.

Rhythm and Beats:
Most timing of actions is based on rhythm. As animators we often learn to get a feel for the timing of an action by humming a little sort of rhythmic beat like “dum-de-dum”. Many animators tap the end of their pencils on their desk to get a feel for the beat. Here is a great trick I recently learned to use as a training aid for getting a better feel for timing rhythms. We can call these rhythm tests. For this example we will set up a movie time line with two seconds worth of frames. How many frames is that going to require? The answer is that it all depends on the presentation frame rate. Our chosen frame rate is 24 FPS. So how many frames do we need for a two second time line? The answer is 2 seconds X 24 FPS = 48 frames. So now we can visually simulate all kinds of timing rhythms by just creating a frame with a black matte that covers the entire movie screen. Then we can place additional copies of this black matte frame at some regular intervals along our timeline. For this example we will put one every 12th frame starting with frame 12. So that’s frames 12, 24, 36, and 48. Now go back and fill in all the other frames preceding each “black” frame with a blank frame or a “white” matte frame. Now you can publish the movie and you will have a timing rhythm that “flashes” a black timing frame every half second. Get the beat? Using this same technique you can set up different timing patterns and then observe them. It’s a neat way to develop a good sense for the various rhythms of timing.


12 beat timing

Animation timing is often expressed as having particular beat, like 20 beat or 12 beat or 8 beat. Here’s how that comes about.

Each piece of music has a timing signature. Time signatures tell you how many and what kind of notes per measure there are. The number on top is the number of notes per measure, and the bottom number is what kind of note. A measure is a pattern of a group of beats. It is very common to find measures having groups of two, three or four beats. 2 / 2 means 2 beats per measure, 3 / 4 means 3 beats per measure, and 6 / 8 means 6 beats per measure. The bottom figure represents the particular note that receives the beat. Music written in 3 / 4 timing represents that each quarter note gets a beat and that there are 3 such quarter notes in each measure.

For our purposes here we want to relate beats per measure to frames. Assuming that 1 second of time is equal to 1 measure or bar of music, then our musical measure would equal 24 frames at a frame rate of 24 frames per second. If the music is played at 2 beats per measure then frames 12 and 24 receive the beat. If the music is played at 4 beats per measure then the beats would fall on multiples of frames 1, 7, 13, and 19. Therefore, 4 beats per measure has a beat every 6 frames. If the music is played at 3 beats per measure the accent frames are multiples of frames 1, 9, and 17. Therefore 3 beats per measure has a beat every 8 frames. And if the music is played at 6 beats per measure the accent frames are 1,5,9,13,17, and 21. Therefore 6 beats per measure is one beat every 4 frames.

A metronome, also a great animators tool, can be used to give us timing in beats per minute. So for example with the metronome set at 120 bpm (beats per minute) that translates to 120 beats / 60 seconds or 2 beats per second or a beat every 12 frames. That’s the same as saying the timing is 2 beats per measure.

Here are some useful relationships based on metronome settings:
40 bpm – 1 beat every 36 frames
60 bpm - 1 beat every 24 frames
80 bpm – 1 beat every 18 frames
120 bpm – 1 beat every 12 frames
180 bpm – 1 beat every 8 frames
240 bpm – 1 beat every 6 frames

An easy calculation method is:

(total frames/min.) / (total beats/min.) = frames/beat

(1440 frames/min) / (120 beats/min) = 12 frames/beat or 1 beat every 12 frames

Some general rules for animation timing are:

Fast action is 1 beat every 8 frames often referred to as 8 beat

Moderate action (march time or walk time) is 12 beat or 1 beat every 12 frames

Slow action is 20 beat or 1 beat every 20 frames


20 beat timing

So now that you can relate musical beats to screen time, you will understand if someone says "that action should be a 10 beat" exactly what they mean. Set your metronome for a 10 beat which is 144 bpm and you have the rhythm for the action.

To add variety to your timing you shouldn’t accent each beat visually but instead you can use variations like accent just before the beat, or exactly on the beat, or between the beats, or ignore the beats entirely, or only accent significant beats. Remember variety is what keeps the animation more interesting.

By the way if you’re animating to a musical score you may find that the beats hit the frames a little differently then based on a measure being exactly 1 second. Remember musicians are only human and their timing isn’t that precise so listen to a stretch of the music and find the average beat because that will be what you want to work from. Fortunately there is software that can help you with this determination.

Beats are used for more than just timing actions, you can get some really nice results if you learn to plan and time your cuts according to beats as well. More to come...

Continued in Part 3