Lecture 7
Animation
INCS409 – Introduction to Media Informatics
Acknowledgement: these slides are based on the slides made by Prof. Dr. Rimon Elias, Dr. Amal Aboulhassan, and
Prof. Dr. Mathias Lux along with the textbooks Digital Multimedia and Fundemantals of Multimedia
Dr. Eng. Amal Yassien
O0ice: A.216
O0ice Hours: Monday 4th (or by appointment via email)
Email: [Link]@[Link]
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Today’s Agenda
• Animation – Conceptual Overview
• Digital Animation Production
• Applications
• Animation Delivery
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
What is Animation?
• Animation is the creation of moving pictures one frame at a time.
• Individual frames can be created using a graphics program.
• A sequence of images can be stored in consecutively numbered image files.
• Files are displayed one after another to perform the animation; or
• Files can be imported into video editing programs to be combined in a
single file.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
What is Animation? – Remember Cartoons!
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
What can be animated?
• Animation covers all changes that have visual effect. This includes:
• Motion dynamics (changes in object position overt time)
• Update dynamics (changes in color, structure, etc.)
• Changes in camera parameters (position, orientation, etc.)
• Other changes like illumination, lighting or rendering techniques
may result in animation as well
• Animation can be used in entertainment, virtual reality, scientific
visualization, etc.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Today’s Agenda
• Animation – Conceptual Overview
• Digital Animation Production
• Applications
• Animation Delivery
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
One Way to Construct Animation Digitally: Animated GIFs
• An animated GIF file contains multiple bitmapped images.
• The individual images can be displayed in sequence by Web browsers or
other programs without the need for a plug-in.
• Animated GIFs are only suitable for short simple animations.
• Animated GIFs use indexed color and lossless intra-frame compression,
whose eNectiveness depends on the nature of the images in the animation.
• Animated GIFs cannot have a soundtrack or player controls.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Another Way to Construct Animation Digitally: Animated Sprites
A sprite is a term commonly used in computer graphics to refer to a two-
dimensional image or animation that is integrated into a larger scene or
game environment. Sprites are often used to represent characters,
objects, or special effects within a game, website, ..etc.
[Link]
Sprite sheets, collections of static 2D drawings that depict
representative poses for an object, offer a more cohesive, drawing-centric
approach to creating dynamic images. Producing motion with a sprite
sheet involves cycling through drawings of the object.
[Link]
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Sprite Animation: Basic Idea
• The basic idea: Suppose we have an animation figure,
as in Fig. 2.4 (a). Now create a 1-bit mask M, as in Fig.
2.4 (b), black on white, and accompanying sprite S, as in
Fig. 2.4 (c).
(a) (b) (c)
Fig. 2.4: Sprite creation: Original, mask image M, and sprite S
(“Duke” figure courtesy of Sun Microsystems.)
Li, Drew, & Liu © Springer 2021
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Sprite Animation: Construction Example
• We can overlay the sprite on a colored background B, as
in Fig. 2.5 (a) by first ANDing B and M, and then ORing
the result with S, with final result as in Fig. 2.5 (e).
(a) (b) (c)
(d) (e)
Fig. 2.5: Sprite animation: (a): Background B. (b): Mask M
Li, Drew, & Liu © Springer 2021 (c): B AND M. (d): Sprite S (e): B AND M OR S
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Sprite Animation vs. Animated GIFs
Sprite Animation Animated GIFs
• Light-weight
• Allows the support of Interactive
animation based on user action • Supported by all browsers
• Requires higher technical skills to • Supports only 256 colors
develop which cause dithering
• Quick loading time • Require high internet speed to
animate the images
• Some services don’t support this
(like animation in email marketing)
[Link]
web/#:~:text=Clean%2C%20smooth%20animations%20are%20what,CSS%20Sprites%20i
s%20on%20display.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Key and In-between Frames
In traditional animation, chief animators draw key frames at
the important points in the animation, and the in-betweeners
create the intervening (in-between) frames.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Interpolation and In-between Frames
• Animation programs perform the equivalent of in-betweening by
interpolating the values of properties such as position between key
frames.
• Interpolation is the calculation of values of a function lying between
known points.
• Interpolation relies on having numerical values to interpolate. In other
words, only properties that have a simple numerical representation can
be interpolated.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Frames Interpolation: An Example
• Interpolation may be used to control the rate of change of properties as
well as their values.
• Parameters of filters and effects may be interpolated.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Interpolation: Raster vs. Vector Graphics
• Interpolation can be applied:
• to layers in bitmapped images or
• to properties of vector objects.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Bitmap Animation Interpolation
• Since bitmaps do not contain identifiable objects, the use of layers to isolate di8erent
elements of an animation is essential if we wish to change them independently.
• This operation may require resampling and consequently causes a loss of image
quality.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Vector Animation Interpolation
• In the case of vector animations, we do have identifiable objects, and
their properties are represented entirely numerically.
• This makes interpolating the position, size, color and other properties of
vector objects conceptually and practically easier than interpolating
bitmaps.
• Applying transformations to these properties does not necessitate any
resampling
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Linear Interpolation
• The simplest form of interpolation is linear.
• If we consider interpolating motion in a straight line , linear
interpolation causes an object (or layer) to move equal distances
between subsequent frames where
𝑇𝑜𝑡𝑎𝑙 𝑑𝑖𝑠𝑡𝑎𝑛𝑐𝑒
𝐷𝑖𝑠𝑡𝑎𝑛𝑐𝑒 𝑏𝑒𝑡𝑤𝑒𝑒𝑛 𝑓𝑟𝑎𝑚𝑒𝑠 =
# 𝑜𝑓 𝑖𝑛𝑏𝑒𝑡𝑤𝑒𝑒𝑛 𝑓𝑟𝑎𝑚𝑒𝑠 + 1
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Linear Interpolation: An Example
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Linear Interpolation: An Example
Example: Given a circle centered at p1=[5,6]T at key frame 1 and moved to p2=[15, 26]T at
key frame 2. If the motion is linearly interpolated through 9 in-between frames (i.e., 10
steps). Calculate the position of the center at the fifth in-between frame (i.e., [x5,y5]T).
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Linear Interpolation: An Example
• Example: In the previous example, determine the distance
d the circle moves between each two consecutive frames.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Linear Interpolation: A Drawback
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Linear Interpolation: A Solution
• Easing in and out can
be used to cause the
motion to increase or
decrease gradually.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Linear Interpolation: A Solution
• Easing in: Movement is made more
gradual by using smaller, slowly
increasing, increments between the
first few frames (i.e. the object
accelerates from a standstill to its
final velocity).
• Easing out: The converse process of
deceleration.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Linear Interpolation: A Drawback and its Solution
• In this example, two consecutive sequences (kf1 to kf2
and kf2 to kf3) are interpolated separately.
• This results in a sharp discontinuity at kf2, which appears
as a sudden deceleration at that point in the animation.
• By using Bézier curves instead of straight lines to
interpolate between key frames, smooth motion can be
achieved.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Orientation and Motion Path
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Today’s Agenda
• Animation – Conceptual Overview
• Digital Animation Production
• Applications
• Animation Delivery
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Sprite Animation – HTML/CSS Example
[Link]
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Morphing using Linear Interpolation – Python Example
Linear Interpolation for 10 frames across time
x(t) = xA + (xZ – xA) * t / 10
y(t) = yA + (yZ – yA) * t / 10
[Link]
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Morphing using Linear Interpolation – Python Example
[Link]
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Today’s Agenda
• Animation – Conceptual Overview
• Digital Animation Production
• Applications
• Animation Delivery
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Delivering Animation
• There are different methods that can be used to
deliver animation. Among them:
• Animated GIFs
• Flash (SWF)
• Video
• JPEG sequences displayed by JavaScript
• Animated Portable Network Graphics (APNG)
• HTML5 Canvas Animation
• Scripted SVG
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Delivering Animation
• If animation is delivered as video
• a soundtrack can be added.
• Player controls can be used.
• High compression can be achieved using modern video codecs.
• Flash is superior for vector animation.
• Flash should be used for interactive animation requiring scripting.
• The Flash movie file format is a compressed binary format that provides an
efficient way to deliver animation over a network.
• Animated GIFs may be used for bitmapped animation without a plug-in but
video provides the best quality.
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
Next Time
• Video
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026
GIU – Spring 2026 Dr. Eng. Amal Yassien – INCS409 – Lecture 7 April 4, 2026