Home

Carin's first page

Contents of animation topics

The Basics of Animation

The Phi Factor: The Illusion of Movement.
In the original version of this article, I said, "The human visual system is designed with a thing called 'persistence of vision,' so when you blink, the world doesn't suddenly go black, but you have a constant impression of the visual field in front of you." This has always been the "received wisdom" among filmmakers, animators in particular, but apparently, we're the only people left on the planet who believe in this animal: "persistence of vision" is no longer accepted among psychologists and scientists who study perception. I am indebted to Kevin Kurytnik for pointing out this fact in a recent lecture. In fact, persistence of vision, and the phenomenon of the afterimage is too slow to account for why a series of still images seem to move. So, what do these perceptual wizards say makes still images move in our brain? The "phi phenomenon," which is defined as that phenomenon in which still images appear to move. Wow. They must have stayed up all night on that one. Fact is, we really don't know. But there is something, and we can work with it.

      This mechanism varies with different conditions, but is generally clocked at from 1/10 to 1/5 of a second. Myself, I think 1/5 of a second is just a bit too slow, based on my experience doing animation. Film takes advantage of the phi factor by providing limited samples of live action movement, letting the mind fill in the gaps for a sense of smooth motion. Animation mimics live action footage by changing images quickly enough to also take advantage of the phi factor, also giving the illusion of movement. This is very important. If your images change too slowly, they will no longer appear to move. Below a certain threshold (which varies somewhat with the conditions of the image), the illusion of motion stops, and all you have is a slide show.

      Media vary in how many images they have per second: 8mm and Super 8mm have 18 frames of film per second (f.p.s.); larger film stocks (16mm, 35mm, etc.) generally run at 24 f.p.s. (old silent films, though 16mm, were usually shot at 18 f.p.s. speed, which is why they appear comically fast when projected at 24 f.p.s.); video is 30 f.p.s. for NTSC (North American Standard) and 25 f.p.s. for PAL (British and European). With film, most animators will generally "shoot on twos," meaning that they will take two frames for every change in image (always with exceptions: camera moves require shooting on ones, some painterly images can go longer than twos), so that most film animators will usually work in increments of 1/12 second (about 8/100). With N.A. video, you can get away with shooting on threes: 1/10 of a second is still acceptable. Making your shots any slower than this can often destroy the illusion of movement. This discussion is just to give you a feel for the kind of timing used most often by animators.

      Of course, frames per second is relative to the medium, but it is a nice way of expressing things in common terms, though some of these things should be taken with a grain of salt. For example, there was a bug in an old version of Netscape, version 2.0, that would not let a GIF play any faster than 34/100 of a second, so you could see your animation slow down from the time you viewed it on GIF Construction Set to viewing it in this old Netscape. GIF Construction Set allows up to 100 f.p.s.; Javascript allows for 1000 f.p.s.; different software allows for different rates. Unfortunately, loading times on the web throw such fine calculations out the window. Thinking in terms of video or film f.p.s. rates is simpler, and easily works with the "phi phenomenon". Like all else in animation, you must try, try, try, until it looks just right, theory be hanged.

      There are different conditions that require faster or allow slower times that will still give the illusion of movement. To "fudge" your movement, so you can get away with slower times, you can try the following: 1) decrease contrast along the moving edges, to reduce flicker; 2) draw a "motion blur" on succeeding frames, which acts as a bridge to the eye between two positions; 3) draw "motion lines" along the path of movement to help the eye follow the correct path--but be a little subtle here; 4) keep some overlap between positions; 5) make your animated image relatively small; 6) test out and correct for your timing for the best effect.

