JavaFX：使用TranslateTransition动画时如何让按钮显示在其他节点上方？

我有一个包含按钮的StackPane，想要将该按钮移动到另一个StackPane。移动路径中间有一个Pane，其中也包含一个按钮。当我使用TranslateTransition动画移动可移动按钮时，它始终被中间的按钮遮挡。

当前代码实现 #

Java控制器代码 #

public class HelloController {

    @FXML
    private StackPane startPane;
    @FXML
    private StackPane endPane;
    @FXML private Button button;

    @FXML
    protected void onHelloButtonClick() {
        TranslateTransition transition = new TranslateTransition(Duration.seconds(1), button);
        transition.setFromX(startPane.getBoundsInParent().getMinX() - endPane.getBoundsInParent().getMinX());
        transition.setFromY(startPane.getBoundsInParent().getMinY() - endPane.getBoundsInParent().getMinY());
        transition.setToX(0);
        transition.setToY(0);

        button.setOnAction(e -> {
            ((StackPane) button.getParent()).getChildren().remove(button);

            // 移动按钮到目标面板并执行动画
            endPane.getChildren().add(button);

            // 尝试将按钮置于顶层
            button.toFront();

            transition.play();
        });
    }
}

FXML布局文件 #

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>


<?import javafx.scene.layout.Pane?>
<AnchorPane prefHeight="251.0" prefWidth="379.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo1.HelloController">
   <children>
      <StackPane fx:id="startPane" prefHeight="119.0" prefWidth="123.0" style="-fx-background-color: red;">
         <children>
            <Button fx:id="button" onAction="#onHelloButtonClick" text="Hello!" />
         </children>
      </StackPane>
      <StackPane fx:id="endPane" layoutX="242.0" layoutY="119.0" prefHeight="119.0" prefWidth="123.0" style="-fx-background-color: yellow;" />
      <Pane fx:id="endPane1" layoutX="119.0" layoutY="66.0" prefHeight="119.0" prefWidth="123.0" style="-fx-background-color: blue;">
         <children>
            <Button mnemonicParsing="false" prefHeight="123.0" prefWidth="126.0" text="Button" />
         </children>
      </Pane>
   </children>
</AnchorPane>

已尝试的无效方法 #

我已经尝试过将起始面板和按钮的translateZ值设置为10，并调用按钮的toFront()方法，但都无效。

问题原因 #

核心问题在于节点绘制层级：中间的endPane1在AnchorPane的子节点列表中排在startPane和endPane之后，所以它的绘制优先级更高。即使把按钮移到endPane并调用toFront()，也只是让按钮在endPane的子节点中前置，而endPane本身的层级低于endPane1，因此按钮仍然会被遮挡。

解决方案 #

方法一：临时将按钮移到根容器（AnchorPane） #

动画开始前，把要移动的按钮直接添加到最顶层的AnchorPane中，确保它的层级高于所有中间容器；动画结束后再将其移到目标StackPane。

修改后的控制器代码：

public class HelloController {

    @FXML
    private StackPane startPane;
    @FXML
    private StackPane endPane;
    @FXML
    private Button button;
    @FXML
    private AnchorPane rootPane; // 需要在FXML中给AnchorPane添加fx:id="rootPane"

    @FXML
    protected void onHelloButtonClick() {
        // 计算按钮从起始位置到目标位置的偏移量
        double startX = startPane.getBoundsInParent().getMinX();
        double startY = startPane.getBoundsInParent().getMinY();
        double targetX = endPane.getBoundsInParent().getMinX();
        double targetY = endPane.getBoundsInParent().getMinY();

        TranslateTransition transition = new TranslateTransition(Duration.seconds(1), button);
        transition.setFromX(0);
        transition.setFromY(0);
        transition.setToX(targetX - startX);
        transition.setToY(targetY - startY);

        // 动画结束后将按钮移到目标Pane，并重置偏移量
        transition.setOnFinished(e -> {
            rootPane.getChildren().remove(button);
            endPane.getChildren().add(button);
            button.setTranslateX(0);
            button.setTranslateY(0);
        });

        button.setOnAction(e -> {
            // 移除按钮并添加到根容器
            startPane.getChildren().remove(button);
            rootPane.getChildren().add(button);
            // 设置按钮初始位置与startPane对齐
            button.setLayoutX(startX);
            button.setLayoutY(startY);
            transition.play();
        });
    }
}

对应的FXML修改（给AnchorPane添加fx:id）：

<AnchorPane fx:id="rootPane" prefHeight="251.0" prefWidth="379.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo1.HelloController">
   <!-- 其余内容不变 -->
</AnchorPane>

方法二：调整AnchorPane子节点顺序 #

直接修改FXML中children节点的顺序，把endPane1移到startPane之前，这样startPane和endPane的绘制层级会高于endPane1，里面的按钮自然不会被遮挡：

<AnchorPane prefHeight="251.0" prefWidth="379.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo1.HelloController">
   <children>
      <Pane fx:id="endPane1" layoutX="119.0" layoutY="66.0" prefHeight="119.0" prefWidth="123.0" style="-fx-background-color: blue;">
         <children>
            <Button mnemonicParsing="false" prefHeight="123.0" prefWidth="126.0" text="Button" />
         </children>
      </Pane>
      <StackPane fx:id="startPane" prefHeight="119.0" prefWidth="123.0" style="-fx-background-color: red;">
         <children>
            <Button fx:id="button" onAction="#onHelloButtonClick" text="Hello!" />
         </children>
      </StackPane>
      <StackPane fx:id="endPane" layoutX="242.0" layoutY="119.0" prefHeight="119.0" prefWidth="123.0" style="-fx-background-color: yellow;" />
   </children>
</AnchorPane>

方法三：设置按钮的viewOrder #

使用setViewOrder()方法给要移动的按钮设置更低的数值（viewOrder越小，绘制优先级越高），默认值为0，设置为负数即可让按钮绘制在所有默认节点之前：

button.setOnAction(e -> {
    ((StackPane) button.getParent()).getChildren().remove(button);
    endPane.getChildren().add(button);
    // 设置viewOrder确保按钮始终在最上层
    button.setViewOrder(-1);
    transition.play();
});

这个方法最简单，无需调整容器结构，直接修改按钮的绘制优先级即可。

内容的提问来源于stack exchange，提问作者OmarC98