Short animations can enhance the usability of an application by providing visual cues to its behavior. Modern user interfaces are required to manage large amounts of information in a relatively small screen area. To do this, they often organize features by collapsing or hiding elements onto the edges of the screen. By adding a time dimension, an animation can be used to shift visual controls as they appear or disappear, which helps users recall their location for later access.
A recent Java Swing project provided me with an opportunity to apply this idea. Our application organized user results into a series of tabs displayed horizontally across the top of the window. As the number of tabs grew, we collapsed the extra tabs into a “More” button that displayed a drop-down list of tabs to choose from. Screen animations were added as visual cues to indicate the accessibility of the tabs—new tabs were shifted in from the left, while existing tabs were moved out to the right.
I created a demo application to illustrate how this is done. A screenshot is shown below.
To implement the screen animation, I made use of a pair of Swing animation libraries published by Chet Haase and Romain Guy with their excellent book, Filthy Rich Clients. The TimingFramework library provides an API useful for controlling an animation. The AnimatedTransitions library provides classes useful for animating layout changes in Swing containers. Both libraries can be found at Java.net, or on the book website.
The two libraries make it easy to set up screen animations where UI components are added, deleted, or moved within a container. The general idea is to define the end state of the UI layout, along with a set of special effects, and let the libraries do the hard work of redrawing the transition from the beginning state to the end state on the screen.
The demo application code contains just three basic components. The tab container is implemented by an AnimatedTabList object, which defines the component layout. Each tab is represented by a Tab object, which displays a text label and a close button. And finally, the screen effects are defined in the EffectsUtilities class.
AnimatedTabList is the UI container for the tabs. In addition to displaying the tabs, the class controls the animation by implementing the TransitionTarget interface and creating the objects needed to run the screen transition. We use a screen transition that runs in 0.25 seconds.
// Create animator and screen transition for this container. animator = new Animator(250); transition = new ScreenTransition(this, this, animator);
The methods in AnimatedTabList are organized to provide an API to add and remove tabs, define the horizontal layout for its UI components, and run the animation.
- addTab(String) and removeTab(Tab) are called to add and remove tabs. These methods update an internal list of Tab objects that may be displayed by the container. The actual layout is deferred until the animation is started.
- layoutTabs() sets up the layout of the tabs. This method performs calculations to determine which tabs should appear; if there are any hidden tabs, then the “More” button is displayed. The method also sets the screen effects that take place for tabs that are added or removed.
- setupNextScreen() is called by the ScreenTransition object when the animation is started. This method simply calls layoutTabs() to set up the end state of the container.
The animated screen transition is triggered whenever a tab is added or removed. When the animation begins, the ScreenTransition object determines the end state of the container, and automatically applies the screen effects as it redraws the container.
We can define a variety of screen effects to apply when UI components are added or removed from the container. The EffectsUtilities class includes static utility methods to create some simple effects. Each screen effect extends the Effect base class. Four effects are defined.
- MoveIn shifts a component from a specified start point to its end location.
- MoveOut shifts a component from its start location to a specified end point.
- Grow causes a component to grow into its current size.
- Shrink causes a component to shrink from its current size.
In the demo application, these effects are combined into composite effects and applied to the tabs as they are added or removed.
Screen animations can provide helpful hints to the user as visual elements move around the screen. They can also make an application feel lively and fun, which has value in any product. The TimingFramework and AnimatedTransition libraries make it very easy to animate a Java Swing application.
The Animation Demo source code is available at http://github.com/ernieyu/Swing-animation-demo.
The Timing Framework library is available at http://timingframework.dev.java.net/.
The Animated Transitions library is available at http://animatedtransitions.dev.java.net/.