如何在JavaFX中使用TranslateTransition实现两次顺序直角平移动画效果

你当前代码的问题是两个TranslateTransition都直接调用了play()方法，会同时启动，最终形成斜向移动的效果，没法实现先横移再竖移的直角转向。
要实现顺序执行两个平移动画，你可以用JavaFX提供的SequentialTransition类，它可以将多个动画按添加顺序串联执行，前一个动画结束后才会启动下一个。

修改后的完整代码 #

package application;

import javafx.animation.SequentialTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
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 {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root,350,350);
            Rectangle rect = new Rectangle(0, 0, 40, 40);
            Rectangle point = new Rectangle(0, 0, 10, 10);
            Rectangle point2 = new Rectangle(300, 0, 10, 10);
            Rectangle point3 = new Rectangle(300, 300, 10, 10);
            root.getChildren().addAll(rect, point, point2, point3);

            // 第一个平移动画：横向右移
            TranslateTransition tt = new TranslateTransition(new Duration(1000), rect);
            tt.setFromX(0);
            tt.setFromY(0);
            tt.setToX(300);
            tt.setToY(0);

            // 第二个平移动画：竖向下移
            TranslateTransition tt2 = new TranslateTransition(new Duration(1000), rect);
            // 无需额外设置起始位置，第一个动画结束后的位置会自动作为第二个动画的起点
            tt2.setToY(300);

            // 串行动画容器，按顺序执行两个平移
            SequentialTransition sequentialTransition = new SequentialTransition();
            sequentialTransition.getChildren().addAll(tt, tt2);
            sequentialTransition.play();

            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

其他实现方案 #

如果不想使用串行动画容器，也可以给第一个TranslateTransition添加结束事件监听器，在第一个动画结束后再启动第二个动画，写法如下：

tt.setOnFinished(event -> {
    tt2.play();
});
tt.play();

两种方案都可以实现你需要的直角转向顺序平移效果。

内容的提问来源于stack exchange，提问作者PrimeOver