Things I like about JavaFX: built-in animation support

Animating graphics is a rather protracted process with “traditional” languages (java, c++, c#…).

The logic needed to animate each object will involve (at minimum):

– Saving the old position of the object
– calculating the new position, function of time
– calling a graphics routine to erase object at old position
– calling a graphics routine to re-draw the object at new position

… this can easily lead to a fair amount of code, and complexity (and therefore potential bugs).

JavaFX simplifies the whole process significantly.

1- The bind keyword keeps data model and graphics interface synchronized at all time. Therefore no need to explicitly update the GUI when the underlying object position changes, JavaFX handles this for you. The snippet below draws a circle whose position will be updated whenever there’s a change in value of the fields x or y of the underlying object.

 class MyNode extends CustomNode 
var x:Number; 
var y:Number; 

public override function create():Node { 
translateX: bind x; 
translateY: bind y; 
content: [Circle {radius:10}] 

2- The Timeline class is used to specify the position of the animated object on screen at specific times. It’s as straightforward as specifying where the object should draw at specific intervals. JavaFX will interpolate between the specified times and positions, therefore no need to explicitly compute the object position, again it’s all done for you. The Timeline below will update the y field to be 70 at time t=0, 100 at time t=5. The values inbetween (times t=1,2,3,4…) will be interpolated.

public var timeline:Timeline = Timeline {
keyFrames: [
at(0s) {y=>70},
at(5s) {y=>100}

Just the two features described above (there is much, much more of course) make animation a breeze, and, dare I say, fun !


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s