Open source Java projects: AnimatingCardLayout

Animated transitions for your Java GUIs

Animated transitions are key to creating a comfortable, seamless user experience in your Java desktop and Web applications. In this installment of Open source Java projects, Jeff Friesen introduces the AnimatingCardLayout API and its six built-in transition effects: cube, dashboard, fade, iris, radial, and slide. You'll see these effects in action in a slideshow application, and also follow along as Jeff builds a custom zoom effect to enhance the slideshow.

Animated transitions are part of modern user interfaces. If you've ever used the Mac OS X dashboard to launch an application, you are probably familiar with its spin-around transition effect. Or you may have played with the various effects you can create for slideshows on a site like slide.com. Sony.com and Ford.com present examples of Flash-based animated transitions. Several libraries also exist to enable animated transitions in Java development.

Chet Haase and Romaine Guy popularized animated transitions for Java developers via their book Filthy Rich Clients. In tandem with the book, the authors created a library that you can use to explore animated transitions in Java application development.

Less known to many Java developers is the open source Java project AnimatingCardLayout, created by Dmitry Markman, Luca Lutterotti, and Sam Berlin. This open source extension to Java's standard CardLayout manager uses animated transitions to replace a card's components with another card's components.

This installment of Open source Java projects introduces AnimatingCardLayout. I'll start by introducing the distribution archive for the AnimatingCardLayout project. Next, I'll show you how to run the archive's example so that you can see for yourself the manager's six transition effects. I'll then guide you through an exploration of AnimatingCardLayout's API and show you how to use the API in a more realistic example. Finally, we'll create a custom transition effect class (ZoomAnimation) that you can use in your Java GUIs.

The BSD license
Each of the open source Java projects covered in this series is subject to a license, which you should understand before integrating the project with your own projects. AnimatingCardLayout is subject to the Berkeley Software Distribution (BSD) license.

AnimatingCardLayout's distribution archive

The animatingcardlayout project, hosted on Java.net, introduces AnimatingCardLayout and provides access to its executable and source code. To obtain this code, point your browser to the site's "Documents & files" section and download the most recent version of AnimatingCardLayout's distribution archive. For example, I downloaded animatingcardlayout_12_24_04.zip.

After downloading and unzipping the archive, I discovered an animatingcardlayout_12_24_04 home directory containing dist, __MACOSX, org, and www subdirectories. Of these four subdirectories, only dist and org are meaningful. The most important portion of their directory structure appears below:

dist
   AnimatingCardLayout.html
   AnimatingCardLayout.jar
org
   javadev
      AnimatingCardLayout.java
      effects
         Animation.java
         AnimationListener.java
         CubeAnimation.java
         DashboardAnimation.java
         FadeAnimation.java
         IrisAnimation.java
         RadialAnimation.java
         SlideAnimation.java
      test
         AnimatingCardLayoutTest.java

The dist directory's HTML file is used to run the layout manager example in an applet context. Both the example's and the layout manager's classfiles are stored in the JAR file. The org directory serves as the parent directory in a package hierarchy of source files. These source files describe AnimatingCardLayout, its six transition effect classes, and the AnimatingCardLayoutTest example.

Test AnimatingCardLayout

AnimatingCardLayoutTest lets you test AnimatingCardLayout in applet and application contexts. To test this layout manager in an applet context, point your browser to AnimatingCardLayout.html. After loading the AnimatingCardLayoutTest class files from AnimatingCardLayout.jar, the browser renders six applet instances demonstrating six transition effects. The screenshot in Figure 1 reveals this page (click to enlarge).

A screenshot showing six applet instances demonstrating six transition effects.
Figure 1. Click the Rotate button or the square between the scroll bars to explore each of the cube, dashboard, fade (which is in progress), iris, radial, and slide transition effects.

At the command line, invoke java -jar AnimatingCardLayout.jar to test this layout manager in an application context. In contrast to the applet context, in which AnimatingCardLayoutTest interrogates an applet parameter to determine which transition effect to use, only the cube transition effect (shown in Figure 2) is demonstrated in the application context.

A screenshot of the cube transition effect.
Figure 2. Cube is one of two three-dimensional transition effects. The other effect is dashboard.

Explore the AnimatingCardLayout API

AnimatingCardLayout presents a simple API consisting of org.javadev.AnimatingCardLayout. Because this class extends java.awt.CardLayout, it inherits and overrides various CardLayout methods such as public void show(Container parent, String name) (which replaces a card with another card via a transition effect). Its API also includes the following constructors and methods:

  • public AnimatingCardLayout() creates an AnimatingCardLayout instance without an associated transition effect. An effect can be added later by invoking setAnimation().
  • public AnimatingCardLayout(Animation anim) creates an AnimatingCardLayout instance with the transition effect identified by anim.
  • public Animation getAnimation() returns a reference to the transition effect, or null if no effect is associated with this AnimatingCardLayout instance.
  • public void setAnimation(Animation anim) associates the transition effect identified by anim with this AnimatingCardLayout instance.
  • public void setAnimationDuration(int animationDuration) sets the duration (in milliseconds) of the transition effect's animation. If the argument is less than 500, the duration is set to 500. The duration defaults to 2000 milliseconds.

This API works with six transition effect classes located in the org.javadev.effects package: CubeAnimation, DashboardAnimation, FadeAnimation, IrisAnimation, RadialAnimation, and SlideAnimation. Each of these classes implements the org.javadev.effects.Animation interface.

1 2 3 Page 1
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.