JavaFX Animation Error When Transitioning Control - animation

Question

I am trying to transition a JavaFX control using PathTransition. In execution, the control moves erratically (I made it work for a Rectangle).
The attached sample attempts to move a Label from one position to another based on the positions of two other labels. The label immediately jumps to a point below its presumed starting point, and then transitions to another spot below its intended target location.
Debug info indicates that the label is starting at (50, 50) with an offset of (0, 0), aiming for a new location of (200, 50). When the animation completes I believe it should be at position (50, 50) with an offset of (150, 0); in fact, it has a location of (50, 50) with an offset of (148, 38.5).
What am I doing wrong?
Thanks for the help.
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

There are two issues with you code:
PathTransition moves Node in it's own coordinate system. So if your node has layoutX/Y set to 50,50 as periLabel does -- it will be shifted.
PathTransition moves Node by Node's center, not by top-left corner.
Next code will fix your problems:
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;