Introduction
Sudden and unexpected changes in a user interface (e.g. objects moving from one position to another without any transition between the two states) put a heavy cognitive load on the user, who must mentally relate the states in order to re-assimilate the new display [1]. Animating changes applied to user interface objects transfers part of the user effort to the perceptual level, freeing cognitive processing capacity for application tasks [2]. Aside from the aesthetically pleasant impression it produces on most users when used appropriately, animation therefore contributes to make interfaces more user-friendly.
ZVTM offers animation capabilities inspired by Stasko's path/transition paradigm [3]. Many user interface changes can be animated following a unified declarative API. Variables to which animations can be applied include all basic glyph variables (position, orientation, size, color and translucency) as well as some shape specific ones (bezier curve control points). Camera translations and altitude changes (zoom-in/out) can also be animated, as well as distortion lens' radii and magnification factor modifications. Animations are specified with a single instruction and do not require more implementation work than basic variable value modifications. They require the following parameters: the animation duration, the object involved, the variable(s) impacted by the animation, the desired target value interpreted as an offset from the start value, and the pacing function. Three pacing functions are available. Slow-in/slow-out transitions are typically used for camera motion and some glyph animations such as translations, as they convey a feeling of solidity that is important in direct manipulation interfaces [1]. Non-uniform pacing functions are generally used to put emphasis on the start (and end) of animation paths. However, they are not always appropriate, and the uniform function is often used when modifying distortion lens parameters or animating color changes.
Animations are managed by a dedicated thread that controls their timing precisely, skipping steps on the computed animation path if necessary. This mechanism ensures that an animation lasts the specified duration, and runs as smoothly as the system and hardware performance allow.
Demonstration
Select a visual variable to animate, a pacing function, and click on the object to which the animation should be applied.
The source code of this demo applet is available.
Calling an animation on a glyph is always done with the same method, no matter the animation type, and no matter the glyph's type.
Orientation
The following example rotates a triangle by 90 degrees couter-clockwise in 500 milliseconds, with a slow-in/slow-out pacing function.
Size
The following example makes an image twice as big in 1 second, with a slow-in/fast-out pacing function.
Position
The following example translates a shape by 1000 horizontally and 500 vertically (in virtual space units) in 5.2 seconds, with a slow-in/slow-out pacing function.
Color
The following example changes the saturation and brightness of a polygon's fill color. Color animation trajectories are specified in the HSV/HSB color model (Hue, Saturation, Brightness).
Translucence
Translucence is closely related to color, and is thus specified as an optional parameter in color animations. It is of course possible to just animate the translucence without changing the fill and border colors, as in the following example. Translucence animations can only be applied to glyphs that implement the Translucent interface. Otherwise the animation manager will throw an error.
Post-animation actions
Programmers might want to execute instructions once an animation on a glyph has ended. ZVTM makes this easy through the PostAnimationAction interface. Create an object that implements this interface, put the instructions to be executed at the end of an animation in method animationEnded, and pass this object as the last parameter to method createGlyphAnimation.
Alternatively, you can define an inner class using PostAnimationAdapter, as you would use java.awt.event.WindowAdapter for quickly implementing java.awt.event.WindowListener in an inner class.
References
[1] B.W. Chang and D. Ungar, Animation: from cartoons to the user interface, UIST '93: Proceedings of the 6th annual ACM symposium on User interface software and technology, pages 45-55, 1993.
[2] George G. Robertson and Stuart K.Card and Jack D.Mackinlay, Information visualization using 3D interactive animation, Communication of the ACM 36(4), pages 56-71, 1993.
[3] J.T. Stasko, The path transition paradigm: A practical methodology for adding animation to program interfaces, Journal of Visual Languages and Computing 1(3), pages 213-236, 1990.
