Search code examples
animationjavafxfxml

Why is my JavaFx animation moving further to the right each time the button is pressed?


I am trying to make an animation where a text field an some buttons appear when I press a toggle button, and when I press the toggle button again, it disappears. I have almost succeeded in, but each time I press the toggle button, the toggle menu moves further and further to the right. I'm not that good at explaining, but I made a little gif so you can see. https://gyazo.com/1bd43a95ec988edbce47704674c46418

Hope someone can help me! It is in the method called "routeBtnAction"

The animation method


    @FXML
    private void routeBtnAction(){
        if (routeBtn.isSelected()) {
            searchbar.setPromptText("From");
            TranslateTransition slideIn = new TranslateTransition();
            slideIn.setDuration(Duration.millis(250));
            slideIn.setCycleCount(1);
            slideIn.setNode(routeMenu);
            slideIn.setByX(173);
            slideIn.setInterpolator(Interpolator.EASE_OUT);
            slideIn.play();
        } else {
            searchbar.setPromptText("Search");
            TranslateTransition slideOut = new TranslateTransition();
            slideOut.setDuration(Duration.millis(300));
            slideOut.setCycleCount(1);
            slideOut.setNode(routeMenu);
            slideOut.setByX(-routeMenu.getWidth());
            slideOut.setInterpolator(Interpolator.EASE_IN);
            slideOut.play();
        }
    }


Solution

  • I found out. It's supposed to be setToX, not setByX! :)