javaFX8初探（动画和视觉效果）
你可以使用JavaFX很快的开发应用并且给用户带来丰富的用户体验。在这一个小节，我们使用非常少的代码创建一个动态且有复杂效果的
应用：五彩缤纷的圆圈，如下图所示：
下面这个图显示了场景图形，有分支的节点代表了Group类的实例，没有分支也就是叶子节点代表了Rectangle和Circle类的实例：
创建应用：
建立一个JavaFX项目
建立一个java文件，命名ColorfulCircles ，代码如下所示：
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);
}
}
这个应用比较合适实用group作为场景的根节点。group的大小取决于里面节点的大小。然而，通常我们希望我们场景的大小会跟随舞台（
窗口）的大小改变而改变，如果是这样的话，我们可以使用可变大小的布局节点，就上之前文章中登陆表单那样。
你现在已经可以运行这个应用了，你应该在途中经常时不时的看一下结果。如果运行出错了，可以停下看看一下代码。现在运行的结果是
一个黑色的窗口。
添加图形
下面，我们添加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);
这段代码创建了一个Group，名字是circles，然后用一个循环添加了30个圆圈到这个group，每个圆圈的半径是150，颜色是白色，不透明
度是5%，这意味着这个圆圈几乎是透明的。
然后为这些圆圈创建一个边框，使用stroke，这里是边框为 外边框，白色 ，不透明度为16%，宽度是4.所以这个边框比圆圈应该更明亮。
最后把这些圆圈添加到root节点里，这只是一个临时的结构，之后我们会修改场景图形是它表现的和上面说的一致。
运行应用，如下图所示：
添加视觉效果
为圆圈加上盒子模糊效果
circles.setEffect(new BoxBlur(10, 10, 3));
这段代码设置模糊半径10像素宽 和 10像素高，模糊迭代3，是它接近于高斯模糊，这样会使得圆的边缘过度更加平滑。运行代码如下图所
示：
设置背景渐变
创建一个矩形，设置它为线性渐变，代码如下：
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);
这段代码创建了一个矩形，命名为colores。这个矩形的大小和场景的大小一致，开始于左上角（0,1），结束于右上角（1,0），true表示
线性渐变保持比例，NO_CYCLE表示渐变不会重复，Stop[]序列表示在特定的地方渐变。
接下来的两行代码，使得渐变会跟随窗口的变化而变化。最后把这个颜色的渐变添加到root节点：
运行应用如下图所示：
目前场景图形如下图所示：
应用混合模式：
接下来，我们为圆圈添加颜色，并且通过一个叠加混合效果使场景变暗，
1：找到下面的代码：
root.getChildren().add(colors); root.getChildren().add(circles);
2：用下面的代码替换第一步中的代码：
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有两个子节点，第一个是新的Group，这个group是一个黑色的矩形和之前创建的圆圈group
，第二个是之前创建的颜色矩形，
setBlendMode方法使得叠加混合应用于颜色矩形最后把这个group添加到场景中。
运行应用，如下图所示：
添加动画：
最后的步骤就是使用JavaFX动画移动这些圆圈
添加如下代码：
Timeline timeline = new Timeline();
for (Node circle: circles.getChildren()) {
timeline.getKeyFrames().addAll(
new KeyFrame(Duration.ZERO, // set start position at 0
new KeyValue(circle.translateXProperty(), random() * 800),
new KeyValue(circle.translateYProperty(), random() * 600)
),
new KeyFrame(new Duration(40000), // set end position at 40s
new KeyValue(circle.translateXProperty(), random() * 800),
new KeyValue(circle.translateYProperty(), random() * 600)
)
);
}
// play 40s of animation
timeline.play();
动画是靠时间轴来驱动的，所以这段代码里创建了一个时间轴，然后使用for循环为每个圆圈添加了两个关键帧。第一个关键帧在0秒的时
候使用translateXProperty 和 translateYProperty 属性确定在窗口中的一个随机的位置。第二个关键帧在40秒后做相同的事情。所以当
时间轴开始后，每个圆圈都会在40秒内从一个位置移动到另一个位置。
运行应用如下图所示：
全部代码如下所示：
package com.chu.helloworld;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.effect.BlendMode;
import javafx.scene.effect.BoxBlur;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.StrokeType;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ColorfulCircles extends Application {
@Override
public void start(Stage primaryStage) {
Group root = new Group();
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);
}
circles.setEffect(new BoxBlur(10, 10, 3));
Scene scene = new Scene(root, 800, 600, Color.BLACK);
primaryStage.setScene(scene);
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());
Group blendModeGroup = new Group(new Group(new Rectangle(
scene.getWidth(), scene.getHeight(), Color.BLACK), circles),
colors);
colors.setBlendMode(BlendMode.OVERLAY);
root.getChildren().add(blendModeGroup);
Timeline timeline = new Timeline();
for (Node circle: circles.getChildren()) {
timeline.getKeyFrames().addAll(
new KeyFrame(Duration.ZERO, // set start position at 0
new KeyValue(circle.translateXProperty(), Math.random() * 800),
new KeyValue(circle.translateYProperty(), Math.random() * 600)
),
new KeyFrame(new Duration(40000), // set end position at 40s
new KeyValue(circle.translateXProperty(), Math.random() * 800),
new KeyValue(circle.translateYProperty(), Math.random() * 600)
)
);
}
// play 40s of animation
timeline.play();
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}