7 JavaFX中的动画和视觉效果

设置应用程序

在NetBeans IDE中设置JavaFX项目如下：

1. 从文件菜单中选择新建项目。

2. 在JavaFX应用程序类别中，选择JavaFX应用程序。点击下一步。

3. 将项目命名为ColorfulCircles，然后点击完成。

4. 删除NetBeans IDE生成的导入语句。

   您可以通过使用代码完成功能或在NetBeans IDE的源菜单中使用修复导入命令来在教程中逐步生成导入语句。当有多个导入语句可选时，请选择以javafx开头的导入语句。

设置项目

删除NetBeans IDE生成的源文件中的ColorfulCircles类，并用示例7-1中的代码替换它。

public class ColorfulCircles extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        Group root = new Group();
        Scene scene = new Scene(root, 800, 600, Color.BLACK);
        primaryStage.setScene(scene);

        primaryStage.show();
    }
 
 public static void main(String[] args) {
        launch(args);
    }
}

对于ColorfulCircles应用程序，使用一个组节点作为场景的根节点是合适的。组的大小由其中的节点的大小决定。然而，对于大多数应用程序，您希望节点跟踪场景的大小，并在舞台调整大小时进行更改。在这种情况下，您可以使用可调整大小的布局节点作为根节点，如在JavaFX中创建表单中所述。

您现在可以编译和运行ColorfulCircles应用程序，并在教程的每个步骤中查看中间结果。如果遇到问题，请查看可下载的ColorfulCircles.java文件中的代码，该文件包含在可下载的ColorfulCircles.zip文件中。此时，应用程序是一个简单的黑色窗口。

添加图形

接下来，在primaryStage.show()行之前，通过添加示例7-2中的代码来创建30个圆。

Group circles = new Group();
for (int i = 0; i < 30; i++) {
   Circle circle = new Circle(150, Color.web("white", 0.05));
   circle.setStrokeType(StrokeType.OUTSIDE);
   circle.setStroke(Color.web("white", 0.16));
   circle.setStrokeWidth(4);
   circles.getChildren().add(circle);
}
root.getChildren().add(circles);

这段代码创建了一个名为circles的组，然后使用for循环向组中添加了30个圆。每个圆的半径为150，填充颜色为white，透明度为5%，即大部分是透明的。

为了在圆周围创建边框，代码包括了StrokeType类。边框类型为OUTSIDE表示圆的边界通过StrokeWidth值向外延伸，该值为4。边框的颜色为white，透明度为16%，使其比圆的颜色更亮。

最后一行将circles组添加到根节点。这是一个临时结构。稍后，您将修改这个场景图以匹配图7-2中显示的图形。

图7-3显示了应用程序的效果。由于代码尚未为每个圆指定唯一的位置，圆会重叠在一起，以窗口的左上角为圆心。重叠的圆的透明度与黑色背景相互作用，产生了圆的灰色。

图7-3 圆

图7-3的描述

添加视觉效果

继续通过对圆形应用一个盒状模糊效果，使它们看起来稍微模糊。代码在示例 7-3中。在primaryStage.show()行之前添加此代码。

circles.setEffect(new BoxBlur(10, 10, 3));

这段代码将模糊半径设置为10像素宽度和10像素高度，模糊迭代次数设置为3，使其近似于高斯模糊。这种模糊技术在圆形边缘产生了平滑效果，如图 7-4所示。

图 7-4 圆形的盒状模糊

图 7-4 圆形的盒状模糊的描述

创建背景渐变

现在，创建一个矩形并用线性渐变填充，如示例7-4所示。

在root.getChildren().add(circles)行之前添加以下代码，以便渐变矩形出现在圆圈的后面。

Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(),
     new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new 
         Stop[]{
            new Stop(0, Color.web("#f8bd55")),
            new Stop(0.14, Color.web("#c0fe56")),
            new Stop(0.28, Color.web("#5dfbc1")),
            new Stop(0.43, Color.web("#64c2f8")),
            new Stop(0.57, Color.web("#be4af7")),
            new Stop(0.71, Color.web("#ed5fc2")),
            new Stop(0.85, Color.web("#ef504c")),
            new Stop(1, Color.web("#f2660f")),}));
colors.widthProperty().bind(scene.widthProperty());
colors.heightProperty().bind(scene.heightProperty());
root.getChildren().add(colors);

这段代码创建了一个名为colors的矩形。该矩形的宽度和高度与场景相同，并填充有一个线性渐变，该渐变从左下角(0, 1)开始，到右上角(1, 0)结束。值true表示渐变与矩形成比例，NO_CYCLE表示颜色循环不重复。Stop[]序列指示渐变颜色在特定位置的值。

