Animation GUI

We want to provide a simple animation interface that makes simple stuff simple, and allows people to do reasonable complex animations as well. Ideally, the interface will support all of the current animation possibilities. It should also give a clear representation of how the simulation is established and progresses.

The original design was a spreadsheet showing a tableau of keyframes. Although simple and easy to understand, the design has many problems. Although the simplest of interactions, changing the values at various keyframes, is easy, any thing else becomes quickly complicated. How does one set the interpolation between values? How does one easily add, subtract, and move around keyframes? What about interpolations that span over keyframes of other properties? The spreadsheet also does not give a clear indication of the length of animation time each interpolation gets (they are all the same width). And where is the current animation step with respect to the keyframe values?

In this iteration of the design, we have taken the best elements of the spreadsheet design and mixed them with the timeline view present in professional animation products like Camtasia. The layout is basically the same as the original spreadsheet, except horizontal alignment is not enforced.

This timeline viewer will have most of the controls in the current Animation Inspector. In fact, it would be great if this design could completely replace the animation inspector.

Animation Spreadsheet (Old design)

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.

The Animation Spreadsheet is tied to a Keyframe Inspector, much like the one that ParaView currently has. Clicking on a cell in the spreadsheet brings up the appropriate inspector, to allow editing. In addition, the contents of the cell can be directly edited in the cell, no matter what type of data it is. Appropriate UI constraints keep the user from doing anything stupid.

Simpler Design

Well, after sleeping on it, here's a simpler design that I think works much better. In this design, it's just a table, and you directly input the values in the table. The top Property is Animation Time, which shows the 'real time' when the Time Column takes place.

In this example, we have a 1:00 animation in which the Opacity is animated for the first 0:10. Timesteps hold from 0:00 to 0:10, and then Timesteps animate so we can watch the data develop over time. There is also a 'Label' that changes at 0:10 (but this is just made up, to make the point that things other than floats can be in the table entries).

Note: The design of the first cell - the one that has the Property name, is still developing. I'm thinking that there will be something indicating the name of the thing that owns the property being animated, then the name of the property. If there are more than one properties animated on a thing, then all those properties will be grouped together. Depending upon who owns the 'Opacity' property (it's really the actor, right?) this example may not be entirely correct.

Simple Example

Property		start	t1	end
Animation Time		0:00	0:10	1:00
MyDataSet	Timesteps	0	0	20
-	Opacity	0.0	1.0	-
MyFilter	Label	Warmup	Begin	-

This table shows the default animation that is set up once the user loads a data set - a 30 sec. animation (at video framerate) that animates the Timesteps.

Default Animation

Property		start	end
Animation Time		0:00	0:30
MyExodusDataSet	Timesteps	0	20

Interactions

• Note: all operations performed on the spreadsheet are integrated into the undo/redo stack.
• Animation Time is a special row, which is always present, and which cannot be deleted or moved. It is always at the top of the spreadsheet.
• The Properties column is always at the left, and cannot be moved.
• The Columns cannot be reordered by clicking on the column title.
• The columns default to a reasonable, uniform size, but like a spreadsheet, individual columns can be resized so their values display properly.
• Right Mouse Click on an item in the Pipeline Browser brings up a menu, and there is an 'Add keyframe' item. This bings up a dialogue box that lets the user enter an 'animation time' for the new timestep. Because by default there is always an animation defined (by default it is 30 seconds long, and the data sets animate from 0 to the last), this operation should always work. It doesn't matter if the spreadsheet is showing or not - the right thing will happen in the Animation Spreadsheet. If there is no row for this property, one is added. If there is already a Time Column for the requested time, a keyframe for that property is added. Otherwise, a new Time Column is created with a keyframe in it for this property.
• RMC on the header of a Time Column gives a menu with 'Delete this column', 'Create new column Before', 'Create new column After'.
• Dragging a Time Column moves that column, and automatically changes the Animation Time row for that column to be 1/2 between the columns it ends up between.
• start column cannot be moved.
• end column cannot be moved.
• Entering a value for the Animation Time row in a column moves that column to the appripriate spot. If there is already a column for that time, the user is informed of that, and the operation does not take place.
  • Entering a value for the end Animation Time is a special case, because it may invalidate other times. The user should be informed of this, and be presented with logical options - 'Delete all invalid timesteps', etc. Since these operations can all be undone, there is little risk.
• There must be a value in the start Time Column

Details

• Must make it easy to establish frame rate.

Ignore Everything Below This Line. Really.

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

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.)

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
        }

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

Complex Example

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

Figure 2 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