JavaFX Animation


I've been going through some JavaFX tutorials and I have a few questions about the animation system used.

    Timeline timeline = new Timeline();
    Node circle = circles;
                new KeyFrame(Duration.ZERO, // set start position at 0
                   new KeyValue(circle.translateXProperty(), random() * 800),
                   new KeyValue(circle.translateYProperty(), random() * 600)),

                new KeyFrame(new Duration(40000), // set end position at 40s
                   new KeyValue(circle.translateXProperty(), random() * 800),
                   new KeyValue(circle.translateYProperty(), random() * 600)));

    // play 40s of animation;;

What I didn't understand were the use of the translateXProperty() functions (and Y) as well as the purpose of the random numbers in the KeyValue constructor. The way I understood the process to work was you created two KeyFrames which you interpolated between the two frame and that the KeyValue objects simply different states of your nodes, but I'm not sure that's correct.

The tutorial I'm looking at is here:

I just used one circle in the code above to simplify things.

6/9/2012 6:37:17 PM

Accepted Answer

The code moves (translates) a circle from one random location to another over a period of 40 seconds. The first keyframe specifies the starting translation co-ordinate. The second keyframe specifies the end translation co-ordinate. The JavaFX animation subsystem takes care of interpolating the translation key values across the intermediate frames behind the scenes.

The code could have animated different properties such as scale or rotation. And it could have used absolute values rather than random ones. It just used the properties and values it did because they specify the effect the author is trying to achieve in this instance.

6/9/2012 7:12:25 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow