Reading 'tween the Lines - Simplified JavaFX Script Animation Syntax

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:

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

Comments

[hansi]

this doesn't work when i paste it into javafx pad.
public attribute x2Val = 100;
gives me "encountered = at line 13"

also.... can you put the applet instead of the image? then i wouldn't have to copy/paste the code, but could just play with it...

[Yummy]

Dear James :
I am a reader of your book. I have a problem that i encountered. I want to have a table that with the editable tablecells, but i can't found any API for this. Would you please help me to find out the sulotion?
Thanks.

[goddard]

my bad, i overlooked the change of the animation classes as they moved them to javafx.animation package. sorry.

[goddard]

Hi Jim,

what version of JFX compiler do you use and what version of JDK/JRE? I'm using:
java version "1.5.0_07"
Java(TM) 2 Runtime Environment, Standard Edition (build 1.5.0_07-164)
Java HotSpot(TM) Client VM (build 1.5.0_07-87, mixed mode, sharing)

on my Mac and the latest build (14.4.08) of JFX compiler and during compilation I get following errors:
ip-89-103-132-47:~/Documents/projectJFX goddard$ javafxc -target 1.5 AnimationExample.fx
AnimationExample.fx:11: cannot find symbol
symbol : variable time
location: class javafx.ui.animation.KeyFrame
time: 0s;
^
AnimationExample.fx:12: cannot find symbol
symbol : variable values
location: class javafx.ui.animation.KeyFrame
values: x2Val => 100
^
AnimationExample.fx:14: cannot find symbol
symbol : variable time
location: class javafx.ui.animation.KeyFrame
time: 1s
^
AnimationExample.fx:15: cannot find symbol
symbol : variable values
location: class javafx.ui.animation.KeyFrame
values: x2Val => 300 tween Interpolator.LINEAR
^
AnimationExample.fx:15: cannot find symbol
symbol : variable Interpolator
location: class AnimationExample.MetronomeModel
values: x2Val => 300 tween Interpolator.LINEAR
^
AnimationExample.fx:17: cannot find symbol
symbol : variable INDEFINITE
location: class javafx.ui.animation.Timeline
repeatCount: Timeline.INDEFINITE
^
AnimationExample.fx:48: package metronome does not exist
metronome.anim.pause();
^
7 errors

Any idea what can be wrong?

[Jim Weaver]

For instructions on obtaining and using the JavaFX Script compiler, follow the instructions on this tutorial:
http://java.sun.com/developer/technicalArticles/scripting/javafx/ria_1/

Or this weblog link:
http://learnjavafx.typepad.com/weblog/2007/11/compiler-cheat.html

[cease]

Why don't you put a link where we can try a demo out for all this stuff ? or am I missing it on the page ?