What is animation?
Animation means giving life (movement) to things that cannot move by themselves: a drawing, a paper cut-out, a clay toy or a computer model. A real film records things that really move. Animation builds the movement picture by picture.
Each single picture is a frame. When frames change faster than about 10 per second, the brain stops seeing separate pictures and sees smooth motion. This is called persistence of vision (the eye keeps an image for a short moment).
Real and virtual characters
An animated character is virtual: it exists only in drawings or on a computer. It can do things a real actor cannot, like stretch, fly or change shape.
Frames, frame rate and the timeline
Frame rate = frames shown each second, written fps. Cinema uses 24 fps, video often 25 or 30 fps, simple cartoons and stop motion often 12 fps.
Frames needed = fps × time in seconds. A 5-second clip at 12 fps needs 60 frames.
Animation software shows a timeline: a strip of frames from left to right. Layers sit on top of each other like sheets of glass: background on the bottom layer, character on another, so you can move one without redrawing the other.
Frame-by-frame and GIF
In frame-by-frame animation you draw every frame yourself. A GIF is a small image file that holds several frames and plays them in a loop. It is good for stickers and short web animations, but it has only 256 colours.
Key frames and tweening
A key frame marks an important pose: where a move starts and ends. The frames between them are in-betweens. In computer animation the software fills them in; this is tweening (from "in-between").
- Motion tween: the object moves from point A to point B.
- Rotation: it turns.
- Colour tween: it changes colour or fades in.
- Text animation: letters fly in, grow or type out.
Before animating, plan: the idea, a short script, a storyboard (small sketches of each shot) and a style (cartoon, paper, realistic).
Types of animation: stop motion, 2D, 3D, raster and vector
Stop motion and paper-cut animation
In stop motion you move a real object a tiny bit, take a photo, move it again, take another photo. Paper-cut animation uses flat paper characters with joints (split pins) on a painted background. Design the character with separate moving parts (arms, legs, head) and keep the camera fixed on a stand.
2D and 3D computer animation
2D animation is flat (like a cartoon). 3D animation uses models with depth that a virtual camera can circle around.
Raster and vector
Raster animation stores every frame as pixels; zooming in makes it blocky; files can be large. Vector animation stores shapes as maths (points, lines, curves); it stays sharp at any size and files are small.
Interactive animation
Interactive animation reacts to the user: a button that bounces when you tap it, a game character you steer, or a web banner that moves when you point at it.
Try it: make a 2-second flipbook
Take 24 small sticky notes. On each, draw a ball a little lower than on the last, then rising again. Flip them fast: that is 2 seconds at 12 fps. Now try 12 notes for the same move: it looks jerkier. You just tested frame rate!
Key formulas and definitions
- Frames needed = frame rate (fps) × time (s)
- Time of a clip = number of frames ÷ fps
- Frame = one still picture
- Key frame = a main pose; in-between = a filled-in frame
- Raster = pixels; vector = shapes made from maths
Worked examples
1. How many frames does a 4-second clip at 12 fps need?
Frames = fps × time = 12 × 4 = 48 frames.
2. A GIF has 30 frames and plays at 10 fps. How long is one loop?
Time = frames ÷ fps = 30 ÷ 10 = 3 seconds.
3. A ball moves from the left edge to the right edge in 1 second at 24 fps. You draw only the first and last frames as key frames. How many in-betweens must the software make?
24 frames in total; 2 are key frames, so 24 − 2 = 22 in-betweens.
4. A logo must look sharp on a phone and on a huge billboard. Raster or vector animation?
Vector: its shapes are stored as maths, so they redraw sharply at any size. A raster logo would turn blocky when enlarged.
Common mistakes
- Thinking more frames always make a clip longer. At a higher fps, more frames fill the same time.
- Moving the camera during stop motion. Keep the camera fixed; only the object should move.
- Making big jumps between frames. Small changes between frames give smooth motion.
- Calling GIF a vector format. A GIF is a raster image made of pixels.