An Introduction to the Trident Animation Library

When it comes to creating impressive, animation-rich user interfaces on the desktop, Java developers aren't quite spoilt for choice. Sure, we have JavaFX, which gives use nice interfaces to work across a series of devices. But for those of us who are using existing Swing or SWT based interfaces without the time to port over, we're beginning feel left behind. That was until I came across the Trident  project, developed by Kirill Grouchnikov, earlier this year. 

Today I'll provide a brief introduction to Trident and it's timeline concept.

What Is Trident?

According to Kirill:

"Trident aims to simplify the development of rich animation effects in Java based UI applications, addressing both simple and complex scenarios"

Trident provides an API to add in timelines and keyframes for animating the user interface. As well as being pluggable into any UI framework, full implementations for SWT and Swing are provided.

Getting Started With Trident

First off you'll want to download the latest version of the library from the Kenai site. For this example I took version 1.1. All that you'll need to get Trident integrated into your application is trident.jar. I'm working with Eclipse as my development environment - you'll need to add the Trident library to the build path of your application.

For this example I'm going to focus on SWT, even though you can also use Trident with Swing. Because I've created a standalone Java application, you'll need to include the SWT jar to your build path. To get the SWT jar, just go to the plugins directory of your Eclipse installation, and take a copy of the org.eclipse.swt.win32.win32.x86_<version>.jar.




You can also download all the source code including code for the sample applications as part of the Trident-all.zip file.

Trident Timelines

As you'd expect from an animation library, Trident is based around timelines. A great example of this is ShapesFrame located in the test.swt package (or test.swing if that's your preference). When it runs, the gradient background of the shell continuously changes from ranges of blue to green.

As we're running a timeline over the user interface, you'll want to create an instance of an org.eclipse.swt.widgets.Canvas.

public static class ShapesPanel extends Canvas {

   
Now, you'll need to specify a variable that gets modified during the course of the animation. In this case we have two variables, the top and bottom color.

private Color topColor;
private Color bottomColor;

Now that we have these parts set up we can create our timeline:

 // animate the gradient endpoint colors in an infinite timeline
    Timeline colorTimeline = new SWTRepaintTimeline(this);
    colorTimeline.addPropertyToInterpolate("topColor", COLOR_BLUE,
                    COLOR_GREEN);
    colorTimeline.addPropertyToInterpolate("bottomColor", COLOR_GREEN,
                    COLOR_BLUE);

The timeline that's created here is a specific SWT timeline which will force the repaint. When any timeline is created, it takes an object that it is related to. In this case, we're just passing through the SWT canvas.

We've already defined two variables that we will modify - topColor and bottomColor. Once you provide public setters for these variables, you can add them as properties to interpolate on your timeline. This is provided in Trident's Timeline class so that it takes a propertyName, and then two other parameters (from and to)
    

    public final <T> void addPropertyToInterpolate(String propName, T from, T to) 

Every time that the timeline pulses, or wakes up, it will change the values of the properties that you have registered. At the same time that it changes these values, all listeners will be notified. Behind the scenes, as we're using an SWTRepaintTimeline, the canvas that we passed through to the constructor is automatically passed through to an SWTRepaintCallback.
The onTimelinePulse method will get called for each pulse, which in turn will call a repaint.
As we're gradually changing the value of the properties, during the timeline we'll see different colours for the top and bottom at each pulse.
    
So to play through our timeline, we can simply use the following code
    

            colorTimeline.setDuration(1000);
            colorTimeline.playLoop(RepeatBehavior.REVERSE);

If the duration of the timeline is shortened, everything will happen faster. So to make the gradient appear in a more subtle fashion, just increase the duration to about 3 seconds.

Putting it all together, you can see that Trident provides a clean, straightforward API. In this example we've just seen the core concepts for Timelines:

• Creating a new Timeline associated with an SWT Control
• Adding fields to interpolate 
• Setting the duration of the timeline and kicking it off.

Next time around we'll look at some other features of Trident and see how to improve simple desktop applications using the API.