Trident part 7 – parallel timelines in Swing and SWT
June 24th, 2009
Over the course of this week i’m talking about different concepts in the Trident animation library for Java applications. Part seven shows a more complex Swing / SWT example that illustrates usage of multiple timelines running in parallel and affecting different visual areas of the same application window.
Multiple timelines in Swing applications
Trident supports running multiple independent timelines at the same time. This page shows the Swing application behind this video, where every cell rollover is implemented as a separate timeline.
We start with a class that implements a specific grid cell:
public static class SnakePanelRectangle {
private Color backgroundColor;
private boolean isRollover;
private Timeline rolloverTimeline;
public SnakePanelRectangle() {
this.backgroundColor = Color.black;
this.isRollover = false;
this.rolloverTimeline = new Timeline(this);
this.rolloverTimeline.addPropertyToInterpolate("backgroundColor",
Color.yellow, Color.black);
this.rolloverTimeline.setDuration(2500);
}
public void setRollover(boolean isRollover) {
if (this.isRollover == isRollover)
return;
this.isRollover = isRollover;
if (this.isRollover) {
this.rolloverTimeline.replay();
}
}
public void setBackgroundColor(Color backgroundColor) {
this.backgroundColor = backgroundColor;
}
public Color getBackgroundColor() {
return backgroundColor;
}
}
A few major points in this class:
- The default background color of a cell is black.
- The rollover timeline interpolates the background color from yellow to black over a period of 2.5 seconds.
- The rollover timeline is replayed when
setRolloveris called withtrue. This restarts the timeline to interpolate the foreground color from yellow.
The next class implements a cell grid, tracing the mouse events and dispatching the rollover events to the relevant cells:
private static class SnakePanel extends JPanel {
private SnakePanelRectangle[][] grid;
private int ROWS = 10;
private int COLUMNS = 20;
private int DIM = 20;
public SnakePanel() {
this.grid = new SnakePanelRectangle[COLUMNS][ROWS];
for (int i = 0; i < COLUMNS; i++) {
for (int j = 0; j < ROWS; j++) {
this.grid[i][j] = new SnakePanelRectangle();
}
}
this.setPreferredSize(new Dimension(COLUMNS * (DIM + 1), ROWS
* (DIM + 1)));
Timeline repaint = new SwingRepaintTimeline(this);
repaint.playLoop(RepeatBehavior.LOOP);
this.addMouseMotionListener(new MouseMotionAdapter() {
int rowOld = -1;
int colOld = -1;
@Override
public void mouseMoved(MouseEvent e) {
int x = e.getX();
int y = e.getY();
int column = x / (DIM + 1);
int row = y / (DIM + 1);
if ((column != colOld) || (row != rowOld)) {
if ((colOld >= 0) && (rowOld >= 0))
grid[colOld][rowOld].setRollover(false);
grid[column][row].setRollover(true);
}
colOld = column;
rowOld = row;
}
});
}
@Override
protected void paintComponent(Graphics g) {
Graphics2D g2d = (Graphics2D) g.create();
g2d.setColor(Color.black);
g2d.fillRect(0, 0, getWidth(), getHeight());
for (int i = 0; i < COLUMNS; i++) {
for (int j = 0; j < ROWS; j++) {
SnakePanelRectangle rect = this.grid[i][j];
Color backgr = rect.getBackgroundColor();
if (!Color.black.equals(backgr)) {
g2d.setColor(backgr);
g2d.fillRect(i * (DIM + 1), j * (DIM + 1), DIM, DIM);
}
}
}
g2d.dispose();
}
}
A few major points in this class:
- A special type of timeline is created and played in a loop. In this example, each cell rollover timeline changes the background color of that cell, but does not cause the repaint. Instead, we have a "master" repaint timeline that runs in a loop and causes the repaint of the entire grid panel.
- The mouse motion listener tracks the mouse location, calling the
setRollovermethod on relevant cells. Since each cell rollover timeline runs for 2.5 seconds, quick mouse moves will result in multiple timelines running in parallel. - The painting of each cell respects the current background color of that cell.
Finally, the main method that creates a host frame and adds the cell grid panel to it:
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
JFrame frame = new JFrame("Snake");
frame.add(new SnakePanel());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.setVisible(true);
}
});
}
Multiple timelines in SWT applications
The matching SWT code is quite similar. The single grid cell:
public static class SnakePanelRectangle {
private Color backgroundColor;
private boolean isRollover;
private Timeline rolloverTimeline;
public SnakePanelRectangle() {
this.backgroundColor = Display.getDefault().getSystemColor(
SWT.COLOR_BLACK);
this.isRollover = false;
this.rolloverTimeline = new Timeline(this);
this.rolloverTimeline.addPropertyToInterpolate("backgroundColor",
Display.getDefault().getSystemColor(SWT.COLOR_YELLOW),
Display.getDefault().getSystemColor(SWT.COLOR_BLACK));
this.rolloverTimeline.setDuration(2500);
}
public void setRollover(boolean isRollover) {
if (this.isRollover == isRollover)
return;
this.isRollover = isRollover;
if (this.isRollover) {
this.rolloverTimeline.replay();
}
}
public void setBackgroundColor(Color backgroundColor) {
this.backgroundColor = backgroundColor;
}
public Color getBackgroundColor() {
return backgroundColor;
}
}
The cell grid:
private static class SnakePanel extends Canvas {
private SnakePanelRectangle[][] grid;
private int ROWS = 10;
private int COLUMNS = 20;
private int DIM = 20;
public SnakePanel(Composite parent) {
super(parent, SWT.DOUBLE_BUFFERED);
this.grid = new SnakePanelRectangle[COLUMNS][ROWS];
for (int i = 0; i < COLUMNS; i++) {
for (int j = 0; j < ROWS; j++) {
this.grid[i][j] = new SnakePanelRectangle();
}
}
Timeline repaint = new SWTRepaintTimeline(this);
repaint.playLoop(RepeatBehavior.LOOP);
this.addMouseMoveListener(new MouseMoveListener() {
int rowOld = -1;
int colOld = -1;
@Override
public void mouseMove(MouseEvent e) {
int x = e.x;
int y = e.y;
int column = x / (DIM + 1);
int row = y / (DIM + 1);
if ((column >= COLUMNS) || (row >= ROWS))
return;
if ((column != colOld) || (row != rowOld)) {
if ((colOld >= 0) && (rowOld >= 0))
grid[colOld][rowOld].setRollover(false);
grid[column][row].setRollover(true);
}
colOld = column;
rowOld = row;
}
});
this.addPaintListener(new PaintListener() {
@Override
public void paintControl(PaintEvent e) {
GC gc = e.gc;
gc.setBackground(e.display.getSystemColor(SWT.COLOR_BLACK));
gc.fillRectangle(e.x, e.y, e.width, e.height);
for (int i = 0; i < COLUMNS; i++) {
for (int j = 0; j < ROWS; j++) {
SnakePanelRectangle rect = grid[i][j];
Color backgr = rect.getBackgroundColor();
gc.setBackground(backgr);
gc.fillRectangle(i * (DIM + 1), j * (DIM + 1), DIM,
DIM);
}
}
}
});
}
}
and the main method:
public static void main(String[] args) {
Display display = new Display();
Shell shell = new Shell(display);
shell.setSize(430, 240);
shell.setText("SWT Snake");
FillLayout layout = new FillLayout();
shell.setLayout(layout);
SnakePanel snake = new SnakePanel(shell);
shell.open();
while (!shell.isDisposed()) {
if (!display.readAndDispatch())
display.sleep();
}
display.dispose();
}
In this two examples we have multiple timeline running in parallel. The main repaint timeline continuously repaints the grid, and each cell has its own rollover timeline. If you move the mouse quickly over the grid, you can end up with dozens of timelines, each updating its own cell - with the "master" repaint timeline looking at the current cell color during the painting.
Click below for the WebStart demo of the Swing version