接下来的两行代码使线性渐变随着场景大小的变化而调整，通过将矩形的宽度和高度绑定到场景的宽度和高度。有关绑定的更多信息，请参见使用JavaFX属性和绑定。

最后一行代码将colors矩形添加到根节点。

现在，带有模糊边缘的灰色圆圈出现在一片彩虹色中，如图7-5所示。

图7-5 线性渐变

图7-5 线性渐变的描述

图7-6显示了中间场景图。此时，circles组和colors矩形是根节点的子节点。

图7-6 中间场景图

图7-6 中间场景图的描述

应用混合模式

接下来，为圆圈添加颜色，并通过添加叠加混合效果使场景变暗。您将从场景图中移除circles组和线性渐变矩形，并将它们添加到新的叠加混合组中。

1. 找到以下两行代码：

   root.getChildren().add(colors);
   root.getChildren().add(circles);
   

2. 用步骤1中的代码替换第一步中的两行代码。

   示例7-5 混合模式

   Group blendModeGroup = 
       new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(),
           Color.BLACK), circles), colors);
   colors.setBlendMode(BlendMode.OVERLAY);
   root.getChildren().add(blendModeGroup);
   

组blendModeGroup设置了叠加混合的结构。该组包含两个子节点。第一个子节点是一个新的（无名）Group，其中包含一个新的（无名）黑色矩形和之前创建的circles组。第二个子节点是之前创建的colors矩形。

setBlendMode()方法将叠加混合应用于colors矩形。代码的最后一行将blendModeGroup作为根节点的子节点添加到场景图中，如图7-2所示。

叠加混合是图形设计应用程序中常见的效果。这种混合可以使图像变暗，添加高光或两者兼有，具体取决于混合中的颜色。在本例中，线性渐变矩形用作叠加层。黑色矩形用于保持背景暗淡，而几乎透明的圆圈从渐变中提取颜色，但也变暗。

图7-7显示了结果。在下一步中，当您对圆圈进行动画处理时，您将看到叠加混合的完整效果。

图7-7 叠加混合

"图7-7 叠加混合"的描述

添加动画

最后一步是使用JavaFX动画来移动圆圈：

1. 如果还没有这样做，请将import static java.lang.Math.random;添加到导入语句列表中。

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

   示例7-6 动画

   Timeline timeline = new Timeline();
   for (Node circle: circles.getChildren()) {
       timeline.getKeyFrames().addAll(
           new KeyFrame(Duration.ZERO, // 设置起始位置为0
               new KeyValue(circle.translateXProperty(), random() * 800),
               new KeyValue(circle.translateYProperty(), random() * 600)
           ),
           new KeyFrame(new Duration(40000), // 设置结束位置为40秒
               new KeyValue(circle.translateXProperty(), random() * 800),
               new KeyValue(circle.translateYProperty(), random() * 600)
           )
       );
   }
   // 播放40秒的动画
   timeline.play();
   

动画由时间轴驱动，因此此代码创建一个时间轴，然后使用for循环为每个圆圈添加两个关键帧。第一个关键帧在0秒时使用translateXProperty和translateYProperty属性在窗口内设置圆圈的随机位置。第二个关键帧在40秒时做同样的操作。因此，当播放时间轴时，它会在40秒的时间内将所有圆圈从一个随机位置动画到另一个位置。

图7-8显示了30个彩色圆圈的运动，这完成了应用程序。完整的源代码请参见可下载的ColorfulCircles.java文件，该文件包含在可下载的ColorfulCircles.zip文件中。

图7-8 动画圆圈

图7-8的描述

从这里开始

以下是一些建议，告诉你接下来该做什么：

• 尝试JavaFX示例，你可以从Java SE下载页面的JDK演示和示例部分下载，网址为http://www.oracle.com/technetwork/java/javase/downloads/。特别要看一下Ensemble应用程序，它提供了动画和效果的示例代码。

• 阅读在JavaFX中创建过渡和时间轴动画。你将找到更多关于时间轴动画的细节，以及关于淡入淡出、路径、并行和顺序过渡的信息。

• 查看在JavaFX中创建视觉效果，了解增强应用程序外观和设计的其他方法，包括反射、光照和阴影效果。

• 尝试使用JavaFX Scene Builder工具创建视觉上有趣的应用程序。该工具提供了一个可视化布局环境，用于设计JavaFX应用程序的用户界面，并生成FXML代码。你可以使用属性面板或菜单栏的修改选项来为UI元素添加效果。请参阅JavaFX Scene Builder用户指南的属性面板和菜单栏部分获取更多信息。