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

[generic propecia]

Okay, I'm feeling all Will Smith in Six Degrees with this question, so
I'm signing off. Thanks for the full complement and I look forward to
working with you in the future.

Again, best of luck on the project!

[Adam]

Hi Jim,

I am also getting the same sorts of errors as goddard despite following the compiler steps. So it can't find the imported packages? Could you shed any light on this.

Thanks

[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.