Move viewpoint of ScrollPane on Button click - javafx

Question

There is concept of my JavaFX applictions:
All screens in one ScrollPane.
For example, if user click on button "Options" in loginScreen i want to animate Y-value of ViewPort to move it to optionsScreen.
How can i programmatically move viewport of ScrollPane with smooth animation?
Or you can offer better idea?

Answer 1

How can I programmatically move viewport of ScrollPane with smooth animation?
You can use a combination of Timeline and vvalueProperty of ScrollPane to perform a smooth animation of scrolling.
Here is a simple application where you I have three sections
Top
Center
Bottom
I am changing the vvalue of the ScrollPane through a Timeline on the action of the button.
The vvalue can have a value between 0.0 to 1.0, so you may have to do your own calculations to find the exact value which you want to be assigned to it.
The KeyValue performs the operation on scrollRoot.vvalueProperty().
The KeyFrame for the complete timeline is set at 500 milliseconds. You may increase or decrease it depending on the time you want the animation to run.
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Main extends Application {
// For just adjusting the center rectangle w.r.t ScrollPane
private final int ADJUSTMENT_RATIO = 175;
#Override
public void start(Stage stage) {
Rectangle topRegion = new Rectangle(300, 300, Color.ALICEBLUE);
StackPane top = new StackPane(topRegion, new Label("Top"));
Rectangle centerRegion = new Rectangle(300, 300, Color.GOLDENROD);
StackPane center = new StackPane(centerRegion, new Label("center"));
Rectangle bottomRegion = new Rectangle(300, 300, Color.BISQUE);
StackPane bottom = new StackPane(bottomRegion, new Label("bottom"));
Button topButton = new Button("Top");
Button centerButton = new Button("Center");
Button bottomButton = new Button("Bottom");
HBox buttonBox = new HBox(15, topButton, centerButton, bottomButton);
buttonBox.setPadding(new Insets(20));
buttonBox.setAlignment(Pos.CENTER);
final VBox root = new VBox();
root.setSpacing(10);
root.setPadding(new Insets(10, 10, 10, 10));
root.getChildren().addAll(top, center, bottom);
ScrollPane scrollRoot = new ScrollPane(root);
Scene scene = new Scene(new VBox(buttonBox, scrollRoot));
stage.setTitle("Market");
stage.setWidth(350);
stage.setHeight(400);
stage.setScene(scene);
stage.show();
topButton.setOnAction(event -> {
final Timeline timeline = new Timeline();
final KeyValue kv = new KeyValue(scrollRoot.vvalueProperty(), 0.0);
final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
timeline.getKeyFrames().add(kf);
timeline.play();
});
centerButton.setOnAction(event -> {
final Timeline timeline = new Timeline();
final KeyValue kv = new KeyValue(scrollRoot.vvalueProperty(), (top.getBoundsInLocal().getHeight() + ADJUSTMENT_RATIO) / root.getHeight());
final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
timeline.getKeyFrames().add(kf);
timeline.play();
});
bottomButton.setOnAction(event -> {
final Timeline timeline = new Timeline();
final KeyValue kv = new KeyValue(scrollRoot.vvalueProperty(), 1.0);
final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
timeline.getKeyFrames().add(kf);
timeline.play();
});
}
public static void main(String[] args) {
launch(args);
}
}
Output