Chapter 5:
Animation
ITBIS351 Multimedia Systems and
Hypermedia
Define animation and
describe how it can be Discuss the principles of
used animation
in multimedia
Discuss the animation Create computer-
techniques generated
of cel and computer animations from multiple
animation still images
OUTLINE
The Power of
Motion
Persistence of
Phi
Vision
(Psychological)
(Biological)
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 Script and Select best
Animate!
ideas Storyboard tools
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
Ink and
Keyframes Tweening Pencil Test
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="[Link]
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