Fundamentals of Animation

Fundamentals of Animation

• Animation involves creating moving pictures one frame at a time
• It creates an illusion of movement by sequentially playing still image frames

Frame Rate

• The general rate for effective animation playback is 15-30 fps (frames per second)

What Animation Does

• Animation is a drawing that moves, making it "bringing it to life"
• It is a communication tool for complex ideas
• Animation is advantageous to show how something works rather than explaining

Animation Images

• In animation, a series of rapidly changed images create an illusion of movement
• An example would be a sequence of a bird's wings in different positions create the illusion of flapping

Frames

• Drawings are photographed sequentially, using a movie camera advancing one frame at a time
• Each drawing is called a "frame", which is a snapshot of a particular moment

Variables in Animation

• Animation accounts for time varying positions (motion dynamics), shape, color, transparency
• Animation also accounts for structure and texture of an object (update dynamics)
• Animation also considers lighting, camera position, orientation, and focus

Animation vs Motion Video

• Animation uses graphics drawn by hand or via software
• Motion video uses actual photographs of real-world objects taken through a camera

Why Use Animation

• Animation is easier to show how something works
• Animation also indicates movement
• Animation also illustrates change over time
• Animation also visualizes three-dimensional objects
• Animation attracts attention

Types of Animation

• Cel animation
• Path animation
• 2D/3D animation, also referred to as Computer animation

Cel-based Animation (2D)

• Cel animation is the oldest form of animation
• Cel: Clear celluloid sheets on which images were drawn by movie animators are used
• Celluloid images are placed on a stationary background, which remains fixed
• Only the object changes from frame to frame

Traditional Animation

• Traditional animation, also called cel or hand-drawn animation, predominated in 20th-century animated films
• Individual frames are drawings photographed on paper
• Each frame differs slightly from the one before it to create the illusion of movement

Traditional Animation: The Shift to Digital

• Traditional cel animation became obsolete at the beginning of the 21st century
• Traditional animation suits artists working with traditional media like paint and coloring pencils
• Nowadays, animators' drawings and backgrounds get scanned or drawn into a computer system
• Additionally, software programs are used for coloring and simulating camera movement

Examples of Traditional Animation

• Pinocchio (1940)
• The computer-aided The Lion King (1994)

Path-based Animation (2D)

• Path-based animation stores mathematical entities-also called vectors-by the sprite, not frames
• These vectors stored by the sprite move an independent object, like a bird, planet, ball or logo
• The sprite moves along a motion path, typically curved, which uses splines
• Path-based animation is also known as sprite animation

Path Specification and Key Frames

• Objects move along a predetermined path
• A path is specified by mouse dragging or by clicking on intermediate points
• Tweening is used to fill in the path between predetermined points
• Key frames are used to indicate the starting and ending positions
• Path-based animation can be created using most multimedia authoring programs

Path-based Animation: Movement and Change

• Path animations move an object along a predetermined path on the screen
• The path can be straight or curved
• The object stays the same but can be resized or rotated
• Path animation is easier to create than cel animation due to one object versus different positions
• Specifying the beginning and end positions uses tweening to fill in intervening frames

Keyframes and Tweening

• Keyframes are key drawings
• Tweening uses inbetweens to transition between keyframes

2D Animation

• 2D, or vector-based, animation creates movement in a two-dimensional space
• Artists significantly can reduce time and costs using software instead of sketching every frame, such as:
  • Toon Boom Harmony
  • Adobe Animate
  • Adobe After Effects

2D Animation Use

• 2D animation styles appear across different media
• These include TV shows, video games, websites, mobile apps and feature films
• TV shows include:
  • The Simpsons
  • South Park
  • Rick and Morty
  • Family Guy

3D Animation

• 3D animation is more complex than 2D animation
• The qualities of 3D models, light sources, and cameras are defined by numerical quantities
• Model Properties, light, and camera sources can be defined through numerical quantities
• Changing a number changes properties such as surface and shape
• 3D animation requires 3-D visualization and animation skills and great amount of processing power
• 3D animation creates three-dimensional models frame by frame by creating a model or character
• It then rigs it with bones and joints, which animates the desired movement
• CGI (computer-generated imagery) is the process of creating images or scenes using computer graphics.

Steps in 3D Animation

• Modeling
• Animation
• Rendering

3D Animation - Modeling

• Modeling creates a 3D object or scene
• Objects and characters are created using a specific modeling tool or by scanning real objects into a computer
• It involves drawing and defining the object from views such as top, side, and cross-section
• At this stage, the model is known as the wire frame model

3D Animation - Animating

• Animation defines the object's motion and how the lighting and views change during the animation
• Motion is defined by setting the possible positions of the object and setting the key frames
• The in-betweens will be generated by the 3D software

3D Animation - Rendering

• Rendering involves giving objects attributes such as colors, surface textures, and transparency
• Rendering takes a substantial amount of time, depending on the animation's complexity
• Animators often render a quicker, lower-resolution animation as a test

Inverse Kinematics

• Kinematics studies movement and motion of structures that have joints
• It's useful for animating jointed structures, especially limbs of human or animal figures
• Models must obey kinematics constraints:
  • If upper arm moves, lower arm and hand move
• Inverse kinematics follows chain in reverse (easier for the animator).
  • Position the hand, then compute the motion of the arm

Fractal Design Poser

• Fractal Design Poser is a 3D software that provides pre-assembled adjustable human models.

Animation Special Effects

• Morphing transforms one image into another via a series of frames
• Morphing derives from the word metamorphosis
• Metamorphosis means to change shape, appearance or form
• Morphing shows how two images blend together, and how an image might change over time

Warping

• Warping transforms aspects of a single image in a series of frames
• Warping is a special effect that manipulates a single image
  • Stretching a facial feature to change an expression

Animation File Types

• Animated Gifs (.gif) (universal)
• Flash (.fla, .swf) (by Adobe)
• Macromedia Director (.dir)
• Sophisticated Animations:
  • Strata 3D
  • LightWave
  • 3D Studio Max
  • Maya
  • Houdini

Animated GIF

• Bitmap animation format
• Stored as a sequence of images in a single GIF file and displayed one after another
• Specifies looping, delay between frames
• File size affected by the number of colors and amount of noise in the frames
• There is a 256 color palette
• Animated GIFs have no sound
• Animated GIFs don’t require plug-ins
• Authoring tools to create animated GIFs are free and easy to learn

Animated GIF Advantages

• Animated GIFs don't rely on plug-ins
• They use scripting, so they can be viewed by wide range of browsers
• Inexpensive utilities are available on the major platforms
• Animated GIFs store any form of animation

Shockwave Flash (SWF)

• Vector animation format
• Popular web animation format
• Usually generated by Macromedia Flash
  • Some software may generate SWF files as well
• Can include bitmap images as an object
• Can include sound and interactivity elements

Making Successful Animation

• Use animation carefully and sparingly
• High quality animations require superior display platforms and hardware, as well as raw computing horsepower
• File compression is very important when preparing animation files for the Web

Some Animation Tools

• Adobe's Flash
• AutoDesk's Maya
• NewTek's Lightwave
• Papervision3D
• GreenSock's TweenMax
• 3D Studio Max
• Google Sketch Up