具有多个节点的 JavaFx 过渡动画答案

【问题标题】：JavaFx Transition Animation with multiple nodes具有多个节点的 JavaFx 过渡动画
【发布时间】：2018-08-30 09:01:37
【问题描述】：

我正在尝试在一个节点上实现Transition 效果，下面是SSCE，

public class GridPaneExperiments extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("Experiment");

        Button button2 = new Button("Expand");
        Button button3 = new Button("Button 3");
        Button button4 = new Button("Button 4");

        GridPane gridPane = new GridPane();

        ToolBar bar = new ToolBar();
        bar.getItems().addAll(button3, button4);

        gridPane.add(button2, 0, 0, 1, 1);
        gridPane.add(bar, 1, 0, 1, 1);

        //Handle Mouse on Button
        button2.setOnMouseEntered((MouseEvent event) -> {
            TranslateTransition openNav = new TranslateTransition(new Duration(350), bar);
            openNav.setToX(0);
            if (bar.getTranslateX() != 0) {
                openNav.play();
            }
        });

        button2.setOnMouseExited((MouseEvent event) -> {
            TranslateTransition closeNav = new TranslateTransition(new Duration(350), bar);
            closeNav.setToX(-(((GridPane) gridPane).getWidth()));
            closeNav.play();
        });
        //Handle Mouse on ToolBar
        bar.setOnMouseExited((MouseEvent event) -> {
            TranslateTransition closeNav = new TranslateTransition(new Duration(350), bar);
            closeNav.setToX(-(((GridPane) gridPane).getWidth()));
            closeNav.play();
        });

        bar.setOnMouseEntered((MouseEvent event) -> {
            TranslateTransition openNav = new TranslateTransition(new Duration(350), bar);
            openNav.setToX(0);
            if (bar.getTranslateX() != 0) {
                openNav.play();
            }
        });

        Scene scene = new Scene(gridPane, 240, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

我想要实现的是：

当鼠标进入Button "Expand" 时，Node 将向右打开，之后如果鼠标进入打开的节点，它不应关闭。
当鼠标进入Button“Expand”时会打开一个Node，鼠标从“展开”按钮退出（但未进入打开的节点），然后打开节点应该关闭。

目前我在 Button 和 Node 的 Mouse 事件中播放 Transition 动画。

我怎样才能做到这一点？

【问题讨论】：

这听起来与ControlsFx PopOver 非常相似。快速示例here。我创建的示例使用Label 而不是Button。

标签： java javafx

【解决方案1】：

只需使用单个动画来关闭和打开。这样您就可以轻松地反转动画，不要冒并行启动多个动画的风险，并且启动关闭动画不是问题，因为您在进入其中一个节点时将动画更改为打开动画：

@Override
public void start(Stage primaryStage) throws Exception {
    primaryStage.setTitle("Experiment");

    Button button2 = new Button("Expand");
    Button button3 = new Button("Button 3");
    Button button4 = new Button("Button 4");

    GridPane gridPane = new GridPane();

    ToolBar bar = new ToolBar();
    bar.getItems().addAll(button3, button4);
    bar.setTranslateX(-10000); // somewhere outside view

    gridPane.add(button2, 0, 0, 1, 1);
    gridPane.add(bar, 1, 0, 1, 1);

    TranslateTransition transition = new TranslateTransition(Duration.millis(300), bar);
    transition.setToX(0);

    EventHandler<MouseEvent> enterHandler = (MouseEvent event) -> {
        transition.setFromX(-gridPane.getWidth());
        Duration time = transition.getCurrentTime();
        transition.setRate(1);
        transition.playFrom(time);
    };

    EventHandler<MouseEvent> exitHandler = (MouseEvent event) -> {
        if (!(button2.isHover() || bar.isHover())) {
            Duration time = transition.getCurrentTime();
            transition.setRate(-1);
            transition.playFrom(time);
        }
    };

    //Handle Mouse on Button
    button2.setOnMouseEntered(enterHandler);
    bar.setOnMouseEntered(enterHandler);
    button2.setOnMouseExited(exitHandler);
    bar.setOnMouseExited(exitHandler);


    Scene scene = new Scene(gridPane, 240, 100);
    primaryStage.setScene(scene);
    primaryStage.show();
}

【讨论】：

【解决方案2】：

您可以简单地使用帮助器 HBox 并设置 setOnMouseExited 来完成您的任务：

public class GridPaneExperiments extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("Experiment");

        Button button2 = new Button("Expand");
        Button button3 = new Button("Button 3");
        Button button4 = new Button("Button 4");

        ToolBar bar = new ToolBar();
        bar.getItems().addAll(button3, button4);

        GridPane gridPane = new GridPane();

        HBox hbox = new HBox(button2, bar);
        hbox.setStyle("-fx-border-color: red");

        gridPane.add(hbox, 0, 0);

        //Handle Mouse on Button
        button2.setOnMouseEntered((MouseEvent event) -> {
            TranslateTransition openNav = new TranslateTransition(new Duration(350), bar);
            openNav.setToX(0);
            if (bar.getTranslateX() != 0) {
                openNav.play();
            }
        });

//        button2.setOnMouseExited((MouseEvent event) -> {
//            TranslateTransition closeNav = new TranslateTransition(new Duration(350), bar);
//            closeNav.setToX(-(((GridPane) gridPane).getWidth()));
//            closeNav.play();
//        });
        //Handle Mouse on ToolBar
        hbox.setOnMouseExited((MouseEvent event) -> {
            TranslateTransition closeNav = new TranslateTransition(new Duration(350), bar);
            closeNav.setToX(-(((GridPane) gridPane).getWidth()));
            closeNav.play();
        });

//        bar.setOnMouseEntered((MouseEvent event) -> {
//            TranslateTransition openNav = new TranslateTransition(new Duration(350), bar);
//            openNav.setToX(0);
//            if (bar.getTranslateX() != 0) {
//                openNav.play();
//            }
//        });

        Scene scene = new Scene(gridPane, 240, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

【讨论】：