How to Combine Transitions in JavaFX - dummies

How to Combine Transitions in JavaFX

By Doug Lowe

JavaFX provides two transition classes that are designed to let you combine transitions so that two or more transitions run one after the other or at the same time. The SequentialTransition class lets you run several transitions one after the other, whereas the ParallelTransition class lets you run several transitions at once.

Both classes have simple constructors that accept a list of transitions as arguments and a play method that lets you start the animations. For example, if you have three transitions named t1, t2, and t3 already created, you can run them in sequence like this:

SequentialTransition s = 
               new SequentialTransition(t1, t2, t3)
s.play();

When the play method is called, transition t1 will run until completion and then transition t2 will run. When t2 finishes, transition t3 will be run.

To run all three transitions simultaneously, use the ParallelTransition class instead:

ParallelTransition p = 
    new ParallelTransition(t1, t2, t3)
p.play();

If you prefer, you can add animations after the constructor has been called by using the getChildren method. For example:

ParallelTransition p = new ParallelTransition()
p.getChildren().add(t1);
p.getChildren().add(t2);
p.getChildren().add(t3);
p.play();

Or:

ParallelTransition p = new ParallelTransition()
p.getChildren().addAll(t1, t2, t3);
p.play();

An animation added to a SequentialTransition or ParallelTransition can itself be a SequentialTransition or a ParallelTransition. For example, suppose you have three transitions that animate one node (t1, t2, and t3) and a fourth transition that animates a second node (t4) and you want to run t1, t2, and t3 in sequence while t4 runs at the same time as the sequence. Here’s how you can achieve that:

SequentialTransition s = 
    new SequentialTransition(t1, t2, t3)
ParallelTransition p = new ParallelTransition(s, t4);
p.play();

To illustrate how transitions can be combined into a complete program, this listing shows a variation.

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.animation.*;
import javafx.util.*;
public class TwoBouncingBalls extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }
    @Override public void start(Stage primaryStage)
    {
        RadialGradient g = new RadialGradient(
            0, 0,
            0.35, 0.35,
            0.5,
            true,
            CycleMethod.NO_CYCLE,
            new Stop(0.0, Color.WHITE),
            new Stop(1.0, Color.RED));
        Circle ball1 = new Circle(0,0,20);
        ball1.setFill(g);
        Circle ball2 = new Circle(0,0,20);
        ball2.setFill(g);
        Group root = new Group();
        root.getChildren().addAll(ball1, ball2);
        Scene scene = new Scene(root, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Two Bouncing Balls");
        primaryStage.show();
        // Bounce ball 1
        TranslateTransition t1 = new TranslateTransition(
            Duration.millis(2000), ball1);
        t1.setFromX(ball1.getRadius());
        t1.setToX(scene.getWidth() - ball1.getRadius());
        t1.setFromY(scene.getHeight() / 3);
        t1.setToY(scene.getHeight() / 3);
        t1.setCycleCount(Transition.INDEFINITE);
        t1.setAutoReverse(true);
        t1.setInterpolator(Interpolator.LINEAR);
        // Bounce ball 2
        TranslateTransition t2 = new TranslateTransition(
            Duration.millis(2000), ball2);
        t2.setFromX(scene.getWidth() - ball2.getRadius());
        t2.setToX(ball2.getRadius());
        t2.setFromY(scene.getHeight() / 3 * 2);
        t2.setToY(scene.getHeight() / 3 * 2);
        t2.setCycleCount(Transition.INDEFINITE);
        t2.setAutoReverse(true);
        t2.setInterpolator(Interpolator.LINEAR);
        // Bounce both balls at the same time
        ParallelTransition pt = new ParallelTransition(t1, t2);
        pt.play();
    }
}

This version of the program animates two balls traveling in opposite directions. A transition is created on the first ball to bounce it from left to right one third of the way down the scene.

A transition is created for the second ball to animate it in the opposite direction two thirds of the way down the scene. Then, a ParallelTransition is used to animate both balls at the same time. The figure shows the program in action.

Bouncing two balls with JavaFX.
Bouncing two balls with JavaFX.