Knowing the State of a JavaFX Script Animation

In the Reading 'tween the Lines - Simplified JavaFX Script Animation Syntax post, I showed you how to start, stop, pause and resume an animation.  In this post I'm going to show you how to read the state of the animation (i.e. whether is it running, and whether it is paused).  To demonstrate this, I modified the metronome-like example from the previous post.  Here's a screenshot of today's example when it first starts up:

Notice that only the Start button is enabled.  As shown in the screenshot below, when you click the Start button the animation starts, and the enabled state of some of the buttons change:

When you click the Pause button, it becomes enabled and the Resume button is disabled:

Clicking the Stop button causes the animation to stop and for the buttons to have the same states shown in the first screenshot.  In the code for this example, notice that the buttons' enabled attributes are bound to the running and paused attributes of the Timeline instance:

/*
 *  Metronome.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.RED
            }
        }
      bottom:
        FlowPanel {
          content: [
            Button {
              text: "Start"
              enabled: bind not metroModel.anim.running
              action:
                function():Void {
                  metroModel.anim.start();
                }
            },
            Button {
              text: "Pause"
              enabled: bind not metroModel.anim.paused and
                                metroModel.anim.running 
              action:
                function():Void {
                  metroModel.anim.pause();
                }
            },
            Button {
              text: "Resume"
              enabled: bind metroModel.anim.paused
              action:
                function():Void {
                  metroModel.anim.resume();
                }
            },
            Button {
              text: "Stop"
              enabled: bind metroModel.anim.running
              action:
                function():Void {
                  metroModel.anim.stop();
                }
            }
          ]
        }
    }
}

If you have any question, please post a comment.  Also, if you'll be at JavaOne 2008, please attend my JavaFX Script Progamming Language Tutorial session and introduce yourself afterward!

 

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 propicia]

i like this part of the post:"In the Reading 'tween the Lines - Simplified JavaFX Script Animation Syntax post, I showed you how to start, stop, pause and resume an animation. In this post I'm going to show you how to read the state of the animation (i.e. whether is it running, and whether it is paused). " is very good

[Jim T]

I have tried this example (metronome 1) in your Pro Java 1.2 book (using javafx 1.2.1)
tested on both mac and windows, as standard, web start and browser contexts.

The Play and Pause buttons do not update their their visual state properly. For example if you click start then stop, the start button remains grayed out. However, it is enabled and can be clicked to start again.

Oddly, the Resume and Stop buttons behave properly.

Can you explain this behavior?

[James Weaver]

Mario,

The paused and running attributes have been recently added to the Timeline class, so the plug-in that you're using must not have the most recent JavaFX runtime classes. I would try updating the plug-in.

[Mario]

Hi,

I just get an exception when I try to start this sample from Netbeans 6.1. The symbols running and paused are unknown. But it works when I compile it with the JavaFX compiler and launch it from the commandline.