DOC-01-07 JavaFX中的动画与视觉效果

你可以使用JavaFX来快速开发具有丰富用户体验的应用程序。在这个入门教程中,你将会学到如何使用很少的代码来创建动画对象,并添加复杂的特效。

图7-1展示了将要被创建的程序运行效果。

图7-1 彩色圆圈应用程序

1_7_1 colorfulcircles

图7-2展现了ColorfulCircles应用程序的场景图(Scene Graph)。分支节点是Group类的实例,非分支节点——即叶子节点,是Rectangle和Circle类的实例。

图7-2 彩色圆圈应用程序的Scene Graph

1_7_2 scenegraph_finish

在本入门教程中使用的编程工具是NetBeans IDE。在你开始学习之前,请确保你使用的NetBeans IDE版本支持JavaFX 8.参考Java SE下载页面的”Certified System Configurations”部分来了解更多细节信息。

创建应用程序

在NetBeans IDE中按如下步骤创建你的JavaFX工程:

1. 从”File”菜单中选择”New Project”子菜单。

2. 在”JavaFX”应用程序分类中选择”JavaFX Application”,单击”Next”。

3. 将工程命名为”ColorfulCircles”并单击”Finish”。

4. 删除NetBeans IDE生成的代码中的所有import语句。

你可以在学习本教程的过程中通过使用NetBeans IDE的代码完成功能或从”Source”菜单中选择”Fix Imports”命令来生成import语句。当提示import语句选项列表时,请选择以”javafx”开头的语句。

创建Project

删除由NetBeans IDE产生的ColorfulCircles类并将其替换为例7-1中所示的代码。

例7-1 基础应用程序

在ColorfulCircles应用程序中,使用了一个Group节点作为Scene的根节点。Group的大小受到其中的节点大小影响。然而,对大多数程序而言可能需要使Scene的大小随Stage的大小而改变。在这种情况下,正如《在JavaFX中创建表单(Creating a Form in JavaFX)》中所描述的那样,你可以使用一个可以改变大小的Layout节点来作为根节点。

现在或者是在操作本教程的每一步的过程中,你都可以编译并运行ColorfulCircles程序来观察中间结果。如果遇到了问题,就请查下载的ColorfulCircles.zip中的ColorfulCircles.java文件。现在你的程序还只是一个简单的黑色窗口。

添加图形

下面,通过在代码行promaryStage.show()之前添加例7-2中的代码来添加30个圆圈。

例7-2 30个圆圈

这段代码创建了一个名为circles的Group,然后通过for循环向Group中添加了30个圆圈。每个圆圈的半径是150,填充背景为白色,不透明等级为5%,也就是说几乎是透明的。

为了创建圆圈外的边,代码中使用了StrokeType类。笔触类型(Stroke type)为OUTSIDE意味着圆圈的边将会扩展到外部,扩展的宽度为StrokeWidth的值,在本例中为4。笔触的颜色是白色(white)、不透明等级为16%,这使得它比圆圈的颜色要更为明亮一些。

最后一行代码将circles这个Group添加到了root节点中。这只是一个临时的结构,你后续将会按照如图7-2所示的情况对这个场景图(Scenen Graph)进行修改。

图7-3展示了程序的运行效果。由于现在还没有为每个圆圈指定位置,因此它们都以窗口的左上角为中心重叠摆放。各个圆圈的不透明度设置与黑色背景叠加后形成了图中的灰色效果。

7-3 重叠的圆圈

1_7_3 circles

添加视觉效果

下面继续为这些圆圈增加模糊效果,使得它们看起来像轻微地失去了焦点一样。对应的代码如例7-3所示。将此代码添加到代码行primaryStage.show()之前。

7-3 盒式模糊(Box Blur)效果

这行代码将模糊范围设置为10像素高*10像素宽、模糊迭代次数设置为3,它产生了的效果与高斯模糊类似。这种模糊生成技术在圆圈的边缘处产生了一种平滑的效果,如图7-4所示。

图7-4 在圆圈上的盒式模糊(Box Blur)效果

1_7_4 blur

创建一个背景渐变

现在我们来创建一个带有线性渐变的矩形,代码如例7-4所示。将代码插入到代码行root.getChildren().add(circles)之前,这样使得渐变矩形显示到圆圈的后面。

例7-4 线性渐变

