代码之家  ›  专栏  ›  技术社区  ›  user3164187

具有多个节点的JavaFx转换动画

  •  1
  • user3164187  · 技术社区  · 6 年前

    我正在努力实现一个 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);
        }
    }
    

    我要达到的目标是:

    1. 当鼠标进入 Button 展开 “一个 Node 将在其右侧打开,之后如果鼠标进入打开的节点,则不应靠近。

    2. 当鼠标进入 按钮 “一个 节点 将被打开,鼠标退出按钮“展开”(但没有进入打开的节点),则打开的节点应关闭。

    目前我正在玩 按钮和节点的鼠标事件中的动画。

    我怎样才能做到这一点?

    2 回复  |  直到 6 年前
        1
  •  4
  •   fabian    6 年前

    @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
  •  2
  •   guleryuz    6 年前

    您只需使用助手即可完成任务 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);
        }
    }