( 其他JAVAFX相关参考文章: JavaFX 多维数组 用JavaFX的Effect功能编写许愿树(1) JavaFX 1.1和1.0的兼容性 JavaFX和Java之间的互操作性 JavaFX的Effect功能例子:编写许愿树程序(3) )
在文章“用JavaFX的Effect功能编写许愿树程序(1)”中,我们介绍了用JavaFX作出白云蓝天绿树的构图。接下来我们制作冒泡的动画,使得在白云中不断有气泡升起。然后我们再画上星星。
我们创建一个JavaFX类Bubble,它是javafx.scene.shape.Circle类的子类,然后加上动画就可以实现气泡升腾的效果,我们一起来看看代码:
/* * Bubble.fx * * JavaFX技术交流 http://javafxguy.iteye.com * */ package wishtree; import javafx.animation.KeyFrame; import javafx.animation.Timeline; import javafx.scene.effect.GaussianBlur; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import java.lang.Math.*; /** * @author Henry Zhang * JavaFX编程技巧及应用 http://www.javafxblogs.com */ public class Bubble extends Circle { var counter = 0; var startCounter = 10.0; var radiusDelta = -0.15; var destinationY:Double = 200; var timeline : Timeline = Timeline { repeatCount: Timeline.INDEFINITE keyFrames : [ KeyFrame { time : 100ms action: function () { moveOneStep(); } } ] } init { effect = GaussianBlur { radius: 3} fill = Color.WHITE; radius = 4; resetStatus(); timeline.play(); } function moveOneStep() : Void { counter++; if ( counter > startCounter) { if ( not visible ) visible = true; centerY -= 2; radius += radiusDelta; if ( radius < 1 or radius > 4 ) radiusDelta = -radiusDelta; } if ( centerY < destinationY+100 ) { visible = false; if ( opacity > 0.03 ) opacity -= 0.03 else opacity = 0; visible = true; } if ( centerY < destinationY ) { resetStatus(); } } // JavaFX Game Demo http://www.javafxgame.com function resetStatus(): Void { visible = false; centerY = 500 + random()*50; centerX = 200 + random()*350; counter = 0; startCounter = 80 + random()*400; destinationY = 150+random()*30; radius = 1 + random()*2; opacity = 0.6; } }
首先,在init块和resetStatus()函数中我们初始化气泡的大小,透明度,位置等变量。我们在resetStatus()里调用了java.lang.Math里的随机函数random(),使得气泡的出现位置是随机的。从这可以看出JavaFX调用Java的便易性。在确定了初始状态后,我们定义一个动画的时间线(timeline)实例,里面只有一个关键帧(KeyFrame)。相关代码如下:
var timeline : Timeline = Timeline { repeatCount: Timeline.INDEFINITE keyFrames : [ KeyFrame { time : 100ms action: function () { moveOneStep(); } } ] } . . . . function moveOneStep() : Void { counter++; if ( counter > startCounter) { if ( not visible ) visible = true; centerY -= 2; radius += radiusDelta; if ( radius < 1 or radius > 4 ) radiusDelta = -radiusDelta; } if ( centerY < destinationY+100 ) { visible = false; if ( opacity > 0.03 ) opacity -= 0.03 else opacity = 0; visible = true; } if ( centerY < destinationY ) { resetStatus(); } }
每隔100ms,timeline都会调用处理函数moveOneStep(),从而可以不断改变气泡的状态,产生动画效果。在这个函数中,我们需要改变的实例变量有centerY,opacity,visible,radius。counter变量则是作为时间计数器,以控制状态的变化。这样,一个若隐若现、一张一弛不断上升的气泡就完成了。
下一步,我们再创建一个Star类,用来显示悬挂的“愿望星”。每���星星可以看作是个10个结点连线组成的多边形,所以我们通过扩展Polygon类来编制星星的代码,一起来看看:
/*
* Star.fx
*
* http://www.javafxblogs.com
* http://javafxguy.iteye.com
*/
package wishtree;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.*;
import javafx.scene.shape.Polygon;
import java.lang.Math.*;
/**
* @author Henry Zhang
*
* http://www.javafxblogs.com http://javafxguy.iteye.com
*
*/
public class Star extends Polygon {
def r1 : Double = 18;
def r2 : Double = r1 / 1.6;
var r = [r1, r2];
var strokeColor =
[ Color.PINK, Color.YELLOW, Color.GOLDENROD, Color.CYAN,
Color.PURPLE, Color.BLUEVIOLET, Color.CORAL, Color.CRIMSON ];
var fillColor =
[ Color.GOLD, Color.BLUE, Color.RED, Color.DARKSLATEBLUE,
Color.DARKORANGE, Color.MAGENTA, Color.BROWN, Color.CHOCOLATE ];
init {
// compute the coordinates of the star polygon
points = for ( i in [0..9] ) [
r[i mod 2] * cos( toRadians(i*36) ),
r[i mod 2] * sin( toRadians(i*36) )
];
blocksMouse = true;
strokeWidth = 1; // 本文 发 表 于 http://javafxguy.iteye.com
var which : Integer = random() * sizeof(strokeColor) as Integer;
stroke = strokeColor[which];
fill = LinearGradient {
startX: 0 startY: 0 endX: 0 endY: 1.0
proportional: true
stops: [
Stop { offset: 0.1 color: Color.WHITE }
Stop { offset: 1.0 color: fillColor[which] }
]
};
effect = DropShadow { color: Color.WHITE };
}
}
在init块中,我们用for语句来计算星星的10个接点,每次循环产生一个节点的(x,y)坐标,共计10组,最后产生的一个sequence赋值给points变量,我们可以看到JavaFX的代码非常简洁:
points = for ( i in [0..9] ) [ r[i mod 2] * cos( toRadians(i*36) ), r[i mod 2] * sin( toRadians(i*36) ) ];
fill变量我们再次采用了LinearGradient的渐变效果,填充的颜色是随机选择的。我们还增加了DropShadow的影子效果,在星星的背后加上了白色的影子,增强了视觉效果。blocksMouse属性是屏蔽鼠标事件传给星星下面的其他图形。
这个星星类产生的实例位置都是在坐标(0,0)的位置,在下面的程序中,我们会通过改变translateX和translateY的值,动态地把星星挂在树上。
我们对Main.fx略为修改一下,首先把数个泡泡加入scene中:
for ( i in [1..5] ) Bubble { }
然后在许愿树的图形上增加鼠标点击的处理,每当点击到树叶和树枝时,会在该处挂上一颗星星,在鼠标事件(MouseEvent)中,x,y属性可以告诉我们点击的位置,然后我们就可以设置星星出现的地方。通过insert操作,我们把新创建的星星增加到scene中。注意,这里采用了currentIndex计数器来确保星星是出现在云层下方,我们可以看到被云层遮掩的星星:
var tree : ImageView = ImageView { x: 80 y: 0 image: Image { url: "{__DIR__}images/tree.png" width: 640 preserveRatio: true } onMousePressed: function(e:MouseEvent) : Void { if ( e.y < 343 ) { var s = Star{ translateX: e.x translateY: e.y } ; insert s after stage.scene.content[currentIndex++]; } } };
完整的代码如下:
/* * Main.fx * * http://www.javafxblogs.com http://javafxguy.iteye.com * */ package wishtree; import javafx.scene.effect.GaussianBlur; import javafx.scene.effect.PerspectiveTransform; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.input.MouseEvent; import javafx.scene.paint.Color; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Stop; import javafx.scene.Scene; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.scene.text.Text; import javafx.stage.Stage; /** * @author Henry Zhang * JavaFX编程 http://javafxguy.iteye.com
* JavaFX技术交流应用 http://www.javafxblogs.com */ var xx = 170; var yy = 430; var currentIndex = 0; var tree : ImageView = ImageView { x: 80 y: 0 image: Image { url: "{__DIR__}images/tree.png" width: 640 preserveRatio: true } onMousePressed: function(e:MouseEvent) : Void { if ( e.y < 343 ) { var s = Star{ translateX: e.x translateY: e.y } ; insert s after stage.scene.content[currentIndex++]; } } }; var tree2 = Image { url: "{__DIR__}images/tree2.png" width: 130 preserveRatio: true };
var stage = Stage { title: "Wish Tree" width: 830 height: 620 resizable: false scene: Scene { fill: LinearGradient { startX: 0, startY: 0.0, endX: 0, endY: 1.0 proportional: true stops: [ Stop { offset: 0.0 color: Color.web("#14acf8") }, Stop { offset: 1.0 color: Color.web("#a4e6f8") }] } content: [ ImageView { x: 50 y: 280 image: Image { url: "{__DIR__}images/cloud2.png" preserveRatio: true width: 160 } effect: GaussianBlur { radius: 25 } }, ImageView { x: 520 y: 300 image: Image { url: "{__DIR__}images/cloud2.png" preserveRatio: true width: 150 } effect: GaussianBlur { radius: 33 } }, // JavaFX Demo Game ImageView { x: 560 y: 500 image: tree2 }, ImageView { x: 460 y: 470 image: tree2 }, // JavaFX Sample code ImageView { x: 60 y: 500 image: tree2 }, ImageView { x: 190 y: 470 image: tree2 }, tree, // “用JavaFX的Effect实现许愿树(1)” ImageView { x: 120 y: 360 image: Image { url: "{__DIR__}images/sign.png" width: 180 preserveRatio: true } }, ImageView { x: 20 y: 60 image: Image { url: "{__DIR__}images/cloud2.png" preserveRatio: true width: 250 } effect: GaussianBlur { radius: 40 } },
ImageView { x: 520 y: 90 image: Image { url: "{__DIR__}images/cloud2.png" preserveRatio: true width: 100 } effect: GaussianBlur { radius: 20} }, ImageView { x: 620 y: 190 image: Image { url: "{__DIR__}images/cloud2.png" preserveRatio: true width: 180 } effect: GaussianBlur { radius: 25} }, ImageView { x: 600 y: 380 image: Image { url: "{__DIR__}images/cloud2.png" preserveRatio: true width: 150 } effect: GaussianBlur { radius: 33 } }, ImageView { x: 0 y: 490 image: Image { url: "{__DIR__}images/cloud.png" } effect: GaussianBlur { radius: 30 } }, for ( i in [1..5] ) Bubble { }, Text { x:170 y: 450 content: "许愿树" fill: Color.YELLOW font: Font.font ( null, FontWeight.BOLD, 30); effect: PerspectiveTransform { ulx: xx uly: yy urx: xx+80 ury: yy-10 llx: xx-2 lly: yy+40 lrx: xx+80 lry: yy+38 } } ] } } //用JavaFX的Effect功能编写许愿树程序 var idx = for ( n in stage.scene.content ) if ( n == tree ) indexof n else [] ; currentIndex = idx[0];
现在代码基本完整了,每次点击愿望树,都会生成一个五彩的星星,快来点击下面点击下面截图挂颗愿望星吧(JDK 1.5以上的环境,最好是JDK1.6 U10以上):
在下一篇文章中,我们介绍如何把愿望写在星星上。
未完待续, 完整代码可在下一篇文章中下载:
更多文章: