Fade In/ Fade Out a Screen in JavaFx

Question

I made a JavaFx application that has a main screen. And that main screen contains buttons, each button shows different screens. Now I want, when I press a button, my current screen to FadeOut and new screen to FadeIn.

public class GuiPractice extends Application {

    private Stage stage;

    public static void main(String[] args) {
        Application.launch(GuiPractice.class, (java.lang.String[])null);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        try{
            stage = primaryStage;
            stage.setTitle("HOME SCREEN");
            gotoWelcome();
            stage.show();            
        } catch(Exception ex){
            Logger.getLogger(GuiPractice.class.getName()).log(Level.SEVERE,null,ex);
        }
    }


    private void gotoWelcome(){
        try{
            WelcomePageController wc = (WelcomePageController)     replaceScene("WelcomePage.fxml");  // Check 'replaceScene' Below
            wc.setApp(this);
        } catch (Exception ex){
            Logger.getLogger(GuiPractice.class.getName()).log(Level.SEVERE,null,ex);
        }
    }
    // When I Press Button Action Handler Calls This Method..
    // This Method is Working Fine, Except For the FandIn Portion
    private void gotoSignin(){
        try{

            SigninPageController wc = (SigninPageController)     replaceScene("SigninPage.fxml"); // Check 'replaceScene' Below
            wc.setApp(this);           

            /// THIS PORTION IS FADE TRANSITION, IT IS NOT WORKING
            FadeTransition ft = new FadeTransition(Duration.millis(3000));
            ft.setFromValue(0.0);
            ft.setToValue(1.0);

            ft.play();


        } catch (Exception ex){
            Logger.getLogger(GuiPractice.class.getName()).log(Level.SEVERE,null,ex);
        }
    }

    private Initializable replaceScene(String fxml) throws Exception {
        FXMLLoader loader = new FXMLLoader();
        InputStream ins = GuiPractice.class.getResourceAsStream(fxml);
        loader.setBuilderFactory(new JavaFXBuilderFactory());
        loader.setLocation(GuiPractice.class.getResource(fxml));
        AnchorPane page;
        try {
            page = (AnchorPane) loader.load(ins);
        } finally {
            ins.close();
        }
        Scene scene = new Scene(page);
        stage.setScene(scene);
        stage.sizeToScene();
        return (Initializable) loader.getController();
    }

}

Answer 1

You need to pass the node on which you want to apply the Transition to the constructor of the FadeTransition.

Approach 1

So you can take the following lines and put them inside your replaceScene() before scene = new Scene(page)

page = (AnchorPane) loader.load(ins);
FadeTransition ft = new FadeTransition(Duration.millis(3000), page);
ft.setFromValue(0.0);
ft.setToValue(1.0);
ft.play();
Scene scene = new Scene(page);

Though, there will be a Fading Effect on the welcome screen as well and you will have to apply some logic to avid it !

Approach 2

Load the fxml inside the gotoSignin()/ Get the Anchorpane reference and pass it to the controller. Though, I believe this will bring a lot of changes for your current design ! You can take a call and decide !

Hope it helps !

Answer 2

Yeah, of course, you could have an fade out effect - just inverse values from and to, of your FadeTransition, like:

FadeTransition ft = new FadeTransition(Duration.millis(3000), page);
ft.setFromValue(1);
ft.setToValue(0);
ft.play();