java - 使用 JavaFX 的动画看起来不稳定

Question

我一直在尝试制作一个JavaFX应用程序，当单击鼠标时，它会向右移动一个方 block 。我正在使用 TranslateTransition 来实现此目的。动画看起来非常不稳定，我似乎不明白为什么。这是代码:

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

我使用 Java 8。

Answer 1

TranslateTransition 通过更新节点的 translateX 和 translateY 属性来执行动画。这些与 Rectangle 的 x 和 y 属性不同(首先通过查看其 x 来定位矩形> 和 y 属性，然后应用其转换，包括翻译)。

因此，在 onFinished 处理程序中，您将导致矩形跳转到翻译指定的位置，之后仍然应用翻译。如果要根据平移更新坐标，则应将平移添加到坐标中，然后将平移设置为零:

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

然后你可能只想

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