Sequential Timeline Animation in JavaFX 2.2

Question

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

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

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.

Have a look at this code:

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

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).

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

Answer 1

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.

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.

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

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