How to animate several nodes with pause between each one?

Question

I am trying to animate a series of nodes one after the other in a loop. The goal is to have the first node begin its animation, followed by a short pause before the next node begins to animate.

However, when running this within a loop, it executes too fast and all nodes appear to be animating at the same time.

For simplicity, I am using the AnimateFX library to handle the animations, but I assume the functionality needed here would apply in other situations?

How would I add a pause between each of the HBox animations?

import animatefx.animation.Bounce;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class AnimationTest extends Application {

    public static void main(String[] args) {

        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        final VBox root = new VBox(10);
        root.setAlignment(Pos.CENTER);
        final HBox tiles = new HBox(5);
        tiles.setAlignment(Pos.CENTER);

        // Create 5 tiles
        for (int i = 0; i < 5; i++) {
            HBox tile = new HBox();
            tile.setPrefSize(50, 50);
            tile.setStyle("-fx-border-color: black; -fx-background-color: lightblue");
            tiles.getChildren().add(tile);
        }

        Button button = new Button("Animate");
        button.setOnAction(event -> {

            // Animate each tile, one at a time
            for (Node child : tiles.getChildren()) {
                Bounce animation = new Bounce(child);
                animation.play();
            }
        });

        root.getChildren().add(tiles);
        root.getChildren().add(button);

        primaryStage.setWidth(500);
        primaryStage.setHeight(200);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }
}

user_2189127 · Answer

I don't know AnimateFX, but using the standard libraries you can add animations to a SequentialTransition.

For example, to animate each node but starting at a later time, add PauseTransitions of increasing duration and the desired animation to SequentialTransitions, and play the SequentialTransitions.

As I said, I'm not familiar with the library you're using, but I think it would look like this:

    Button button = new Button("Animate");
    button.setOnAction(event -> {

        Duration offset = Duration.millis(500);
        Duration start = new Duration();

        // Animate each tile, one at a time
        for (Node child : tiles.getChildren()) {
            Bounce bounce = new Bounce(child);
            PauseTransition delay = new PauseTransition(start);
            SequentialTransition animation = new SequentialTransition(delay, bounce.getTimeline());
            animation.play();
            start = start.add(offset);
        }
    });

How to animate several nodes with pause between each one?

1 Answers