上的按鈕進行移動滾動窗格的觀點點擊

Question

還有就是我的JavaFX applictions的概念：

在一個ScrollPane所有屏幕。

例如，如果用戶點擊loginScreen中的「選項」按鈕，我想動畫Y的值ViewPort將其移動到optionsScreen。

如何以編程方式將ScrollPane的viewport與平滑動畫一起移動？

或者你可以提供更好的主意？

Answer 1

如何以編程方式將平移動畫的ScrollPane的視口移動？

您可以使用Timeline和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); 
    } 
} 

輸出