Animation, whether it be in film, hand draw, computer, or web based, all use some of the same principles. While we will focus on the web, the animation basics ring true regardless of when it is shown.
Animation is actually a series of still images which are displayed rapidly. If enough images are shown in quick succession, then the image appears to move smoothly, as the human eye cannot distinguish the individual images. Generally this is around 21-25 images per second.
Each image is often known as a frame in an animation sequence.
Flash used to default to 12 frames per second. This made it seem “jerky”, but helped keep file sizes small. It also helped as some old computers couldn’t display 20+ frames per second. Which could cause all types of other issues. Now Flash defaults to 24 frames a second. This is generally smoother than many old Flash files, but still keeps the file size relatively small, while making the animation look much smoother.
Old standard definition TV used 30 frames/second (ok actually 29.97) but interleaved the odd and even rows of each image. Film uses 24 frames / second, and hi-def TV uses a variety based upon the version of Hi Def.
Images often have a fore-ground, a middle ground, and a back ground. By moving some layers of the image at different speeds than other layers, it helps convey a perception of depth in the animation.
12 Basic Principles of Animation
There have been 12 basic principles to helping an animation look more realistic. These were developed by Disney animators, and can be held tightly, or exaggerated for effect when needed. http://en.wikipedia.org/wiki/12_basic_principles_of_animation
- Squash and stretch
- Anticipation
- Staging
- Straight ahead action and pose to pose
- Follow through and overlapping action
- Slow in and slow out
- Arcs
- Secondary Action
- Timing
- Exaggeration
- Solid Drawing (a solid three-dimensional feel, adding weight)
- Appeal (how likable)
An Introduction to Animation on the Web was originally found on Access 2 Learn
