在JavaFx中实现屏幕淡入/淡出

Question

我制作了一个JavaFx应用程序，其中包含一个主屏幕。该主屏幕包含按钮，每个按钮显示不同的屏幕。现在我希望，当我按下一个按钮时，我的当前屏幕会淡出，新屏幕淡入。

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();
    }

}

- DeshErBojhaa

Answer 1

您需要将您想要应用Transition的node传递给FadeTransition的构造函数。

方法1

因此，您可以将以下行放在replaceScene()中，在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);

尽管欢迎屏幕上也会有淡入淡出的效果，你需要应用一些逻辑来避免它！

方法2

在gotoSignin()中加载fxml / 获取Anchorpane引用并将其传递给控制器。不过，我相信这将为您当前的设计带来很多改变！您可以自行决定！

希望能有所帮助！

- ItachiUchiha

---

很酷 :) :) 第一种方法在我的代码上运行良好。谢谢@ltachiUchiha大佬。不过现在我在考虑，当一个屏幕消失时，是否可以应用淡出过渡效果。 再次感谢ltachiUchiha。 - DeshErBojhaa

Answer 2

当然可以使用淡出效果 - 只需将FadeTransition的from和to值反转即可，例如：

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

- MaxKing