Perception of Motion is Logarithmic, not Linear. A second principle of animation, based again on human perception, is the fact that making a series of movements equidistant will not make it appear smooth to the eye. Equal distances will appear to move too quickly, then slow down, then speed up again. This is easiest to imagine by thinking the viewer needs to "warm up" to a movement, or "ease in" to it. When distances are plotted logarithmically, they appear to the viewer to be smooth. Go figure. This is the kind of math that is a pain, and that I thought computers would do for us (and serious animation programs do usually at least have an option for logarithmic progressions), but this is far from being universally the case.

      This business of logarithmic movement holds for everything from a character lifting his arm to a zoom-in or zoom-out (or drawings that mimic this), or a pan (lateral or vertical movement of the background or whole scene)...making these kinds of moves linear creates jerky movement. Knowing about the logarithmic quirk of perception can help you solve this problem.

      If you are not using a program that figures this out, never fear. A logarithmic progression starts out with large intervals that diminish at each interval, like this:

     You can roughly mimic logarithmic intervals and the animation will usually look OK. Testing is everything. Tweak the thing until it moves right. I find with GIF Construction set, I often have to go back and work on the duration of the frames a good two or three times to get it from acceptable to ALL RIGHT! This kind of "polishing" is well worth the effort. Since you, too, perceive things logarithmically, if it looks good to you (and you're not making excuses, but being critical), that's what counts. It just helps to know where some of the pitfalls are, so you know what kinds of things to look for.

Trajectories and Key Drawings
      A trajectory is the path of motion you're planning to use. The key drawings are the high points of the movements, or the most telling poses. Classic, naturalistic style animation has the drawings between key drawings at roughly logarithmic intervals: this is known as "ease-in" and "ease-out". Character animation (people and animals) relies mainly on key drawings. Animation of objects and effects relies more on trajectories. In other words, a mouse scampering up the stairs will be worked out with key drawings (though his path will be a trajectory), while snowflakes or sparks will be worked out mainly with trajectories. This can become quite time-consuming with multiple objects, as each object needs its own trajectory worked out. Metamorphoses can sometimes use combinations of key drawings and trajectories, as one feature grows (or shrinks, or shifts) into a new one. Even using a program like Gryphon Morph is easier when you are familiar with the idea of trajectories.

      Most web animations are not this complex, but a little planning goes a long way. It helps to know where you're going, or you'll probably end up somewhere else. For simple animations, a few sketches on a notepad can help you clarify your thinking. If you're trying something more ambitious, you definitely need to work things out. Animation can be a confusing thing, and if you don't document the process, you often end up with annoying glitches that cause you more grief and work in the long run.

Emphasizing Movement for a Livelier Effect.
Classical animation uses several tricks to make movement snappier and more emphatic, and take away a certain tapioca-like sameness of straight, flat-footed animation. Exaggerated, comic animation goes wild with these things; naturalistic animation uses them with more restraint. It's all a matter of style. Not all styles of animation use these things, but this is a little bag of tricks that's handy to have.

ANTICIPATION. If you know a big move is coming, emphasize it by going BACKWARDS first. In other words, before leaning forward, lean back a bit. This is like a pitcher's windup, and it telegraphs the movement, and makes it more believable. For sound reasons, people often anticipate a motion just to get up enough momentum. It can be effective.

FOLLOW-THROUGH. After the move, let the moving object go slightly beyond the final point. This can be a whole trajectory in itself, like the pitcher's arm continuing downward after the ball is released, or can go past a point, and snap back, depending on the motion itself.

SQUASH AND STRETCH. Most GIF animations that use simple objects could benefit from this trick. Make the object slightly elastic, so it stretches into a movement, and squashes on impact with another object. This really adds life to bouncing balls and other simple movements (without it, you've got more of a bowling ball than a rubber ball).

DRAG. With complex objects and characters, you can show the force of inertia by having different parts follow the trajectory at different rates: the slower bits appear to "drag," as does any object at rest suddently becoming an object in motion. These bits can also be behind-time in the trajectory. Disney has always used this to great effect with the hair and clothing of human characters, and ears and tails of animal characters, so a character leaping up is followed by these peripheral parts, then when the character is on the way down, the hair, ears, etc., are still travelling up, and reverse course a little more slowly.