Jim has posted 66 posts at DZone. You can read more from them at their website. View Full User Profile

Reading 'tween the Lines - Simplified JavaFX Script Animation Syntax

04.16.2008
| 5335 views |
  • submit to reddit

As mentioned in the first Tetris post, the JavaFX Script animation syntax is undergoing simplification.  Today, I'd like to show you a very basic example of this simplified syntax.  As shown in the screenshot below, this example consists of a line that moves back and forth like a metronome:

Metronome

When you click the Start button, the top of the line will move from one side to the other in one second, and then travel back to its starting place in one second, repeating this indefinitely.  Clicking the Pause button causes the animation to pause, and clicking Resume causes a paused animation to resume.  Clicking the Stop button stops the animation, requiring it to be started again.  Take a look at the code for this example to see the animation-related syntax and functions:

 

/*
* AnimationExample.fx
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to serve as a compiled JavaFX Script example.
*/

import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.animation.*;

class MetronomeModel {
public attribute x2Val = 100;
public attribute anim =
Timeline {
autoReverse: true
keyFrames: [
KeyFrame {
time: 0s
values: x2Val => 100
},
KeyFrame {
time: 1s
values: x2Val => 300 tween Interpolator.LINEAR
}
]
repeatCount: Timeline.INDEFINITE
};
}

Frame {
var metroModel =
MetronomeModel {}
title: "Animation Example"
width: 400
height: 500
visible: true
content:
BorderPanel {
center:
Canvas {
content:
Line {
x1: 200
y1: 400
x2: bind metroModel.x2Val
y2: 100
strokeWidth: 5
stroke: Color.BLUE
}
}
bottom:
FlowPanel {
content: [
Button {
text: "Start"
action:
function():Void {
metroModel.anim.start();
}
},
Button {
text: "Pause"
action:
function():Void {
metroModel.anim.pause();
}
},
Button {
text: "Resume"
action:
function():Void {
metroModel.anim.resume();
}
},
Button {
text: "Stop"
action:
function():Void {
metroModel.anim.stop();
}
}
]
}
}
}


Animation related concepts in this example

The Timeline class allows you to articulate the "key frames" that will be in the animation.  You can have as many as you need, but in this simple case we have two:

  • One KeyFrame that occurs at the beginning of the animation.  Note the use of the new literal syntax for durations, in this case 0s, which means 0 seconds.  100ms would be 100 milliseconds, and 3m would represent 3 minutes.
  • One KeyFrame that occurs 1 second after the animation starts.

The autoReverse attribute allows you to specify that the animation should run in reverse when it reaches the last KeyFrame.  The repeatCount attribute allows you to control how many times the animation will run, in this case, indefinitely.

The values attribute of the KeyFrame uses the new, more concise, animation syntax.  The values attribute in the first KeyFrame sets the inital value of the x2Val variable to 100. The values attribute in the second KeyFrame causes the x2Val variable to change in value between its previous value to 300, 1 second after the animation started.  Because of the Interpolator.LINEAR constant, this change of value will be linear (as opposed to, for example, slowing down at the end, which is what Interpolator.EASEOUT would do).  The x2 attribute of the Line is bound to this changing x2Val variable, which is what causes the line to move on the screen.

By the way, I'm furiously preparing JavaFX presentations and demos (as are lots of other folks) for JavaOne, so please excuse the lapse of a few days here and there between posts.  I'll be blogging daily from JavaOne, as there will be lots to tell you ;-)

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

Immediate eBook (PDF) download available at the book's Apress site

Published at DZone with permission of its author, Jim Weaver.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: