javafx-2 - JavaFX 2.2 中的顺序时间轴动画

Question

我目前正在试用 JavaFX 2.2 中的 Timeline 类。 API-Documentation声明 Timeline

processes individual KeyFrame sequentially, in the order specified by KeyFrame.time

所以我想我可以通过将一些 KeyFrame 对象按特定顺序放入 TimeLine 来创建类似 SequentialTransition 的动画。每个KeyFrame 都有自己的Duration。这就是我的问题开始的地方:Duration 是什么？ KeyFrame 应该开始的偏移量或 KeyFrame 动画所需的“真实”持续时间？我认为当时的 API 还不是很清楚。

看看这段代码:

    Group g = new Group();
    Circle c = new Circle(15);
    c.setTranslateX(150);
    c.setTranslateY(150);
    g.getChildren().add(c);

    Timeline tl = new Timeline();
    KeyValue kv1 = new KeyValue(c.scaleXProperty(), 5);
    KeyValue kv2 = new KeyValue(c.scaleYProperty(), 5);
    KeyFrame kf1 = new KeyFrame(Duration.millis(1500), kv1,kv2);

    KeyValue kv3 = new KeyValue(c.centerXProperty(), 200);
    KeyFrame kf2 = new KeyFrame(Duration.millis(5000), kv3);
    tl.getKeyFrames().addAll(kf1,kf2);

    tl.play();

    primaryStage.setScene(new Scene(g,500,500));
    primaryStage.show();

我的目标是首先显示 KeyFrame kf1 的“成长”动画，然后是 kf2 的“移动”动画。代码同时启动每个KeyFrame的动画(t=0s)，但长度不同(因为Duration设置不同)。

那么有什么办法可以改变这种行为，使 KeyFrames 按顺序“播放”？

Answer 1

KeyFrames 表示动画中的瞬间(“帧”)。 time 参数表示的不是持续时间，而是时间轴上该帧发生的瞬间；您也许可以将其视为自时间线开始以来的持续时间。时间线从时间 0 延伸到其所有 KeyValue 的最大时间，并在这些帧之间插入其所有 KeyFrame 中定义的属性值。

因此，您的代码会创建一个长度为 5 秒的时间线。它对 centerX 进行插值，使其在这 5 秒内从 0 移动到 200，并且 scaleX 和 scaleY 属性在前 1.5 秒内从 1 增加到 5。

要定义您正在寻找的顺序行为，请使用 SequentialTransition :

KeyValue kv1 = new KeyValue(c.scaleXProperty(), 5);
KeyValue kv2 = new KeyValue(c.scaleYProperty(), 5);
KeyFrame kf1 = new KeyFrame(Duration.millis(1500), kv1,kv2);
Timeline grow = new Timeline();
grow.getKeyFrames().add(kf1);

KeyValue kv3 = new KeyValue(c.centerXProperty(), 200);
KeyFrame kf2 = new KeyFrame(Duration.millis(5000), kv3);
Timeline move = new Timeline();
move.getKeyFrames().add(kf2);

SequentialTransition sequence = new SequentialTransition(grow, move);
sequence.play();

您可以将两条时间线替换为 ScaleTransition和 TranslateTransition如果你愿意的话。