| simpleVar 在该关键帧中的值是 200，并且是通过线性插值（Interpolator.LINEAR）的方式来计算中间值。因此，在 1 秒和 1.5 秒的关键帧中，simpleVar 的值就是根据线性插值的方式计算出来的。
动画实例
下面通过一个实例来说明如何使用 JavaFX Script 来编写动画。在这个动画实例中，将演示地球自转和月球围绕地球的转动。动画的演示效果见 图 2 所示。需要说明的是 图 2 中的地球和月球的大小以及月球的运行轨道均为示意。
图 2. 地球自转和月球围绕地球运转的动画
JavaFX Script高级特性(6)
时间:2011-02-12 IBM 成富
该动画的源代码如代码清单 12所示。
清单 12. 地球和月球运行示意动画的源代码
var earthImages = for (i in [1..7]) {
Image {url : "file:images/earth{i}.png"}
}
var moonImage = Image {url : "file:images/moon.gif"};
var currentEarthImage = earthImages[0];
var earthTimeline = Timeline {
keyFrames: for (image in earthImages) {
KeyFrame {
time: 300ms* indexof image
action: function(){currentEarthImage=image;}
}
},
repeatCount : Timeline.INDEFINITE
}
var moonX = 525;
var moonY = 260;
var moonTimeline = Timeline {
var top_right = at (300ms) {
moonX => 425 tween Interpolator.LINEAR;
moonY => 425 tween Interpolator.LINEAR;
}
var right = at (600ms) {
moonX => 260 tween Interpolator.LINEAR;
moonY => 515 tween Interpolator.LINEAR;
}
var right_bottom = at (900ms) {
moonX => 110 tween Interpolator.LINEAR;
moonY => 425 tween Interpolator.LINEAR;
}
var bottom = at (1.2s) {
moonX => 5 tween Interpolator.LINEAR;
moonY => 260 tween Interpolator.LINEAR;
}
var bottom_left = at (1.5s) {
moonX => 110 tween Interpolator.LINEAR;
moonY => 110 tween Interpolator.LINEAR;
}
var left = at (1.8s) {
moonX => 260 tween Interpolator.LINEAR;
moonY => 5 tween Interpolator.LINEAR;
}
var left_top = at (2.1s) {
moonX => 425 tween Interpolator.LINEAR;
moonY => 110 tween Interpolator.LINEAR;
}
var top = at (2.4s) {
moonX => 515 tween Interpolator.LINEAR;
moonY => 260 tween Interpolator.LINEAR;
}
keyFrames:
[top_right, right, right_bottom, bottom, bottom_left, left, left_top, top],
repeatCount : Timeline.INDEFINITE
}
Frame {
title: "Earth and Moon"
width: 560
height: 580
closeAction: function() {
earthTimeline.stop();
moonTimeline.stop();
java.lang.System.exit( 0 );
}
visible: true
stage: Stage {
fill : Color.BLACK
content: [
ImageView {
image: bind currentEarthImage,
transform : Transform.translate(110, 110);
},
ImageView {
image : moonImage
transform : bind Transform.translate(moonX, moonY)
}
]
}
}
earthTimeline.start();
moonTimeline.start();
JavaFX Script高级特性(7)
时间:2011-02 |
