JavaFX 2.2中的顺序时间线动画 [英] Sequential Timeline Animation in JavaFX 2.2

问题描述

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

I am currently trying out the Timeline class in JavaFX 2.2. The API-Documentation states that the Timeline

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

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

所以我想我可以通过将某些KeyFrame对象以特定顺序放入TimeLine中来创建类似SequentialTransition的动画.每个KeyFrame都有其自己的Duration.那就是我的问题开始的地方:Duration是什么? KeyFrame应该开始的偏移量还是KeyFrame要进行动画处理的实际"持续时间?我认为那时的API还不太清楚.

So i thought i could create a SequentialTransition-like animation by putting some KeyFrame objects in a specific order into the TimeLine. Each KeyFrame has its own Duration. Thats where my problems start: what is Duration? The offset at which the KeyFrame should start or the "real" duration that the KeyFrame takes to animate? I think the API is not very clear at that point.

看看这段代码:

    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的移动"动画.该代码同时(t = 0s)启动每个KeyFrame的动画，但是它们的长度不同(因为Duration设置不同).

My goal is to show the "grow"-animation of KeyFrame kf1 first, then the "move"-animation of kf2. The code starts the animation of every KeyFrame at the same time (t=0s), but with different lengths (because Duration is set different).

那么有什么办法可以改变这种行为，以使KeyFrames能够按顺序播放"?

So is there any way to change this behaviour so that the KeyFrames are "played" in a sequential order?

推荐答案

KeyFrames表示动画中的瞬间(帧"). time参数不代表持续时间，而是代表该帧发生在时间轴上的时刻.您也许可以将其视为时间轴开始以来的持续时间.时间轴从零开始一直扩展到其所有KeyValue的最大时间，并且在这些帧之间的所有KeyFrame中插值了其属性值.

KeyFrames represent instants ("Frames") in the animation. The time parameter represents not a duration but the instant on the timeline when that frame occurs; you can perhaps think of it as the duration since the start of the timeline. The timeline extends from time zero to the maximum time of all its KeyValues, and it interpolates the values of the properties defined in all its KeyFrames between those Frames.

因此，您的代码创建了一个长度为5秒的时间轴.它会在这5秒钟内对centerX进行插值，使其从0移至200；在最初1.5秒钟内，scaleX和scaleY属性将由1增至5.

So your code creates a timeline of length 5 seconds. It interpolates the centerX to move from 0 to 200 over those 5 seconds, and the scaleX and scaleY properties to increase from 1 to 5 over the first 1.5 seconds.

要定义所需的顺序行为，请使用 SequentialTransition :

To define the sequential behavior you are looking for, use a 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

You could replace the two Timelines with a ScaleTransition and a TranslateTransition if you wanted.

这篇关于JavaFX 2.2中的顺序时间线动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！