DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
11 Monitoring and Observability Tools for 2023
Learn more

An Introduction to the Trident Animation Library

James Sugrue user avatar by
James Sugrue
CORE ·
Dec. 15, 09 · Interview
Like (0)
Save
Tweet
Share
15.58K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Timeline Library application Standard Widget Toolkit

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Fixing Bottlenecks in Your Microservices App Flows
  • How To Create a Failover Client Using the Hazelcast Viridian Serverless
  • 20 Concepts You Should Know About Artificial Intelligence, Big Data, and Data Science
  • 5 Ways to Secure a Virtual Machine in Cloud Computing

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: