Animation mit JavaFX sieht abgehackt aus

Question

Ich habe versucht, eine JavaFX-Anwendung zu erstellen, die ein Quadrat nach rechts bewegt, wenn die Maus geklickt wird. Ich verwende TranslateTransition, um dies zu erreichen. Die Animation sieht extrem abgehackt aus und ich kann nicht herausfinden, warum. Hier ist der 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 Java unter Verwendung 8.

Answer 1

Die TranslateTransition führt die Animation durch Aktualisieren der translateX und translateY Eigenschaften des Knotens. Diese unterscheiden sich von den x und y Eigenschaften des Rectangle (das Rechteck wird zuerst positioniert, indem man seine Eigenschaften x und y betrachtet und dann seine Transformationen einschließlich der Übersetzung anwendet).

So in der onFinished Handler, verursachen Sie das Rechteck zu dem Speicherort durch die Übersetzung angegeben zu springen, mit der Übersetzung immer noch danach angewendet. Wenn Sie die Koordinaten aus der Umrechnung aktualisieren möchten, sollten Sie die Übersetzung auf die Koordinaten, hinzufügen und legen Sie dann die Übersetzung auf Null:

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); 
      } 
    }); 

und dann wahrscheinlich wollen Sie gerade

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(); 
      } 
     }); 
    }