JavaFX 2.2 中的顺序时间轴动画

Question

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

按照 KeyFrame.time 指定的顺序依次处理单个 KeyFrame

所以我想我可以通过将一些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 替换这两条时间线。