RotationTransition gestoppt im falschen Winkel JavaFX

Question

Ich erstelle eine Animation, die sich von der linken oberen Ecke zum Zentrum der Szene dreht, dann gehe zur rechten oberen Ecke und stoppe die Rotation. Alles funktioniert gut, aber wenn es nach oben rechts geht, hört es im falschen Winkel auf.

import javafx.application.Application; 
import javafx.stage.Stage; 
import javafx.scene.Scene; 
import javafx.scene.shape.Rectangle; 
import javafx.scene.Group; 
import javafx.animation.Animation; 
import javafx.animation.RotateTransition; 
import javafx.animation.KeyValue; 
import javafx.animation.KeyFrame; 
import javafx.animation.Timeline; 
import javafx.animation.Interpolator; 
import javafx.util.Duration; 
import javafx.event.EventHandler; 
import javafx.event.ActionEvent; 



public class ComeWaitGo extends Application{ 
    @Override 
    public void start(Stage stage){ 
     Rectangle box = new Rectangle(0, 0, 50, 50); 
     RotateTransition rotate = new RotateTransition(Duration.millis(2000), box); 
     rotate.setCycleCount(Animation.INDEFINITE); 
     rotate.setByAngle(360); 
     rotate.setInterpolator(Interpolator.LINEAR); 
     rotate.play(); 


     KeyValue one = new KeyValue(box.xProperty(), 125); 
     KeyValue two = new KeyValue(box.yProperty(), 100); 

     KeyValue three = new KeyValue(box.xProperty(), 125); 
     KeyValue four = new KeyValue(box.yProperty(), 100); 

     KeyValue five = new KeyValue(box.xProperty(), 250); 
     KeyValue six = new KeyValue(box.yProperty(), 0); 

     EventHandler<ActionEvent> stopRotate = new EventHandler<ActionEvent>(){ 
      @Override 
      public void handle(ActionEvent e){ 
       rotate.stop(); 
      } 
     }; 

     KeyFrame frame = new KeyFrame(Duration.millis(3000), one, two); 
     KeyFrame frametwo = new KeyFrame(Duration.millis(8000), three, four); 
     KeyFrame framethree = new KeyFrame(Duration.millis(11000), stopRotate, five, six); 
     Timeline timeline = new Timeline(); 
     timeline.getKeyFrames().addAll(frame, frametwo, framethree); 
     timeline.play(); 



     Group root = new Group(); 
     root.getChildren().addAll(box); 
     Scene scene = new Scene(root, 300, 250); 
     stage.setScene(scene); 
     stage.show(); 
    } 
} 

Wie Sie im Bild sehen können. Wenn Rectangle zur oberen rechten Ecke geht, wird es nicht richtig angezeigt. (Rote Linie zeigt nur den Weg des Rechtecks ​​(Bild bearbeitet))

Also, wie kann ich diese Animation bekommen? Also sollte das Rechteck am Ende im richtigen Winkel sein.

Answer 1

einfach die rotate Eigenschaft box animieren auch die Zeitleiste verwenden, anstatt eine separate RotateTransition Animation neben der Timeline Animation mit:

KeyFrame framethree = new KeyFrame(Duration.millis(11000) 
            /*, stopRotate*/, 
            new KeyValue(box.rotateProperty(), 360d * 11000d/2000d, Interpolator.LINEAR), 
           five, 
           six); 

---

Alternativ beide Animationen kombinieren mit ein ParallelTransition um sicherzustellen, dass beide Animationen laufen synchron:

// rotate.play(); 
... 

Timeline timeline = new Timeline(); 

ParallelTransition transitions = new ParallelTransition(timeline, rotate); 

EventHandler<ActionEvent> stopRotate = new EventHandler<ActionEvent>() { 
    @Override 
    public void handle(ActionEvent e) { 
     transitions.stop(); 
    } 
}; 
KeyFrame framethree = new KeyFrame(Duration.millis(11000), stopRotate, five, six); 

timeline.getKeyFrames().addAll(frame, frametwo, framethree); 
// timeline.play(); 
transitions.play(); 

---

komplette start Methoden angefordert als

Ansatz 1:

@Override 
public void start(Stage stage) { 
    Rectangle box = new Rectangle(0, 0, 50, 50); 

    KeyValue one = new KeyValue(box.xProperty(), 125); 
    KeyValue two = new KeyValue(box.yProperty(), 100); 

    KeyValue three = new KeyValue(box.xProperty(), 125); 
    KeyValue four = new KeyValue(box.yProperty(), 100); 

    KeyValue five = new KeyValue(box.xProperty(), 250); 
    KeyValue six = new KeyValue(box.yProperty(), 0); 

    KeyFrame frame = new KeyFrame(Duration.millis(3000), one, two); 
    KeyFrame frametwo = new KeyFrame(Duration.millis(8000), three, four); 
    KeyFrame framethree = new KeyFrame(Duration.millis(11000), five, six, new KeyValue(box.rotateProperty(), 360d * 11000d/2000d, Interpolator.LINEAR)); 
    Timeline timeline = new Timeline(); 
    timeline.getKeyFrames().addAll(frame, frametwo, framethree); 
    timeline.play(); 

    Group root = new Group(); 
    root.getChildren().addAll(box); 
    Scene scene = new Scene(root, 300, 250); 
    stage.setScene(scene); 
    stage.show(); 
} 

Ansatz 2:

@Override 
public void start(Stage stage) { 
    Rectangle box = new Rectangle(0, 0, 50, 50); 
    RotateTransition rotate = new RotateTransition(Duration.millis(2000), box); 
    rotate.setCycleCount(Animation.INDEFINITE); 
    rotate.setByAngle(360); 
    rotate.setInterpolator(Interpolator.LINEAR); 

    KeyValue one = new KeyValue(box.xProperty(), 125); 
    KeyValue two = new KeyValue(box.yProperty(), 100); 

    KeyValue three = new KeyValue(box.xProperty(), 125); 
    KeyValue four = new KeyValue(box.yProperty(), 100); 

    KeyValue five = new KeyValue(box.xProperty(), 250); 
    KeyValue six = new KeyValue(box.yProperty(), 0); 


    KeyFrame frame = new KeyFrame(Duration.millis(3000), one, two); 
    KeyFrame frametwo = new KeyFrame(Duration.millis(8000), three, four); 
    Timeline timeline = new Timeline(); 

    ParallelTransition transitions = new ParallelTransition(timeline, rotate); 

    EventHandler<ActionEvent> stopRotate = new EventHandler<ActionEvent>() { 
     @Override 
     public void handle(ActionEvent e) { 
      transitions.stop(); 
     } 
    }; 
    KeyFrame framethree = new KeyFrame(Duration.millis(11000), stopRotate, five, six); 

    timeline.getKeyFrames().addAll(frame, frametwo, framethree); 
    transitions.play(); 

    Group root = new Group(); 
    root.getChildren().addAll(box); 
    Scene scene = new Scene(root, 300, 250); 
    stage.setScene(scene); 
    stage.show(); 
} 

Answer 2

Ein Ansatz wäre die Büchse der Drehung in stopRotate() zurück:

EventHandler<ActionEvent> stopRotate = new EventHandler<ActionEvent>(){ 
    @Override 
    public void handle(ActionEvent e){ 
     rotate.stop(); 
     box.setRotate(0); 
    } 
};