Keyframe Animation
In traditional keyframe animation, one animator draws the most
important frames of an animation (the keyframes), and another
artist fills in the rest of the frames (the in-betweens). In
keyframe animation software systems, the in-betweens are generated
automatically from the keyframes. The simplest way to generate an
in-between is to linearly interpolate between the two
surrounding keyframes.
As an example, let's animate a bouncing ball. Since we don't want to deal with deformation yet, make it a bouncing bowling ball. The animator has specified that at time t0=0, the ball is in the air at position p0 = (0, 10), and that one time step later, at time t1=1, the ball is on the ground at position p1 = (5, 0). We need to figure out where the ball is between times t0 and t1. Let's say that our time increment is 0.1; this means that we want to generate 10 frames for every time step. Intuitively, at time t=0.1, the ball is 1/10th of the way along a path from p0 to p1. Interpolation is the process of finding that position, and linear interpolation means that the path is a straight line. So, using linear interpolation, the position at time t=0.1 is p = (0.5, 9).
System Overview
Our keyframe animation system has two
modes: draw mode and animate mode. In draw
mode, the user interacts with a simple drawing program to create and
edit shapes. By moving, resizing, and reshaping these simple shapes,
the user can create snapshots of a picture changing over time. These
snapshots are the keyframes of the animation. To set a keyframe from
a particular set of shapes, the user simply sets the current
time
field to indicate when the animation should look exactly
like that picture and hits the Set Keyframe
button. The start
time, end time, and time increment of the animation can be changed by
editing the appropriate fields.
To play the animation, the user hits the Play
Animation
button, and the system switches into animate mode.
The in-between frames are generated by linearly interpolating the
positions and sizes of the shapes, and the animation is played. The
animation loops until the user stops it by clicking in the window, hitting
the Stop Animation
button, or choosing a drawing tool.
The user can edit the animation by setting new keyframes or editing
existing keyframes. To go to a particular time in the animation, the
user sets the current
time
field and hits the Edit Keyframe
button.
System Design
key: | ![]() |
---|---|
canvas classes: |
![]() |
draw classes: | ![]() |
keyframe classes: |
![]() |
more keyframe classes: |
![]() |
Requirements
Your job is to fill in some of the blanks in the implementation of
the keyframe animation system. For full credit, you must do
the following:
1. implement drawing, translating and reshaping of polygons,
polylines, and ellipses hint: write InteractiveEllipse and InteractivePolyline classes, modeled after draw.InteractiveRect |
|
2. allow user to change selected shape from filled to unfilled |
|
3. make interpolation work hint: write keyframe.LinearInterpolator::getValue, keyframe.InterpPolygon::shapeAtTime, and keyframe.InterpPolygon::setPoly |
|
4. make the animation go hint: write keyframe.AnimateCanvas::run |
Extra Credit
This project has many possibilities for extra credit. Among these are the following:
Drawing | 1. allow user to change line width for unfilled shapes * 2. allow user to change background color * 3. allow user to delete shapes * 4. allow uniform scaling of drawn shapes ** 5. allow multiple selection ** 6. allow user to group and ungroup shapes ** 7. allow user to change shape order ** |
|
---|---|---|
Animating | 1. allow user to delete a keyframe * 2. allow keyframing only for selected shapes ** 3. implement pause and rewind * 4. implement a different kind of interpolation (i.e. not linear) * 5. implement color interpolation * 6. implement rotation interpolation *** |
|
Other | allow user to save and load animations *** |
* = not too hard ** = kind of hard *** = hard |
Demo Applet
A demo applet is online at http://www.cs.washington.edu/homes/jpower/java/keyframe.html.
Java Code
The code will be available on the NT boxes by the end of today. Watch
your email.
Handin Instructions
Watch your email.