Building a Basic Tabbed Pane

To keep things tidy, I have implemented this hack as a subclass of JTabbedPane, except for the actual animation drawing, which will be delegated to a further subclass. By putting all of the heavy lifting into the parent class, you will be able to create new animations easily.

is the basic skeleton of the parent class.

TIP

You could have split the thread into a separate class, but I think that keeping all of the code together makes the system more encapsulated and easier to maintain.

TransitionTabbedPane adds one new property, the animation length. This defines the number of steps used for the transition, and it can be set by the subclass or external code.

Scheduling the Animation

Since the pane was added as a ChangeListener to itself, the stateChanged( ) method will be called whenever the user switches tabs. This is the best place to start the animation thread. Once started, the thread will capture the previous tab into a buffer, loop through the animation, and control the repaint speed:

	// threading code
	public void stateChanged(ChangeEvent evt) {
		new Thread(this).start();
	}

	protected int step;
	protected BufferedImage buf = null;
	protected int previous_tab = -1;

	public void run() {
		step = 0;

	// save the previous tab
	if(previous_tab != -1) {
		Component comp = this.getComponentAt(previous_tab);
		buf = new BufferedImage(comp.getWidth(),

			comp.getHeight(),
			BufferedImage.TYPE_4BYTE_ABGR);
		comp.paint(buf.getGraphics());
	}

Notice that the run( ) method grabs the previous tab component only when the previous_tab index isn't -1. The component will always have a valid value, except for the first time the pane is shown on screen, but that's OK because the user won't have really switched from anything anyway. If there is a previous tab, then the code grabs the component and paints it into a buffer image.

WARNING

It's important to note that this is not thread-safe because the code is being executed on a custom thread, not the Swing thread. However, since the tab is about to be hidden anyway—and, in fact, the next real paint() call will only draw the new tab—you shouldn't have any problems. Any changes introduced by this extra paint() call won't show up on screen.

With the previous component safely saved away, you can now loop through the animation:

	for(int i=0; i<animation_length; i++) {
	step = i;
	repaint();
	try {

		Thread.currentThread().sleep(100);
	} catch (Exception ex) {
		p("ex: " + ex);
	}
}

	step = -1;
	previous_tab = this.getSelectedIndex();
	repaint();

This code shows a basic animation loop from 1 to N, with a 100-millisecond duration for each frame.

TIP

A more sophisticated version of the code could have dynamic frame rates to adjust for system speed.

Once the transition finishes, the animation step is set back to -1, the previous tab is stored, and the screen is repainted one last time, without the transition effects.

Drawing the Animation

The TransitionTabbedPane is now set up with the proper resources and repaints, but it still isn't drawing the animation. Because the animation is going to partially or completely obscure the tabs underneath, the best place to draw is right after the children are painted:

	public void paintChildren(Graphics g) {
		super.paintChildren(g);

		if(step != -1) {
			Rectangle size = this.getComponentAt(0).getBounds();
			Graphics2D g2 = (Graphics2D)g;
			paintTransition(g2, step, size, buf);
		}
	}

	public void paintTransition(Graphics2D g2, int step,
		Rectangle size, Image prev) {
	}

This code puts all of the custom drawing into the paintTransition( ) method, currently empty. It will only be called if step isn't -1, meaning during a transition animation. The paintTransition( ) method provides the drawing canvas, the current animation step, the size and position of the content area (excluding the tabs themselves), and the image buffer that stores the previous tab's content. By putting all of this in a single method, subclasses can build their own animations very easily. is a simple transition with a white rectangle that grows out of the center, filling the screen, then shrinking again to reveal the new tab content.

Putting It All Together

Because TransitionTabbedPane is just a JTabbedPane subclass, it can be used wherever the original would be. creates a frame with two tabs, each containing a button. The running program looks like . As you switch between the tabs, you will see an animation like that shown in .

Another Example

Because TransitionTabbedPane makes it so easy to build new animations, I thought I'd add another one. This is the old venetian blinds effect, where vertical bars cover the old screen and uncover the new one; puts it together.