JavaFX 动画在时间线中同时播放

Question

我对 JavaFX 还很陌生。我试图使这个时间线中的每个关键帧发生在前一个关键帧完成之后。到目前为止，每个步骤都像我希望的那样相继发生。但是，当我播放动画时，rotateBack 关键帧就开始旋转我的对象。有关如何使rotateBack仅在moveToRight之后播放的任何提示？另外，我希望rotateBack 在 moveToTop 播放之前完成其旋转。谢谢。

Pane selectedPane = select_pane.getValue();
                    
    double rootWidth = root_pane.getWidth();
    double rootHeight = root_pane.getHeight();
    double sixthWidth = rootWidth / 6;

    KeyValue moveTopLeftX = new KeyValue(selectedPane.layoutXProperty(), 0);
    KeyValue moveDownY = new KeyValue(selectedPane.layoutYProperty(), root_pane.getHeight()                   -    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(Duration.seconds(3), moveTopLeftX, moveToTopY);
    KeyFrame moveToRight = new KeyFrame(Duration.seconds(2), moveRightX);
    KeyFrame rotateBack = new KeyFrame(Duration.seconds(3), rotate180);
    KeyFrame moveToBottom = new KeyFrame(Duration.seconds(6), moveDownY);
    KeyFrame moveToTop = new KeyFrame(Duration.seconds(6), moveToTopY);

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

    timeline.play();

到目前为止我所尝试的内容如上面的代码所示。非常感谢任何提示。

Answer 1

要仅在一个关键帧完成后播放关键帧，您可以创建不同的时间轴，并在时间轴.setOnFinished() 函数中播放下一个关键帧。
对于您的示例，它看起来像这样：

Pane selectedPane = select_pane.getValue();
                
double rootWidth = root_pane.getWidth();
double rootHeight = root_pane.getHeight();
double sixthWidth = rootWidth / 6;

KeyValue moveTopLeftX = new KeyValue(selectedPane.layoutXProperty(), 0);
KeyValue moveDownY = new KeyValue(selectedPane.layoutYProperty(), root_pane.getHeight()                   -    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(Duration.seconds(3), moveTopLeftX, moveToTopY);
KeyFrame moveToRight = new KeyFrame(Duration.seconds(2), moveRightX);
KeyFrame rotateBack = new KeyFrame(Duration.seconds(3), rotate180);
KeyFrame moveToBottom = new KeyFrame(Duration.seconds(6), moveDownY);
KeyFrame moveToTop = new KeyFrame(Duration.seconds(6), moveToTopY);

Timeline timelineStart = new Timeline(startFrame, moveToBottom, moveToRight);

Timeline timelineRotateBack = new Timeline(rotateBack);

Timeline timelineMoveToTop = new Timeline(moveToTop);

timelineStart.setOnFinished(new EventHandler() {
            @Override
            public void handle(Event event) {
                timelineRotateBack.play();
            }
        });

timelineRotateBack.setOnFinished(new EventHandler() {
            @Override
            public void handle(Event event) {
                timelineMoveToTop.play();
            }
        });

timelineStart.play();

这里它将首先播放所有这些关键帧（startFrame、moveToBottom、moveToRight），当所有动画完成时，它将播放rotateBack KeyFrame，当这个动画完成时，它将播放moveToTop