« previous 1 2 3 4 5 next »

Animating the FX

The real power is that you can bind the attributes of the UI elements to variables. Let's demonstrate that by making our "Hi" application bounce its text. First, we will need to add a fixed size to our Stage, by adding

    width:250
    height:250

after the title property so our text has somewhere to bounce. Then we need to make the y position of our text bind to a variable. Before the Stage declaration we add

    var ypos=30;

to define our variable, and where we set the y position for the text with "y: 30" we change that to

    y: bind ypos

If we run the code again, apart from the bigger window, nothing has changed. Now comes the animation code. We need to import the animation code first;

    import javafx.animation.Interpolator;
    import javafx.animation.KeyFrame;
    import javafx.animation.Timeline;

and then we add this code at the end;

    Timeline { 
	keyFrames: [
	    KeyFrame { 
		time: 0s 
		values: ypos => 25 tween Interpolator.EASEBOTH },
	    KeyFrame { 
		time: 2s 
		values: ypos => 210 tween Interpolator.EASEBOTH },
	]
	autoReverse: true
	repeatCount: Timeline.INDEFINITE
    }.play

This creates an animation, defined in terms of keyframes. Each keyframe defines the state of our stage at set times. So at 0 seconds, ypos will be 25, and at 2 seconds in it will be 210. The "tween Interpolator.EASEBOTH" tells JavaFX how to fill in the other 1.99 seconds of activity. The autoreverse property tells JavaFX when it gets to the last keyframe, run the keyframes in reverse. The repeatCount says how long to perform this animation, in this case forever, or until the program is halted.

The animated "Hi From Heise" JavaFX program running; the text moves smoothly though you can't see it in a screenshot Finally, we have ".play;" to make this animation start and do its thing. Running our example now makes our "Hi" text bounce smoothly from to top bottom and back again; it's that easy to get animating with JavaFX.

Some things are worth looking at twice in this code. For example, notice that the time durations are expressed as "0s" and "2s". This is because JavaFX has a Duration variable type which understands times expressed as a number and a time unit, so "1ms" is one millisecond. Another thing to notice is the binding. It isn't tied to the UI declarations, but is a more general language mechanism. For example, with this code...

    var x=10;
    var y=20;
    var z=bind x+y;

The variable z is bound to the result of x+y and whenever x or y is changed, z is updated. Adding the word "lazy" after bind means that whenever z is evaluated, it is calculated at that time. This is just part of the feature set of the JavaFX language that makes it much more amenable to developing interactive, animated user interfaces.

So, Sun has equipped JavaFX with a powerful, Java compatible, language to build RIAs (Rich Internet Applications), one which could in the future be a part of desktop application developers toolkits. But there was another issue which Sun needed to resolve; deployment.

« previous 1 2 3 4 5 next »