Question

在学习 javafx.animation API时，我尝试了以下代码，它只需在（100,100）绘制一个矩形，在2秒内将其转换为（200,200）。

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

public class SimpleAnimation extends Application {

  @Override
  public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root, 500, 500);
    stage.setScene(scene);

    VBox vb = new VBox();

    Rectangle rect = new Rectangle (100, 100, 100, 100);
    rect.setArcHeight(50);
    rect.setArcWidth(50);
    rect.setFill(Color.VIOLET);

    final Duration SEC_2 = Duration.millis(2000);

    System.out.println("Location before relocation = "+rect.getX()+","+rect.getY()+")");

    TranslateTransition tt = new TranslateTransition(SEC_2,rect);
    tt.setByX(100f);
    tt.setByY(100f);
    tt.setOnFinished(new EventHandler<ActionEvent>() {
                       @Override
                       public void handle(ActionEvent event) {
                         System.out.println("Location after relocation = " + rect.getX() + "," + rect.getY() + ")");
                       }
                     });
    tt.play();

    vb.getChildren().add(rect);

        scene.setRoot(vb);
        stage.show();
      }

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

在此translationTransition之后，矩形的（x，y）坐标应为（200,200）对吗？为了检查这一点，我尝试在 OnFinished（）事件处理程序中打印坐标不知道为什么它仍会打印（100,100）？

enter image description here

Answer 1

来自Javadocs：

此Transition创建一个跨越它的移动/翻译动画持续时间。这是通过更新translateX，translateY和来完成的以规则的间隔翻译节点的变量。

因此，如果您在转换结束时检查translateX和translateY属性，您会发现它们都等于100;即矩形已从原始位置翻译成100个单位。

根据您想要做的事情，您可以使用translateX和translateY属性，也可以使用boundsInParent属性，该属性提供节点的边界在其父坐标系中（因此包括任何变换，例如翻译）。

如果您希望直接从动画更改x的{{1}}和y属性，请使用Timeline，以便您指定属性（或属性）改变：

Rectangle

请注意，为此，我添加了调用import javafx.animation.KeyFrame; import javafx.animation.KeyValue; import javafx.animation.Timeline; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; import javafx.util.Duration; public class SimpleAnimation extends Application { @Override public void start(Stage stage) { VBox vb = new VBox(); Rectangle rect = new Rectangle(100, 100, 100, 100); rect.setManaged(false); rect.setArcHeight(50); rect.setArcWidth(50); rect.setFill(Color.VIOLET); final Duration SEC_2 = Duration.millis(2000); System.out.println("Location before relocation = " + rect.getX() + "," + rect.getY() + ")"); Timeline timeline = new Timeline(); KeyFrame end = new KeyFrame(SEC_2, new KeyValue(rect.xProperty(), 200), new KeyValue(rect.yProperty(), 200)); timeline.getKeyFrames().add(end); timeline.setOnFinished(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { System.out.println("Location after relocation = " + rect.getX() + "," + rect.getY() + ")"); } }); timeline.play(); vb.getChildren().add(rect); Scene scene = new Scene(vb, 500, 500); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } }。由于rect.setManaged(false)中的Rectangle管理其子节点的布局，因此更改VBox和x属性将无效。（另一种选择是将y替换为VBox，而Pane并不管理其子节点的位置。）

Answer 2

动画完成后，将动画节点移动到翻译坐标：

tt.setOnFinished(event -> {
    // The transition works by manipulating translation values,
    // After the transition is complete, move the node to the new location
    // and zero the translation after relocating the node.
    rect.setX(rect.getX() + rect.getTranslateX());
    rect.setY(rect.getY() + rect.getTranslateY());
    rect.setTranslateX(0);
    rect.setTranslateY(0);
});

此外，您将矩形放在VBox中，如果您希望矩形的X＆amp; Y坐标表示任何内容，请不要这样做。 VBox是一个布局管理器，它将忽略矩形的X＆amp; Y坐标（因为它将使其内部的所有内容垂直布局）。而是在不执行布局的父级中执行动画（例如，组或窗格）。

可执行样本：

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class SimpleAnimation extends Application {

    @Override
    public void start(Stage stage) {
        Rectangle rect = new Rectangle(100, 100, 100, 100);
        rect.setArcHeight(50);
        rect.setArcWidth(50);
        rect.setFill(Color.VIOLET);

        System.out.println("Location before relocation = " + rect.getX() + "," + rect.getY() + ")");

        TranslateTransition tt = new TranslateTransition(
              Duration.seconds(2), 
              rect
        );

        tt.setByX(100f);
        tt.setByY(100f);
        tt.setOnFinished(event -> {
            rect.setX(rect.getX() + rect.getTranslateX());
            rect.setY(rect.getY() + rect.getTranslateY());
            rect.setTranslateX(0);
            rect.setTranslateY(0);

            System.out.println("Location after relocation = " + rect.getX() + "," + rect.getY() + ")");
        });

        tt.play();

        Scene scene = new Scene(new Group(rect), 500, 500);
        stage.setScene(scene);

        stage.show();
    }

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

TranslateTransition不会改变（X，Y）坐标

2 个答案: