JavaFX 2.2中的顺序时间轴动画

Question

我目前正在尝试TimelineJavaFX 2.2中的类.该API的文档指出,Timeline

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

所以我想我可以SequentialTransition通过将KeyFrame特定顺序的一些对象放入其中来创建类似动画TimeLine.每个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参数不代表持续时间,而是表示该帧发生时的时间线上的瞬间; 您可以将其视为自时间线开始以来的持续时间.时间轴从其所有KeyValues的时间零延伸到其最大时间,并且它插入在这些帧之间的所有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();

如果需要,您可以用a ScaleTransition和a 替换两个时间轴TranslateTransition.