Animation: The art of creating moving images with the use of computers (from
Wikipedia)
Examples of Uses of Animation
1. Represent an application that is dynamically evolving (e.g., games,
simulation of a factory floor)
2. Timers (e.g., stopwatches, clocks)
3. Drawing attention (e.g., ads, fly-ins on powerpoint slides)
4. Feedback (e.g., removing a captured game piece or creating a puff of
smoke to denote a deleted element)
5. Help systems: Some help systems will animate the sequence of actions that
a user needs to perform to accomplish a task
How animation is accomplished
1. Overview: To create the illusion of movement, an image is displayed on
the computer screen then quickly replaced by a new image that is similar
to the previous image, but shifted slightly. This technique is identical
to how the illusion of movement is achieved with television and motion
pictures.
2. Can be done from an application model or from a series of glyphs
a. Glyphs
i. A single glyph is moved across the screen
ii. A set of glyphs is animated in the same position (dancing)
iii. A set of glyphs is shown at different positions on the screen
(tumbling)
b. Application model: At each time step, the application is queried as
to its current state and view information is computed on the basis
of that state information
i. examples
1) clock: animation is based on current time
2) simulation of a physical system: application is modeled as a
series of mathematical
equations with time being one of the independent variables. At
each time step the other inputs to the equations are computed or
estimated and the equations are solved for locations. Objects are
then rendered at these locations
c. Path model: A mathematical equation is used to describe a path along
which an object moves. Time is the independent variable for this
path. At each time step the equation is solved and a location is
computed for the point
i. The path is frequently represented as a function of time, t, and
the x and y dimensions may be specified independently
Example: The following two equations will move an object along
a line that starts at (x0, y0) and ends at (x1, y1):
x(t) = x0 + (t * (x1 - x0))
y(t) = y0 + (t * (y1 - y0))
t varies from 0 to 1 in this example
ii. For circular objects (circles, ellipses, and arcs), it can
help to use polar coordinates.
1) In polar coordinates, points on a circle are determined by 3
variables:
a) the circle's center point,
b) the circle's radius, r
c) an angle between 0 and 2π
x = center_x + r * cos Θ
y = center_y + r * sin Θ
2) The path equations using time, t, are now represented as:
x = center_x + r * cos (t * 2π)
y = center_y + r * sin (t * 2π)
Cognitive explanation for why animation works (from wikipedia)
1. A minimum of 12 frames per second is necessary to trick the human
eye/brain into thinking it's seeing smooth movement
a. Hand drawn cartoon animation uses 15 fps
b. Movies uses 24 fps
c. The reason no jerkiness is seen at higher speeds is due to
"persistence of vision." From moment to moment, the eye and brain
working together actually store whatever one looks at for a fraction
of a second, and automatically "smooth out" minor jumps.
Possible violations of 12 fps and workarounds
1. Low-bandwidth may make it impractical to generate an animation on a
server and then transmit it in real-time to a client
a. can pre-load or partially pre-load an animation before starting it
b. can put software on the client side that can read the animation
parameters and perform the animation
i. some animation packages will require you to pay for the development
software but will provide freely downloadable "play" software.
The client runs the "play" software, which reads the animation
parameters from the file prepared by the development software
and performs the actual animation.
2. It may require too much computation to provide animation at 12fps
a. Use keyframes: Perform a full computation on a few key frames and
then interpolate between the key frames using simplifying
assumptions, such as linear interpolation or derivatives
Use animation judiciously: Used improperly, animation can force attention
sapping cognitive changes of context in the user or force the user's
attention to wander around the screen without stabilizing (use the example
of what happens on the savannah and being hunted).
Powerpoint makes it possible
to fill your presentation with all sorts of "gee whiz" effects.
You should resist the temptation to use these effects unless
they actually enhance your presentation.
a. Example: Having bullets "fly in" is an example of a bad use
of special effects. Other than distracting your listener
and breaking his or her concentration, what purpose does it
serve?
b. Example: Fading in points right before you make them is
an example of a bad use of special effects. You can better
justify the fading in of bullets because it is less
obtrusive then flying them in and because it prevents the
listener from reading
the bullets before you're ready to present them. However, if
you've limited the number of bullets and kept them short
and snappy the listener can quickly assimilate the slide and
should already be listening to you. Fading in the points will
distract the listener and break his or her concentration.
c. Example: Fading in information to show what happens as an
algorithm manipulates a data structure is a good use of
special effects. For example, coloring the nodes of a graph
as they are reached in depth first search is an excellent
way to show how depth first search spreads through a graph.
In this case, the ability to present new information while
maintaining the same underlying picture maintains the
listener's concentration while moving to another slide will
break the listener's concentration and make it harder for
the listener to see what has changed.
Animation in Java: Animation in Java revolves about the use of a Swing Timer.
1) What it is: A Swing timer fires one or more action events after a specified
delay
a) all swing timers run in the same timer thread and all action events
execute on the event-dispatch thread, so it is preferable to the
java.util timer, which does neither. Here is what the Java documentation
has to say about why you should be careful to execute your Swing-related
tasks on the event-dispatch thread:
This is necessary because most Swing object methods are not "thread
safe": invoking them from multiple threads risks thread interference
or memory consistency errors. Some Swing component methods are
labelled "thread safe" in the API specification; these can be safely
invoked from any thread. All other Swing component methods must be
invoked from the event dispatch thread. Programs that ignore this
rule may function correctly most of the time, but are subject to
unpredictable errors that are difficult to reproduce.
2) Methods of use
a) perform a task once, after a delay: e.g., to show and then hide a
tool tip
b) perform a task repeatedly: e.g., animating a sequence of glyphs
3) Essential properties
a) action listener that performs a task when the timer goes off
b) the timer that specifies the delay, in ms
c) setRepeats(false/true): indicates that timer should go off only once
d) use start/stop methods to start and suspend the timer
e) constructor takes a delay that sets both the initial and inter-event
delay and an action listener
i) can modify either initial or inter-event delay using
setInitialDelay or setDelay
ii) can add additional action listeners using addActionListener
4) SwingWorker: If you cannot quickly complete your task, then you should
use a SwingWorker object to complete your task so that you don't freeze
the interface (not discussed further--see the documentation for details)