JavaFX：StackPane順序轉換

Question

我試圖用AnchorPane在3個不同的AnchorPane （點擊一個Button ）之間FadeTransition ，下面是我的代碼，

public class TestSlide extends Application {
    private ObjectBinding<Node> frontNode;

    @Override
    public void start(Stage primaryStage) {

        StackPane root = new StackPane();
        AnchorPane pane1 = new AnchorPane(new Button("1"));
        AnchorPane pane2 = new AnchorPane(new Button("2"));
        AnchorPane pane3 = new AnchorPane(new Button("3"));
        root.getChildren().addAll(pane1, pane2, pane3);

        handleAnimation(root);

        BorderPane border= new BorderPane(root);

        HBox bottom = new HBox(10);
        Button front1 = new Button("Pane 1");
        Button front2 = new Button("Pane 2");
        Button front3 = new Button("Pane 3");
        front1.setOnAction((ActionEvent event) -> {
            pane1.toFront();
        });
        front2.setOnAction((ActionEvent event) -> {
            pane2.toFront();
        });
        front3.setOnAction((ActionEvent event) -> {
            pane3.toFront();
        });
        bottom.getChildren().addAll(front1, front2, front3);
        border.setBottom(bottom);

        Scene scene = new Scene(border,400,400);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    private void handleAnimation(StackPane root) {
        frontNode = Bindings.valueAt(root.getChildren(),
                Bindings.size(root.getChildren()).subtract(1));
        frontNode.addListener((obs, oldNode, newNode) -> {
            SequentialTransition fadeOutIn = new SequentialTransition();
            if (oldNode != null) {
                FadeTransition fadeOut = new FadeTransition(Duration.millis(500), oldNode);
                fadeOut.setToValue(0);
                fadeOutIn.getChildren().add(fadeOut);
            }
            if (newNode != null) {
                FadeTransition fadeIn = new FadeTransition(Duration.millis(500), newNode);
                fadeIn.setFromValue(0);
                fadeIn.setToValue(1);
                fadeOutIn.getChildren().add(fadeIn);
            }
            fadeOutIn.play();
        });
    }

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

handleAnimation方法是從另一個SO帖子引用的。

問題是 ，

1. 啟動應用程序后，單擊“ 窗格1” Button 。 - > Transition將首先顯示pane2 ，然后顯示pane1 。

2. 現在單擊窗格3 Button - >轉換將首先顯示pane2然后再顯示pane3 。

3. 單擊窗格2 Button - >過渡將顯示pane2及以上2點提到的不會再次出現問題。

為什么過渡在顯示第1點和第2點的實際窗格之前顯示了pane2 ？ 這是由於不透明度設置？

為什么在第3點之后問題得到解決？

我怎樣才能使轉型工作， FadeIn和FadeOut各自的Pane ，而不顯示第三個窗格？

Answer 1

這里的問題是StackPane的子節點的初始狀態是錯誤的：所有節點都有不透明度1.沒有動畫運行時所需的狀態包含所有節點，但最后一個節點完全透明（opacity = 0），最后一個節點完全不透明（不透明度= 1）。 您應該能夠通過正確初始化不透明度來解決問題：

root.getChildren().addAll(pane1, pane2, pane3);

// set opacity for all but the last child to 0
List<Node> children = root.getChildren();
for (int i = children.size()-2; i >= 0; i--) {
    children.get(i).setOpacity(0);
}

否則會發生以下情況：

就在pane1.toFront() 。 請注意（ SequentialTransition確保建立動畫開始的狀態。

最頂層的節點是列表中的最后一個子節點， ----...放在可見的“圖層”旁邊。

Pane 1: opacity = 0
Pane 3: opacity = 1 ------------------------------
Pane 2: opacity = 1

在SequentialTransition的前半部分完成之后，現在看起來如下：

Pane 1: opacity = 0
Pane 3: opacity = 0
Pane 2: opacity = 1 ------------------------------

動畫結束后：

Pane 1: opacity = 1 ------------------------------
Pane 3: opacity = 0
Pane 2: opacity = 1

使用pane3.toFront()會產生類似的結果：

Pane 3: opacity = 0
Pane 1: opacity = 1 ------------------------------
Pane 2: opacity = 1

Pane 3: opacity = 0
Pane 1: opacity = 0
Pane 2: opacity = 1 ------------------------------

Pane 3: opacity = 1 ------------------------------
Pane 1: opacity = 0
Pane 2: opacity = 1