Animation Basics

Animation on the Web incorporates many technologies with the goal of creating on-screen movement. Motion captures attention. It is, in a very real sense, moving. Like the earliest animation technologies, such as Zoetropes and other innovations of the 19th Century, animation relies on the eye's persistence of vision.

The term persistence of vision refers to the fact that light's stimulus lingers on the retina slightly longer than it actually shines on the eye.

BC 6fps BC 12fps BC 24fps BC 30fps BC60fps

Movies, short for moving pictures, have been around for more than a century. Movies work because of persistence of vision, the fact that a human eye retains an image for about one-twentieth of a second after seeing it.

Beta movement

Beta movement is a perceptual illusion, described by Max Wertheimer in his 1912 Experimental Studies on the Seeing of Motion, whereby two or more still images are combined by the brain into surmised motion. This is often erroneously referred to as the phi phenomenon, which is a different, related illusion.
The classic beta phenomenon experiment involves a viewer or audience watching a screen, upon which the experimenter projects two images in succession. The first image depicts a ball on the left side of the frame. The second image depicts a ball on the right side of the frame. The images may be shown quickly, in rapid succession, or each frame may be given several seconds of viewing time. Once both images have been projected, the experimenter asks the viewer or audience to describe what they saw.
Generally, audiences will claim that they saw a ball move from left to right. They did not, in fact, see this, but the cognitive process of perception links the two images in time and causality.
The Zoetrope

In the early 19th century, several devices began to appear that used persistence of vision to create the illusion of motion from still images. The zoetrope, invented by William George Horner in 1834, consisted of a series of pictures on a paper strip arranged on the inside of a revolving drum. The drum had small slits you could look through to see the pictures.

Most 19th century zoetropes had thirteen slots. A strip with 12 images will produce a moving subject that appears to progress forwards. A strip of 13 images (the same number as slots) gives a moving image that is stationary. As the figures are always moving when viewed, they appear rather fuzzy.

Muybridge

To settle a wager regarding the position of a trotting horse's legs (based on Marey's work), Eadweard Muybridge, a British photographer who had recently been acclaimed for his photographs of Yosemite.
Although Muybridge initially considered the task impossible, he made history when he arranged 12 cameras alongside a race track. Each was fitted with a shutter working at a speed he claimed to be "less than the two-thousandth part of a second." Strings attached to electric switches were stretched across the track; the horse, rushing past, breasted the strings and broke them, one after the other; the shutters were released by an electromagnetic control, and a series of negatives made. Though the photographs were hardly more than silhouettes, they clearly showed that the feet of the horse were all off the ground at one phase of the gallop. Moreover, to the surprise of the world, the feet were bunched together under the belly. None of the horses photographed showed the "hobbyhorse attitude" - front legs stretched forward and hind legs backward -so traditional in painting. The photos were widely published in America and Europe. The Scientific American printed eighteen drawings from Muybridge's photographs on the first page of its October 19, 1878 issue.

Readers were invited to paste the pictures on strips and to view them in the zoetrope.

In 1880, using a similar technique with a device he named the zoogyroscope, or zoopraxiscope, Muybridge projected his pictures on a screen at the California School of Fine Arts, San Francisco." Motion pictures were born...

Eadweard Muybridge's 'Zoopraxiscope' Projector, c.1885
The Zoopraxiscope projected a series of images ( hand painted from Muybridge's photographic sequences ) on a circular rotating glass plate. The images were elongated to compensate for the distortion caused by projection through a rotating shutter

The Kineograph

The Kineograph was invented/devised by John Barnes Linnett (British Patent 925. Filed March 18. Issued September 5, 1868).

It is also known as a flipbook, and consists of drawings or photographs in sequential stages of movement bound as a book. To view, the book is flipped through rapidly with the thumb. These are simple but effective, and were the first devices to present animation in a linear, rather than circular, sequence.

The Kineograph is simple but rewarding to construct. Start with a small blank tablet of fairly stiff paper. On each page, draw one image. The movement of each drawing should lead into the next. Keep in mind that the images will move by at a rate of many per second, so the movements should be gradual. Once you are happy with your drawings, rapidly flip through the pages. The little drawings should spring to life.

http://www.fliptomania.com/

The Mutoscope

The Mutoscope is based on the same principle, but the images are drawn on individual cards and are flipped mechanically. This can be reproduced fairly simply, but the sequence won't be as long. Shown in the drawing is a basic layout. The images are on small, tabbed cards stuck evenly around a cork. The cork is impaled on to a thin bent metal rod that serves as a crank. The whole thing is set in a box with a small window cut into it and a protruding tab to catch the images, causing the "flip" action. The box should be just large and deep enough to accommodate the images.

Quicker Than the Eye

All cinematic animation, film, and video is made up of many individual frames that leave their unmoving ghosts frozen in the eye until the next image flashes before it, until the brain is tricked into thinking that it is seeing one thing moving, instead of many things standing still. If our eyes were quicker and our brains not so gullible, we'd see movies and cartoons as an endless procession of monotonous freeze frames, with characters chronicled in every imaginable pose like an obsessive-compulsive comic book that never gets to the point.

In some ways, the Web is even more demanding on the eye's and brain's imaginative trickery. Movies and video reliably deliver 24 and 30 frames per second, respectively, to our eye-brains, which are completely adequate for tricking us into believing that we're seeing unbroken motion. Even as few as 15 frames per second can be enough to eliminate the impression of strobing or flicker, which is what you get when you turn a strobe light down to low speeds.

Suffice to say that more frames per second are better, up to the point where more frames means more work without resulting in better motion. Games are now toying with 60fps.........

Key Frames

If frames are the building blocks of all animations, then key frames are the cornerstones. Picture Elmer Fudd pointing a shotgun at Bugs Bunny's nose; then picture Bugs placing a carrot in the muzzle of the shotgun. Defining the scene takes only two frames; the rest is just in-between filler. In all animation, defining the key frames is the art, and inbetweening is the chore—often left to assistants or, in computer-generated graphics, to the animation software.

In traditional cel animation, the key frames usually define poses or moments in the action that divide one action from the next, such as a boxer coiling, swinging and missing, twirling in a tornado of household objects, and then crumpling to the ground. Teams of artists might be employed to do the tweening between these key frames, drawing, inking, painting and photographing the 24 individual cells that make up every second of a film.

In some animation programs, key frames define the state of objects at critical points in time, and the computer is relied on to tween the motion between the frames, calculating the countless changes at every intervening frame. Imagine drawing the explosion of the White House in the movie Independence Day by hand—millions of fragments of debris, dust, and smoke, to be drawn one frame at a time. There's a good reason why this type of realistic animation didn't exist until the advent of powerful computers running equally impressive software. In complex 3-D animation, animators have only to define the key frames and let the computers do the rest. This is not to imply that defining the key frames in a 3-D system (or a 2-D program such as After Effects) is easy—in any form of art, what's easy is rarely worth doing. But these systems eliminate much of the drudgery of old-school cel animation.

The very-low-bandwidth banner ads that are currently in vogue on the Web are made up of almost nothing but key frames with all in-between motion omitted. This is the shortest way to tell a story, but it's only a skeleton. Today's banner ads are an acknowledgment of the bandwidth limitations of the majority of Internet connections, not a stylistic choice. In the future, you'll see animated ads and every other type of animation with all the in-between frames where they belong.