Animation GUI

Animation Spreadsheet

Figure 1: Sketch of an Animation Spreadsheet, showing 5 time columns and 14 keyframes.

We want to provide a simple animation interface that makes simple stuff simple, and allows people to do reasonably complex animations as well. This proposal is simple on purpose - we're trying to create a simple, understandable UI that users can understand and manipulate without a great deal of training.

The Animation Spreadsheet is a spreadsheet that captures the keyframes in an animation in a compact way. Rows show properties that are animated. Time Columns are defined by one or more keyframes. The icon in each cell gives information about what is happening in each column. Figure 1 shows an Animation Spreadsheet display of an animation with keyframes at 5 different times. This is a complex example, and we'll address it later in this document. We'll start with a simple spreadsheet - one that demonstrates the most likely uses - to demonstrate the design.

Spreadsheet Properties

The spreadsheet has the following properties:

• There are at least two Time Columns. The first is labelled start, and the last is labeled end. Columns that fall between these are labeled T1, T2, etc. from left to right.
• Each row shows the animation properties for exactly one property.
• Rows alternate colors (grey and white to start, but this should be a user preference.)
• Each cell is either blank, or contains one of three icons:

Icon	Icon Name	Description
	Green Key	Keyframe at the start or middle of a series of connected keyframes.
	Red Key	Keyframe at the end of a series of connected keyframes.
	Green Arrow	Denotes that interpolation of some kind is occuring. Note that strictly speaking, this icon isn't necessary - you can derive it by looking at the keyframes it comes between. (See discussion below.)

Simple Examples

This simple example shows a spreadsheet of an animation of the Temperature property of some actor.Thie property has two keyframes - one at start and one at end. Note: by default, the Timestep property is animated from first to last over this animation, which is the default behavior for ParaView 2.x.

Simple Example

Property	start	end
Timesteps
Temperature

This example adds another property, with a keyframe at a time between start and end. Note the changes that happen in the existing rows, as arrows are inserted.

Simple Example

Property	start	T1	end
Timesteps
Temperature
Opacity

Finally, we add additional keyframes to the Timesteps and Temperature properties, so that in this animation, opacity animates first, then time and temperature animate after that. This lets us fade the dataset in to establish the 'scene', then we animate time and temperature. A little complicated, but you get the idea about how the spreadsheet would change. Below this spreadsheet, there is another one that shows the values that we'd be animating over.

Simple Example

Property	start	T1	end
Timesteps
Temperature
Opacity

Spreadsheet showing the values we'd be animating over, for the above example.

Simple Example

Property	start	T1	end
Timesteps	0	0	10
Temperature	200	200	5000
Opacity	0.0	1.0

Keyframes

A property is either animating between two keyframes, or it is holding on a value. This is the reason for the Green and Red keyframe icons - a keyframe can only be one of two types: a keep-animating-after-me keyframe (green), or a hold-after-me keyframe (red). Thus, any one property's animation can be defined by colored keyframes.

Examples

	A	B	C	D	E
Keyframe
Meaning	Start animating	Keep animating	Stop animating, hold	Start animating	Stop animating, hold

You can 'derive' the appearance of the Green Arrow icon as follows:

    // for a cell between two keyframes
    If ( keyframe_to_the_left == a_red_keyframe )
        {
            no green arrow, because we're holding
        }
    else
        {
            put in a green arrow, because we must be animating between keyframes
        }

Complex Example

Figure 1 shows five animated properties: A, B, C, D, E.

• A animates between two keyframes: A and E.
• B animates between two keyframes: A, C, then holds, then animates between two connected keyframes: D, and E.
• C animates between two keyframes: A, and C, and then holds for the remainder of the animation.
• D does nothing until keyframe B, then it animates through three keyframes: B, C, and D, and then holds for the remainder of the animation.
• E animates through three keyframes: A, B, and C.

Links

• Macromedia Flash timeline