轉換控制時出現JavaFX動畫錯誤

Question

我正在嘗試使用PathTransition轉換JavaFX控件。在執行過程中，控件移動不規則（我使它適用於矩形）。

附加示例試圖根據兩個其他標籤的位置將標籤從一個位置移動到另一個位置。標籤立即跳到低於其假定起點的點，然後過渡到其預定目標位置下方的另一個點。

調試信息指示標籤開始於（50，50），偏移量爲（0，0），目標爲（200,50）的新位置。當動畫完成時，我認爲它應該在（50，50）的位置，偏移量爲（150，0）;實際上它的位置是（50,50），偏移量是（148,38.5）。

我在做什麼錯？

感謝您的幫助。

package fxsort; 

import javafx.animation.PathTransition; 
import javafx.application.Application; 
import javafx.event.ActionEvent; 
import javafx.event.EventHandler; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.Label; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.ArcTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
import javafx.scene.text.Font; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

public class Test4 
    extends Application 
{ 
    private final Label statLabel1  = 
     getLabel("Jehosaphat", 50, 50, Color.gray(.85)); 
    private final Label statLabel2  = 
     getLabel("Jehosaphat", 200, 50, Color.gray(.85)); 
    private final Label periLabel = 
     getLabel("Jehosaphat", 50, 50, Color.RED); 

public static void main(String[] args) 
{ 
    launch(args); 
} 

@Override 
public void start(Stage stage) throws Exception 
{ 
    Button start    = new Button("Start"); 

    start.relocate(250, 125); 
    start.setOnAction(
     new EventHandler<ActionEvent>() 
     { 
      @Override 
      public void handle(ActionEvent evt) 
      { 
       PathTransition transition = getTransition(); 
       transition.play(); 
      } 
     } 
    ); 

    Group root = 
     new Group(statLabel1, statLabel2, periLabel, start); 
    stage.setScene(new Scene(root, 350, 200)) ; 
    stage.show(); 
} 

private Label 
getLabel(String text, double xco, double yco, Color color) 
{ 
    Label label = new Label(text); 
    label.relocate(xco, yco); 
    label.setTextFill(color); 
    label.setFont(Font.font("Arial", 20)); 

    return label; 
} 
private PathTransition 
getTransition() 
{ 
    Label  from  = statLabel1; 
    Label  too   = statLabel2; 
    Duration duration = Duration.millis(3000); 
    double  startX  = from.getLayoutX();// + 30; 
    double  startY  = from.getLayoutY();// + 30; 
    System.out.println("From Layout: " + startX + ", " + startY); 
    System.out.println("From Offset: " + from.getTranslateX() 
         + ", " + from.getTranslateX()); 

    double  endX  = too.getLayoutX();// + 30; 
    double  endY  = too.getLayoutY();// + 30; 
    System.out.println("To Layout: " + endX + ", " + endY); 
    System.out.println("To Offset: " + too.getTranslateX() 
         + ", " + too.getTranslateX()); 

    MoveTo  start  = new MoveTo(startX, startY); 
    System.out.println("MoveTo: " + start.getX() + ", " + start.getY()); 

    ArcTo  end  = new ArcTo(); 
    end.setX(endX); 
    end.setY(endY); 
    end.setRadiusX(100); 
    end.setRadiusY(100); 
    System.out.println("ArcTo: " + end.getX() + ", " + end.getY()); 

    System.out.println("**********"); 

    Path path = new Path(); 
    path.getElements().addAll(start, end); 

    PathTransition transition = new PathTransition(); 
    transition.setDuration(duration); 
    transition.setPath(path); 
    transition.setNode(periLabel); 

    transition.setOnFinished(
     new EventHandler<ActionEvent>() 
     { 
      public void handle(ActionEvent evt) 
      { 
       System.out.println("Landed: " + periLabel.getLayoutX() 
            + ", " + periLabel.getLayoutY()); 
       System.out.println("Offset: " + periLabel.getTranslateX() 
            + ", " + periLabel.getTranslateY()); 
      } 
     } 
    ); 

    return transition; 
} 
} 

Answer 1

有兩個問題與您的代碼：

1. PathTransition在它自己​​的座標系中移動節點。因此，如果您的節點將layoutX/Y設置爲50,50，如periLabel所做的那樣 - 它將被移位。

2. PathTransition按節點的中心移動節點，而不是左上角。

接下來代碼將解決你的問題：

private PathTransition getTransition() { 
    Label from = statLabel1; 
    Label too = statLabel2; 
    Duration duration = Duration.millis(3000); 

    // fix problem (1) 
    periLabel.relocate(0, 0); 
    // fix problem (2) 
    double startX = from.getLayoutX() + from.getBoundsInLocal().getWidth()/2; 
    double startY = from.getLayoutY() + from.getBoundsInLocal().getHeight()/2; 

    double endX = too.getLayoutX() + too.getBoundsInLocal().getWidth()/2; 
    double endY = too.getLayoutY() + too.getBoundsInLocal().getHeight()/2;