Easily adding animations to interfaces using constraints

TL;DR: The goal is to make simple animationremely easy to add to an interface, and still supportcomplex animations by providing better modularity for the software for user interfaces, and achieves increased reuse and decreased code size, and makes it easier for research-ers and developers to create applications.

Abstract: Adding animation to interfaces is a very difficult task withtoday’s toolkits, even though there are many situations inwhich it would be useful and effective. The Amulet toolkitcontains a new form of animation constraint that allowsanimations to be added to interfaces extremely easily with-out changing the logic of the application or the graphicalobjects themselves. An animation constraint detectschanges to the value of the slot to which it is attached, andcauses the slot to instead take on a series of values interpo-lated between the original and new values. The advantageover previous approaches is that animation constraintsprovide significantly better modularity and reuse. Theprogrammer has independent control over the graphics tobe animated, the start and end values of the animation, thepath through value space, and the timing of the animation.Animations can be attached to any object, even existingwidgets from the toolkit, and any type of value can beanimated: scalars, coordinates, fonts, colors, line widths,point lists (for polygons), booleans (for visibility), etc. Alibrary of useful animation constraints is provided in thetoolkit, including support for exaggerated, cartoon-styleeffects such as slow-in-slow-out, anticipation, and follow-through. Because animations can be added to an existingapplication with only a single extra line of code, we expectthat this new mechanism will make it easy for researchersand developers to investigate the use of animations in awide variety of applications.Keywords: Animation, Constraints, Toolkits, User Inter-face Development Environments, Amulet.To appear in UIST’96: ACM Symposium onUser Interface Software and Technology, Nov.6-8, 1996. Seattle, WAINTRODUCTIONBy providing better modularity for the software for userinterfaces, the Amulet toolkit [8] achieves increased reuseand decreased code size, and makes it easier for research-ers and developers to create applications. For example, inAmulet, the interactive behavior of objects can be definedentirely independently from their graphical look by attach-ing “Interactor” objects to the graphics. Command obje cts[9] encapsulate the complete information about operations,and can be hierarchically linked so each application layercan be separately defined. We have followed this philoso-phy in our new support for animations and other time-based behaviors. The goal is to make simple animationsextremely easy to add to an interface, and still supportcomplex animations. This is achieved by allowing theanimations to be defined independently from the actionsthat start the animation and the graphics that are ani-mated. Furthermore, the animation itself is modularized:the start and end values of the animation, the path throughthe value space, and the timing of the animation can all beindependently specified.We are able to provide this new level of modularity by us-ing the flexible Amulet constraint system. If an animationconstraint is attached to a slot (instance variable) of anobject, then changes to that slot trigger the animation,causing the slot’s value to change smoothly from its old toits new value. For example, if a slot contains 10 and is setto be 100, an animation constraint might immediatelyoverride the value and set the slot with 11, and then set theslot with a series of values up to 100 over a period of twoseconds. Since there are a wide variety of parameterizedanimation constraints provided in the library, an anima-tion can be added to an existing interface with a single lineof code. All the messy details of timing, redrawing, set-upand clean-up of animations, and interactions with otherparts of the system, are automatically handled by the ani-mation constraint mechanism.We are particularly interested in the use of animations toenhance interaction in regular user interfaces. Althoughanimations are widely used in games and specializedvisualization software ([10] has a survey), their use in con-ventional interfaces is limited to a few predefined cases,