单击按钮时移动 ScrollPane 的视点

Question

我的 JavaFX 应用程序有概念：

所有屏幕合二为一ScrollPane。

例如，如果用户单击 loginScreen 中的按钮 "Options"，我想为 ViewPort 的 Y 值设置动画以将其移动到 optionsScreen。

如何以编程方式移动 viewport 的 ScrollPane 并使动画流畅？

或者你能提供更好的主意吗？

Answer 1

How can I programmatically move viewport of ScrollPane with smooth animation?

您可以使用 Timeline and vvalueProperty of ScrollPane 的组合来执行流畅的滚动动画。

这是一个简单的应用程序，其中你我有三个部分

顶部
居中
底部

我正在通过按钮操作上的 Timeline 更改 ScrollPane 的 vvalue。

vvalue 的值可以在 0.0 到 1.0 之间，因此您可能需要自己进行计算才能找到要分配给它的确切值。

KeyValue对scrollRoot.vvalueProperty()执行操作。

完整时间线的 KeyFrame 设置为 500 milliseconds。您可以增加或减少它，具体取决于您希望动画运行.

的时间

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);
    }
}

输出

单击按钮时移动 ScrollPane 的视点

Move viewpoint of ScrollPane on Button click

javafx

javafx-8