这段代码创建了一个名为colors的矩形。这个矩形与scen的宽和高相同,并且被一个由左下角(0,1)到右上角(1,0)的线性渐变所填充。其中的true表示渐变按矩形均匀地产生,NO_CYCLE表示颜色周期不会进行循环。Stop[]序列表示渐变的颜色点。

接下来的两行代码表示将scene和渐变矩形的大小绑定保持一致。后续的《使用JavaFX属性和绑定(Using JavaFX Properties and Bindings)》教程将会更为详细地描述”绑定”的相关信息。

最后一行代码将colors矩形添加到了root节点之中。

现在运行界面将会出现带有模糊边框的灰色圆圈与彩虹一般的背景,如图7-5所示。

图7-5 线性渐变

1_7_5 gradient

图7-6表示了当前的场景图(Scene Graph),此时名为circles的Group和名为colors的矩形都是root 节点的子节点。

图7-6 当前的Scene Graph

1_7_6 scenegraph_intermed

应用混合模式

下面让我们为圆圈增加颜色,并通过使用蒙版混合效果来使scene变暗。你需要从场景图中移除名为circles的Group和线性渐变矩形,然后将它们添加到新的蒙版混合Group中。

1. 定位如下两行代码:

2. 用例7-5中的的代码替换第1步中的两行。

例7-5 混合模式

blenModeGroup Group建立了蒙版混合模式的结构。在Group中包含了两个子节点。第一个子节点是新建的(匿名)Group,其中包含了一个黑色的(匿名)矩形以及之前创建的circles Group。第二个节点是之前创建的colors矩形。

setBlendMode()方法在colors矩形上应用了蒙版混合模式。最后一行代码将blendModeGroup添加到场景图之中并将其作为的root节点的子节点,如图7-2所示。 蒙版混合模式是图像处理应用程序中常见的一种效果。这种混合通过使用不同的颜色可以将一个图片变暗或为其增加高光,或者同时起到两种作用。在本例中线性渐变矩形被用作了蒙版。黑色矩形框用于保持背景是黑色,而近乎透明的圆圈则从渐变中获得了颜色,但是它们都并被变暗了。

图7-7展示了程序运行结果。你将会在后面的教程中看到当在圆圈进行动画时的蒙版混合模式的完整效果。

图7-7 蒙版混合

1_7_7 blend

添加动画

最后的步骤是使用JavaFX动画来移动圆圈:

1. 如果之前没有进行过此步骤,则添加import static java.lang.Math.random;语句到import语句列表之中。

2. 在primaryStage.show()代码行之前添加如例7-6中的动画代码:

例7-6 动画

动画由一个时间轴来驱动,因此这段代码创建了一个时间轴,然后使用一个for循环来为30个圆圈各增加了两个关键帧。第一个关键帧是在第0秒,通过使用translateXProperty和translateYProperty属性来为圆圈设置窗体中的一个随机位置。第二个在第40秒的关键帧也做了类似的事情。因此当时间轴被播放时,它会将所有的圆圈在40秒之内从一个随机位置移到另外一个随机位置。

图7-8显示了30个运动的彩色圆圈,这也是程序的最终效果。如需获取完整的源代码,请参考ColorfulCircles.java文件,它被包含在下载文件包ColorfulCircles.zip中。

图7-8 动画圆圈

1_7_8 colorfulcircles

了解更多

下面是关于如何继续学习的一些建议:

● 尝试学习JavaFX样例,你可以从JavaSE下载页面的”JDK Demos and Samples”部分下载,网址为:http://www.oracle.com/technetwork/java/javase/downloads/。尤其是看看Ensemble应用程序,它提供了动画和视觉效果的样例代码。

● 阅读《在JavaFX中创建变换和时间轴动画(Creating Transitions and Timeline Animation)》。你将会发现更多关于时间轴动画的细节,包括淡出、路径、并行和连续变换。

● 参考《在JavaFX中创建视觉效果(Creating Visual Effects in JavaFX)》来了解更多关于加强应用程序外观和设计的方法,包括反射、光照和阴影效果。

尝试使用JavaFX Scene Builder工具来创建更有生动有趣的程序。这个工具提供了可视化的布局环境来为JavaFX应用程序设计UI并产生FXML代码。你可以使用Porperties面板或者菜单栏中的Modify选项来为UI元素增加视觉效果。参考《Java Scene Builder用户指南(Java Scene Builder User Guide)》中的”属性面板和菜单栏(Properties Panel and the Menu Bar)”部分来了解相关信息。

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/07/doc01_animal/
百度已收录