chapter 5: animation itbis351 multimedia systems and hypermedia
TRANSCRIPT
Chapter 5: AnimationITBIS351 Multimedia Systems and Hypermedia
OUTLINE
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 computer-generated
animations from multiple
still images
The Power of Motion
Principles of Animation
Animation
Persistence of Vision
(Biological)
Phi
(Psychological)
Persistence of Vision
Phi
Principles of Animation
Frames Flickering
Animation by Computer
• 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).
Path animation
Path Animation
Animation Techniques
Brainstorm ideas
Script and Storyboard
Select best tools Animate!
When creating an animation
Cel Animation
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 Process
Keyframes Tweening Pencil Test Ink and Paint
Keyframes and Tweening
Pencil Test
Computer Animation
• Computer animation uses the principles of cel animation
• Computer 3D animation adds more focus on modeling, lighting and rendering.
Kinematics
• Kinematics is the study of the movement and motion of structures that have joints, such as a walking man.
Inverse 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).
12 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• Appeal
Chapter 5 Try@Home
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>