Animating with Dynamic Timeline Values in JavaFX ...and a Scientific Fish Story from 1901

A scientific fish story, published in 1901, reports that pike fish living in a tank were separated from minnows by a glass plate.  After a while "a strike at the minnow had come to mean a bump on the nose... Instead of imputing their inability to the glass partition, they considered it some new and remarkable property of the minnows themselves."  Consequently the pike stopped trying to strike the minnows, even after the partition was removed.

I first heard that story when a speaker was illustrating the idea that we often get used to "the way things are", and consequently quit pursuing our passions and dreams.  But this isn't a motivational blog, so I'll stop the inspirational stuff right here and tie the fish story in with the subject of today's post :-)

If you've been developing in JavaFX for a while, you may have gotten used to the idea that dynamically changing values in Timeline key frames don't work as expected.  I was in the same boat (tank?), and instead used the action event handler of a KeyFrame when this kind of dynamic capability was required.  I was pleased to find out recently that this is no longer the case, by virtue of JIRA issue RT-2985 being addressed.

As shown in the screenshot below, I've modified the Metronome example to demonstrate this capability:

Taking a look at the code below, notice that clicking anywhere in the scene causes the values in the second KeyFrame of the Timeline to be assigned the coordinates of the mouse click.  The net effect is that one end of the blue line (which is bound to the variables that are interpolated by the timeline) move to where you clicked the mouse.  Here's the code listing for this example:

/*
 * MetronomeDynVals.fx - A simple example of animation using a Timeline
 * with dynamic KeyFrame time and values.
 *
 * Developed 2009 by James L. Weaver jim.weaver [at] javafxpert.com
 * as a JavaFX Script SDK 1.2 example
 */
package projavafx.metronome1.ui;

import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Slider;
import javafx.scene.input.MouseEvent;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

var durMs:Number = 1000;
var xVal:Number = 100;
var yVal:Number = 50;
var endXVal:Number = 300;
var endYVal:Number = 50;
var anim = Timeline {
  keyFrames: [
    KeyFrame {
      time: 0ms
      values: [
        xVal => 100,
        yVal => 50
      ]
    },
    KeyFrame {
      time: bind 2000ms - (durMs * 1ms)
      values: [
        xVal => endXVal tween Interpolator.LINEAR,
        yVal => endYVal tween Interpolator.LINEAR
      ]
    },
    KeyFrame {
      time: bind (2000ms - (durMs * 1ms))*2
      values: [
        xVal => 100,
        yVal => 50
      ]
    }
  ]
  repeatCount: Timeline.INDEFINITE
};

Stage {
  title: "Metronome Dynamic Values"
  visible: true
  scene: Scene {
    width: 400
    height: 500
    content: [
      Rectangle {
        width: 400
        height: 500
        fill: Color.TRANSPARENT
        onMousePressed: function(me:MouseEvent):Void {
          endXVal = me.x;
          endYVal = me.y;
        }
      },
      Line {
        startX: bind xVal
        startY: bind yVal
        endX: 200
        endY: 400
        strokeWidth: 4
        stroke: Color.BLUE
      },
      HBox {
        layoutX: 60
        layoutY: 420
        spacing: 10
        blocksMouse: true
        content: [
          Button {
            text: "Start"
            disable: bind anim.running
            action: function():Void {
              anim.playFromStart();
            }
          },
          Button {
            text: "Stop"
            disable: bind not anim.running
            action: function():Void {
              anim.stop();
            }
          },
          Slider {
            min: 100
            max: 2000
            width: 500
            value: bind durMs with inverse
          },
        ]
      }
    ]
  }
}

Dynamically Altering the time Variable of a KeyFrame

In addition to dynamically changing the values of a KeyFrame, you can also alter the value of its time variable.  To demonstrate this, the value of the Slider is bi-directionally bound to a variable from which the time value of the second KeyFrame is calculated.  Consequently, moving the slider changes the speed of the animation.

By the way, I didn't supply a Web Start link, because I'd like to encourage you to compile and run the application.  If you'd like a Web Start link, please leave a comment.

Regards,

Jim Weaver

P.S. Thanks to Eric M. Smith (who *does* have a motivational blog) for adding a third KeyFrame to this example (see his comment to this post).  This addition makes the behavior more metronome-like, and if you click in the lower-right area the pendulum exhibits some John Travolta/Saturday Night Fever dance-action :-)

Comments

[buy viagra]

Someone out there has got to know and have more experience with this than I do. I've looked all over the net and keep coming up with the same answer. Yeah, I know, Koi. We're kind of bored with the same old look though. We'd like to know what fish we can add to our fish/garden pond. Fish that can live outdoors and with Koi. Fish with color. Not plane old pond fish. Something with yellow would be great. Please Help!

[cheap kamagra]

I am thinking of buying a couple of fish, and I need different names so I can look them up online and see if they are cool enough for me. I want a red fish, a blue fish with black stripes.The fish must be freshwater, not need alot of care (Like a goldfish) and not be expensive.They can't be something that will die easily or something that is aggressive and eats other fish.

[generic propecia]

I looked at all the glasses, but none seem to match your description.
(Your description was very good, by the way - I understood it!) :-)

If you can't locate the ones you want, you could try contacting the
company Okki Fashion Eyewear

[shiva]

hi i am shiva. i am new to javafx.

i have a doubt. whether can we edit a sequence within timeline keyframe values.