JavaFX 2.2 中的顺序时间轴动画

Question

我目前正在JavaFX 2.2中试用Timeline类。API 文档指出，Timeline

按照 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();

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

那么有没有办法改变这种行为，以便KeyFrames按顺序"播放"呢？

Answer 1

KeyFrames表示动画中的时刻（"帧"）。time 参数表示的不是持续时间，而是该帧发生时时间轴上的时刻;您也许可以将其视为自时间线开始以来的持续时间。时间轴从时间零延伸到其所有键值的最大时间，并在这些帧之间插入其所有关键帧中定义的属性值。

因此，您的代码会创建一个长度为 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。