JavaFX Scene Switch Animation

We all love JavaFX for its modern look and easy to use user interface APIs. In this article we will discuss about JavaFX Scene Switch (Change) animation. I have implemented two types of scene change animation. Fading Scenes and Sliding Scenes.

By default, JavaFX animation api does not provide a direct option animate a scene change. But we can use the following way.

1. Load primary stage with a scene. Enclose this scene in a root container. This container can be of your preference. StackPane, Group etc can be used.
2. When changing scenes, remove everything from this root container.
3. Load the scene to be loaded to a variable. Add it new scene to the root container with animation.

Sliding Scene Transition

In this animation, we will get a nice sliding effect for the scenes. You can see the preview in the following GIF.

The idea here is to load the new scene beyond the visibility of the screen. For example, if the window height is 500px, then load the new scene at 500px. Then using KeyFrame animation, take the scene translateY to 0. This creates a slide in effect from bottom. Using translateX, we can implement slide in effect from sides.

Let’s see this in code. Following file is the first scene’s controller. When loadSecondScene() is called, second scene will be added.

/**
 * Removed Imports for code simplicity
 * FILE - Scene 1 Controller. On button Click, Scene 2 will be loaded  
 * @author Genuine Coder
 */
public class FirstSceneController implements Initializable {
    @FXML
    private AnchorPane anchorRoot;
    @FXML
    private StackPane parentContainer;

    @FXML
    private void loadSecondScene(ActionEvent event) throws IOException {
        Parent root = FXMLLoader.load(getClass().getResource("myscene2.fxml"));
        Scene scene = anchorRoot.getScene();
        //Set Y of second scene to Height of window
        root.translateYProperty().set(scene.getHeight());
        //Add second scene. Now both first and second scene is present
        parentContainer.getChildren().add(root);

        //Create new TimeLine animation
        Timeline timeline = new Timeline();
        //Animate Y property
        KeyValue kv = new KeyValue(root.translateYProperty(), 0, Interpolator.EASE_IN);
        KeyFrame kf = new KeyFrame(Duration.seconds(1), kv);
        timeline.getKeyFrames().add(kf);
        //After completing animation, remove first scene
        timeline.setOnFinished(t -> {
            parentContainer.getChildren().remove(anchorRoot);
        });
        timeline.play();
    }
}

Watch the Slide Transition in action from Genuine Coder Channel

Fading Scene Transition

Fading screen transition can also be implemented with a similar concept as of Sliding Screen transition.  The idea is, we apply a fade out transition for the first scene. After completion of fade out transition of first scene, we add second scene. The second scene will be added with zero opacity. Then using fade in transition we make the second scene visible.

You can see the program in action in the following Genuine Coder Tutorial video.