JavaFX Timeline动画顺序问题：rotateBack提前启动及流程调整

你的问题出在KeyFrame 的时间参数是相对于 Timeline 启动的绝对时间，不是前一个动画结束后的延迟时间。比如 rotateBack 设置的是 Duration.seconds(3)，意味着 Timeline 启动3秒后就执行这个旋转动画，而 moveToRight 是2秒完成，所以两者会重叠。

要实现严格的顺序执行，有两种简单方法：

方法一：手动计算累计时间 #

逐个累加每个动画的时长，把每个 KeyFrame 的时间设为前面所有动画的总时长，确保前一个完成后才启动下一个：

Pane selectedPane = select_pane.getValue();

double rootWidth = root_pane.getWidth();
double rootHeight = root_pane.getHeight();
double sixthWidth = rootWidth / 6;

// 定义每个动画的时长
Duration startDuration = Duration.seconds(3);
Duration moveRightDuration = Duration.seconds(2);
Duration rotateDuration = Duration.seconds(3);
Duration moveBottomDuration = Duration.seconds(6);
Duration moveTopDuration = Duration.seconds(6);

// 计算每个 KeyFrame 的起始时间（累计前面所有时长）
Duration moveRightStart = startDuration;
Duration rotateStart = moveRightStart.add(moveRightDuration);
Duration moveBottomStart = rotateStart.add(rotateDuration);
Duration moveTopStart = moveBottomStart.add(moveBottomDuration);

// 创建 KeyValue 和 KeyFrame
KeyValue moveTopLeftX = new KeyValue(selectedPane.layoutXProperty(), 0);
KeyValue moveDownY = new KeyValue(selectedPane.layoutYProperty(), rootHeight - selectedPane.getHeight());
KeyValue moveRightX = new KeyValue(selectedPane.layoutXProperty(), sixthWidth);
KeyValue rotate180 = new KeyValue(selectedPane.rotateProperty(), 180);
KeyValue moveToTopY = new KeyValue(selectedPane.layoutYProperty(), 0);

KeyFrame startFrame = new KeyFrame(startDuration, moveTopLeftX, moveToTopY);
KeyFrame moveToRight = new KeyFrame(moveRightStart.add(moveRightDuration), moveRightX);
KeyFrame rotateBack = new KeyFrame(rotateStart.add(rotateDuration), rotate180);
KeyFrame moveToBottom = new KeyFrame(moveBottomStart.add(moveBottomDuration), moveDownY);
KeyFrame moveToTop = new KeyFrame(moveTopStart.add(moveTopDuration), moveToTopY);

Timeline timeline = new Timeline(startFrame, moveToRight, rotateBack, moveToBottom, moveToTop);
timeline.play();

注意：每个 KeyFrame 的时间是起始时间+自身时长，这样动画会从起始时间开始，持续到该时间点完成。

方法二：用 SequentialTransition 组合独立 Timeline（更直观） #

把每个动画拆成单独的 Timeline，然后用 SequentialTransition 按顺序执行，新手更容易理解和维护：

Pane selectedPane = select_pane.getValue();

double rootWidth = root_pane.getWidth();
double rootHeight = root_pane.getHeight();
double sixthWidth = rootWidth / 6;

// 1. 初始移动到左上角
Timeline startTimeline = new Timeline(
    new KeyFrame(Duration.seconds(3),
        new KeyValue(selectedPane.layoutXProperty(), 0),
        new KeyValue(selectedPane.layoutYProperty(), 0)
    )
);

// 2. 向右移动
Timeline moveRightTimeline = new Timeline(
    new KeyFrame(Duration.seconds(2),
        new KeyValue(selectedPane.layoutXProperty(), sixthWidth)
    )
);

// 3. 旋转180度
Timeline rotateTimeline = new Timeline(
    new KeyFrame(Duration.seconds(3),
        new KeyValue(selectedPane.rotateProperty(), 180)
    )
);

// 4. 移动到底部
Timeline moveBottomTimeline = new Timeline(
    new KeyFrame(Duration.seconds(6),
        new KeyValue(selectedPane.layoutYProperty(), rootHeight - selectedPane.getHeight())
    )
);

// 5. 移动到顶部
Timeline moveTopTimeline = new Timeline(
    new KeyFrame(Duration.seconds(6),
        new KeyValue(selectedPane.layoutYProperty(), 0)
    )
);

// 按顺序执行所有动画
SequentialTransition sequentialTransition = new SequentialTransition(
    startTimeline, moveRightTimeline, rotateTimeline, moveBottomTimeline, moveTopTimeline
);
sequentialTransition.play();

这种方式每个动画都是独立的，顺序清晰，后期修改单个动画时长或顺序都很方便。

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