コントロールの遷移時のJavaFXアニメーションエラー

Question

PathTransitionを使用してJavaFXコントロールを遷移しようとしています。実行時に、コントロールが不規則に動いています（私はそれをRectangleに対して機能させました）。

添付されているサンプルは、2つの他のラベルの位置に基づいてラベルをある位置から別の位置に移動しようとします。ラベルは、推定された開始点のすぐ下の点に直ちにジャンプし、意図した目標位置の下の別の点に移動します。

デバッグ情報は、（200、50）の新しい場所を目指して、ラベルが（50、50）からオフセット（0、0）で始まっていることを示します。アニメーションが完了すると、（50、50）の位置に（150、0）のオフセットがあるはずです。実際には、（148,38.5）のオフセットを持つ（50,50）の位置を持っています。

私は間違っていますか？

ありがとうございます。

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

あなたのコードには2つの問題があります。

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;