javafxslidesplitpane

Animate splitpane divider


I have a horizontal split pane, and i would like to on button click, change divider position, so that i create sort of "slide" animation.

divider would start at 0 (complete left) and on my click it would open till 0.2, when i click again, it would go back to 0;

now i achived this, i just use

spane.setdividerPositions(0.2); 

and divider position changes, but i cant manage to do this slowly i would really like that slide feeling when changing divider position.

Could anyone help me ? all examples i found on google, show some DoubleTransition, but that does not exist anymore in java 8, at least i dont have import for that.


Solution

  • You can call getDividers().get(0) to get the first divider. It has a positionProperty() that you can animate using a timeline:

    import javafx.animation.KeyFrame;
    import javafx.animation.KeyValue;
    import javafx.animation.Timeline;
    import javafx.application.Application;
    import javafx.beans.binding.Bindings;
    import javafx.beans.property.BooleanProperty;
    import javafx.beans.property.SimpleBooleanProperty;
    import javafx.geometry.Insets;
    import javafx.geometry.Pos;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.control.SplitPane;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.HBox;
    import javafx.scene.layout.Pane;
    import javafx.stage.Stage;
    import javafx.util.Duration;
    
    public class AnimatedSplitPane extends Application {
    
        @Override
        public void start(Stage primaryStage) {
            SplitPane splitPane = new SplitPane(new Pane(), new Pane());
            splitPane.setDividerPositions(0);
    
            BooleanProperty collapsed = new SimpleBooleanProperty();
            collapsed.bind(splitPane.getDividers().get(0).positionProperty().isEqualTo(0, 0.01));
    
            Button button = new Button();
            button.textProperty().bind(Bindings.when(collapsed).then("Expand").otherwise("Collapse"));
    
            button.setOnAction(e -> {
                double target = collapsed.get() ? 0.2 : 0.0 ;
                KeyValue keyValue = new KeyValue(splitPane.getDividers().get(0).positionProperty(), target);
                Timeline timeline = new Timeline(new KeyFrame(Duration.millis(500), keyValue));
                timeline.play();
            });
    
            HBox controls = new HBox(button);
            controls.setAlignment(Pos.CENTER);
            controls.setPadding(new Insets(5));
            BorderPane root = new BorderPane(splitPane);
            root.setBottom(controls);
            Scene scene = new Scene(root, 600, 600);
            primaryStage.setScene(scene);
            primaryStage.show();
    
        }
    
        public static void main(String[] args) {
            launch(args);
        }
    }