How to make 2 animations run in succession

Viewed 58

I'm new to JavaFX

I want to make 2 animations run in succession

And I try to create 2 circles, I let the first(AQUA) circle play animation1, then I make the second(RED) circle play animation2. But if it's just that, 2 animations will play at the same time.

And I try adding Thread.sleep() to it:

import javafx.util.Duration;

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class TestAnimation2 extends Application{
    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane pane = new Pane();
        pane.setMinSize(1800, 900);
        Group root = new Group(pane);
        Scene mainScene = new Scene(root);

        Circle cir1 = new Circle(100, 100, 30);
        cir1.setFill(Color.AQUA);
        pane.getChildren().add(cir1);

        TranslateTransition animation1 = new TranslateTransition();
        animation1.setToX(300);
        animation1.setToY(0);
        animation1.setDuration(Duration.seconds(2));
        animation1.setNode(cir1);



        Circle cir2 = new Circle(100, 200, 30);
        cir2.setFill(Color.RED);
        pane.getChildren().add(cir2);

        TranslateTransition animation2 = new TranslateTransition();
        animation2 = new TranslateTransition();
        animation2.setToX(300);
        animation2.setToY(0);
        animation2.setDuration(Duration.seconds(2));
        animation2.setNode(cir2);

        primaryStage.setScene(mainScene);
        primaryStage.setResizable(false);
        primaryStage.show();

        animation1.play();

        try {
            Thread.sleep(2000);
        } catch (Exception e) {System.out.println(e);}

        animation2.play();
    }

    public static void main(String[] args) {
        launch();
    }
}

But when I try to run it I don't understand why I can't see animation1, the program stops, and when it start running animation2 it shows up.

What should I do to make 2 animations run in sucession

1 Answers

You can use a SequentialTransition:

public class TestAnimation2 extends Application{
    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane pane = new Pane();
        pane.setMinSize(1800, 900);
        Group root = new Group(pane);
        Scene mainScene = new Scene(root);

        Circle cir1 = new Circle(100, 100, 30);
        cir1.setFill(Color.AQUA);
        pane.getChildren().add(cir1);

        TranslateTransition animation1 = new TranslateTransition();
        animation1.setToX(300);
        animation1.setToY(0);
        animation1.setDuration(Duration.seconds(2));
        animation1.setNode(cir1);



        Circle cir2 = new Circle(100, 200, 30);
        cir2.setFill(Color.RED);
        pane.getChildren().add(cir2);

        TranslateTransition animation2 = new TranslateTransition();
        animation2.setToX(300);
        animation2.setToY(0);
        animation2.setDuration(Duration.seconds(2));
        animation2.setNode(cir2);

        primaryStage.setScene(mainScene);
        primaryStage.setResizable(false);
        primaryStage.show();

        SequentialTransition animation = new SequentialTransition(animation1, animation2);
        animation.play();  

    }

    public static void main(String[] args) {
        launch();
    }
}

Or, you can use the onFinished handler of the first animation to play the second:

public class TestAnimation2 extends Application{
    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane pane = new Pane();
        pane.setMinSize(1800, 900);
        Group root = new Group(pane);
        Scene mainScene = new Scene(root);

        Circle cir1 = new Circle(100, 100, 30);
        cir1.setFill(Color.AQUA);
        pane.getChildren().add(cir1);

        TranslateTransition animation1 = new TranslateTransition();
        animation1.setToX(300);
        animation1.setToY(0);
        animation1.setDuration(Duration.seconds(2));
        animation1.setNode(cir1);



        Circle cir2 = new Circle(100, 200, 30);
        cir2.setFill(Color.RED);
        pane.getChildren().add(cir2);

        TranslateTransition animation2 = new TranslateTransition();
        animation2.setToX(300);
        animation2.setToY(0);
        animation2.setDuration(Duration.seconds(2));
        animation2.setNode(cir2);

        primaryStage.setScene(mainScene);
        primaryStage.setResizable(false);
        primaryStage.show();

        animation1.setOnFinished(event -> animation2.play());

        animation1.play();

    }

    public static void main(String[] args) {
        launch();
    }
}
Related