Animation using JavaFX looks choppy

Question

I've been trying to maka a JavaFX application that moves a square to the right when the mouse is clicked. I'm using TranslateTransition to achieve this. The animation looks extremely choppy and I can't seem to figure out why. Here is the code:

package main;

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            Pane root = new Pane();
            Rectangle player = new Rectangle(30,30, Color.rgb(242, 0, 0));
            player.relocate(100, 100);
            root.getChildren().add(player);
            Scene scene = new Scene(root,1280,720);
            movePlayerOnMouseClick(scene, player, createTranslateTransition(player));
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

    private TranslateTransition createTranslateTransition(Rectangle o) {
        final TranslateTransition transition = new TranslateTransition(Duration.seconds(1), o);
        transition.setOnFinished(new EventHandler<ActionEvent>() {
              @Override public void handle(ActionEvent t) {
                  o.setX(o.getTranslateX());
                  o.setY(o.getTranslateY());
              }
         });
         return transition;
     }

     private void movePlayerOnMouseClick(Scene scene, Rectangle o, final TranslateTransition transition){
         scene.setOnMousePressed(new EventHandler<MouseEvent>() {
             @Override public void handle(MouseEvent event) {
                 transition.setToX(o.getX() + 10 * Math.cos(Math.toRadians(0)));
                 transition.setToY(o.getY() + 10 * Math.sin(Math.toRadians(0)));
                 transition.playFromStart();
              }
          });
      }
}

Im using Java 8.

Answer 1

The TranslateTransition performs the animation by updating the translateX and translateY properties of the node. These are different to the x and y properties of the Rectangle (the rectangle is positioned first by looking at its x and y properties, and then applying its transformations, including the translation).

So in the onFinished handler, you are causing the rectangle to jump to the location specified by the translation, with the translation still applied after that. If you want to update the coordinates from the translation, you should add the translation to the coordinates, and then set the translation to zero:

    transition.setOnFinished(new EventHandler<ActionEvent>() {
          @Override public void handle(ActionEvent t) {
              o.setX(o.getX() + o.getTranslateX());
              o.setY(o.getY() + o.getTranslateY());
              o.setTranslateX(0);
              o.setTranslateY(0);
          }
     });

and then you probably just want

 private void movePlayerOnMouseClick(Scene scene, Rectangle o, final TranslateTransition transition){
     scene.setOnMousePressed(new EventHandler<MouseEvent>() {
         @Override public void handle(MouseEvent event) {
             transition.setToX(10 * Math.cos(Math.toRadians(0)));
             transition.setToY(10 * Math.sin(Math.toRadians(0)));
             transition.playFromStart();
          }
      });
  }