您可以使用JavaFX快速開發具有豐富使用者體驗的應用程式。在本入門教程中，您將學習如何使用非常少的編碼建立動畫物件並獲得複雜的效果。

圖7-1顯示了要建立的應用程式。

圖7-1彩色圓圈應用

圖7-2顯示了該ColorfulCircles應用程式的場景圖。分支的節點是Group類的例項化，而非分支節點（也稱為葉節點）是Rectangle和Circle類的例項化。

圖7-2彩色圓圈場景圖

本入門教程中使用的工具是NetBeans IDE。在開始之前，請確保您使用的NetBeans IDE版本支援JavaFX 8.有關詳細資訊，請參閱Java SE下載頁面的“認證系統配置”部分。

1、設定應用程式

在NetBeans IDE中設定JavaFX專案，如下所示：

1. 從“ 檔案”選單中，選擇“ 新建專案”。

2. 在JavaFX應用程式類別中，選擇JavaFX Application。單擊下一步。

3. 將專案命名為ColorfulCircles，然後單擊Finish。

4. 刪除NetBeans IDE生成的import語句。

   通過使用NetBeans IDE中的“源”選單中的“程式碼完成”功能或“修復匯入”命令，您可以在完成本教程的過程中生成匯入語句。如果可以選擇import語句，請選擇以開頭語句開頭的語句javafx。

2、設定專案

ColorfulCircles從NetBeans IDE生成的原始檔中刪除該類，並將其替換為示例7-1中的程式碼。

例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檔案中。此時，應用程式是一個簡單的黑色視窗。

3、新增圖形

接下來，通過在行之前新增示例7-2中的程式碼來建立30個圓圈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);

此程式碼建立一個名為group的組circles，然後使用for迴圈向該組新增30個圓圈。每個圓的半徑為150，填充顏色white和不透明度5百分比，這意味著它大部分是透明的。

要在圓圈周圍建立邊框，程式碼中包含StrokeType該類。筆劃型別OUTSIDE意味著圓的邊界在內部延伸了StrokeWidth值，即4。筆劃的顏色是white，不透明度級別是16百分比，使其比圓圈的顏色更亮。

最後一行將circles組新增到根節點。這是一個臨時結構。稍後，您將修改此場景圖以匹配圖7-2中所示的場景圖。

圖7-3顯示了該應用程式。由於程式碼尚未為每個圓圈指定唯一的位置，因此圓圈將相互重疊繪製，視窗的左上角作為圓圈的中心點。重疊圓圈的不透明度與黑色背景相互作用，產生圓圈的灰色。

圖7-3圈子

4、新增視覺效果

繼續對圓圈應用框模糊效果，使它們看起來略微失焦。程式碼在例7-3中。primaryStage.show()在行之前新增此程式碼。

例7-3盒子模糊效果

circles.setEffect（new BoxBlur（10,10,3））;

此程式碼將模糊半徑設定為10畫素寬，10畫素高，以及模糊迭代，3,使其接近高斯模糊。這種模糊技術會在圓的邊緣產生平滑效果，如圖7-4所示。

圖7-4圓上的框模糊

5、建立背景漸變

現在，建立一個矩形並用線性漸變填充它，如例7-4所示。

root.getChildren().add(circles)在行之前新增程式碼，以便漸變矩形出現在圓圈後面。

例7-4線性梯度

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-6顯示了中間場景圖。此時，circles組和colors矩形是根節點的子節點。

圖7-6中間場景圖

6、應用混合模式

接下來，通過新增疊加混合效果為圓圈新增顏色並使場景變暗。您將從circles場景圖中刪除組和線性漸變矩形，並將它們新增到新的疊加混合組。

找到以下兩行程式碼：

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

用例7-5中的程式碼替換步驟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、新增動畫

最後一步是使用JavaFX動畫來移動圓圈：

1. 如果尚未執行此操作，請新增import static java.lang.Math.random;到import語句列表中。

在行之前新增示例7-6中的動畫程式碼primaryStage.show()。

例7-6動畫

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迴圈向30個圓中的每一個新增兩個關鍵幀。0秒處的第一個關鍵幀使用屬性translateXProperty並translateYProperty在視窗內設定圓圈的隨機位置。40秒的第二個關鍵幀也是如此。因此，當播放時間線時，它在40秒的時間段內將所有圓圈從一個隨機位置動畫到另一個隨機位置。

圖7-8顯示了30個運動中的彩色圓圈，完成了應用程式。有關完整的原始碼，請參閱該ColorfulCircles.java檔案，該檔案包含在可下載的ColorfulCircles.zip檔案中。

圖7-8動畫圓圈

8、從這往哪兒走

以下是有關下一步操作的幾點建議：

• 閱讀JavaFX中的建立過渡和時間軸動畫。您將找到有關時間軸動畫的更多詳細資訊以及有關淡入淡出，路徑，並行和順序轉換的資訊。

• 有關增強應用程式外觀和設計的其他方法，請參閱在JavaFX中建立視覺效果，包括反射，光照和陰影效果。

• 嘗試使用JavaFX Scene Builder工具建立視覺上有趣的應用程式。此工具提供了一個視覺化佈局環境，用於為JavaFX應用程式設計UI並生成FXML程式碼。您可以使用選單欄的“屬性”面板或“修改”選項將效果新增到UI元素。有關資訊，請參閱“JavaFX Scene Builder使用者指南”的“屬性”面板和“選單欄”部分。