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 :-)
