HTML and CSS Reference
In-Depth Information
techniques and mathematical concepts are language-agnostic. We target the web browser here, but given
modest graphics support wherever your coding environment, these formulas and examples are applicable
anywhere.
Sure, you can skip this chapter if you can't wait to write some code. But it's strongly suggested you come
back to it at some point. If nothing else, you'll find some insights into how animation works.
What is animation?
Animation is motion. Motion is a change in the position of an object over time—one minute it is here, the
next minute it is over there—and space between those two points. By applying mathematical formulas to
an object's location, you can determine its next position and affect the behavior of the movement—breathe
life into it.
But animation is not just movement, it's change in any visual attribute: shape, size, orientation, color, etc. A
ball squishes, plants grow, faces contort—something changes. Some of the earliest computer animations
cycled colors to simulate movement; for instance, you can make a waterfall composed of pixels in various
shades of blue that appears to alternate hues with such frequency to look like falling water, though nothing
on the screen has actually changed position.
Time is a fundamental component of animation. It is the mechanism used to express change in an object
from one position to the next. And without time, there is no motion—it is a still image and not an animation.
Consequently, without motion, we have no sense of time, even if it is present. Take for example, a video of
an empty parking garage from a security camera. Without movement, it is impossible to decide if you are
watching a live stream, a frame from 5 seconds ago, or an unchanging still image. Only when a plastic bag
blows across the screen are you assured that time is present and further change can occur. Without time,
nothing else happens in the picture.
This brings up another point, animation keeps us interested. If something changes, our brains naturally
become curious. What changed? Why did it change? Did I cause it to change? Does this change fit
within the mental model I've constructed for this object or do I need to adjust my assumptions?
Temporal media types such as music and film are compelling because, as in life, we are not sure what
will happen next. We may have a general idea, and discerning these patterns is pleasurable, but we find
joy in tickling the boundaries of the unexpected. Nontemporal media—images, paintings, text—do not
change; we may explore the details of the work and our understanding and interpretation might change
over time, but the work will not. This is what makes animation so gripping. Change is inherent to the
medium; it captures a part of our experience that we are naturally attuned to. Thus, we are able to get
lost in a movie for hours or enthralled by a video game for days. If something is going to happen,
generally we want to know what that is.
Frames and motion
Animation is a process that creates the
illusion
of motion. Nearly every form of projected motion media
uses
frames
to accomplish this.
