Chapter 5:
Animation
ITBIS351 Multimedia Systems and
Hypermedia
Define animation and
describe how it can be
used
in multimedia
Discuss the principles of
animation
Discuss the animation
techniques
of cel and computer
animation
Create computergenerated
animations from multiple
still images
OUTLINE
The Power of Motion
Persistence of
Vision
(Biological)
Phi
(Psychological)
Animation
Principles of Animation
Persistence of Vision
Phi
Frames
Flickering
Principles of Animation
• 2D animation: the visual changes that bring an image
alive occur on the flat Cartesian x and y axes of the
screen.
• 2 ½ D animation: where shadowing, highlights, and
forced perspective provide an illusion of depth, the third
dimension.
• 3D animation: software creates a virtual realm in three
dimensions, and changes (motion) are calculated along all
three axes (x, y, and z).
Animation by Computer
Path animation
Path Animation
When creating an animation
Brainstorm
ideas
Script and
Storyboard
Select best
tools
Animate!
Animation Techniques
Cel Animation
• Cel animation: Also known
as hand drawn animation
uses a number of celluloid
sheets to drawn frames.
• One minute of cel animation
requires 1,440 frames to be
drawn.
Cel Animation
Keyframes
Tweening
Pencil Test
Ink and
Paint
Cel Animation Process
Keyframes and Tweening
Pencil Test
• Computer animation
uses the principles of
cel animation
• Computer 3D
animation adds more
focus on modeling,
lighting and
rendering.
Computer Animation
• Kinematics is the
study of the
movement and motion
of structures that have
joints, such as a
walking man.
Kinematics
• Inverse kinematics: is the process by which you link
objects such as hands to arms and define their
relationships and limits (for example, elbows cannot bend
backward).
Inverse Kinematics
•
•
•
•
•
•
•
•
•
•
•
•
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
Appeal
12 principles of
animation
Type the following SVG code into notepad, then open the file on an HTML5 compliant browser (IE9,
Firefox(updated), Chrome(updated) etc..
<svg width="8cm" height="3cm" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<rect x="1" y="1" width="800" height="300" fill="none" stroke="rgb(255,0,255)" stroke-width="4" />
<rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255,0,0)" >
<animate attributeName="x" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="300"
to="800" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="100"
to="300" />
</rect>
</svg>
Chapter 5 Try@Home