翻譯自??JavaFX中的動畫和視覺效果

您可以使用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項目，如下所示：

從“?文件”菜單中，選擇“?新建項目”。

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

將項目命名為ColorfulCircles，然后單擊Finish。

刪除NetBeans IDE生成的import語句。

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

?

2、設置項目

ColorfulCircles從NetBeans IDE生成的源文件中刪除該類，并將其替換為示例7-1中的代碼。

例7-1基本應用

public class ColorfulCircles extends Application {@Overridepublic 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動畫來移動圓圈：

如果尚未執行此操作，請添加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 0new KeyValue(circle.translateXProperty(), random() * 800),new KeyValue(circle.translateYProperty(), random() * 600)),new KeyFrame(new Duration(40000), // set end position at 40snew 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示例，您可以從Java SE下載頁面的JDK演示和示例部分下載該示例http://www.oracle.com/technetwork/java/javase/downloads/。特別是看看Ensemble應用程序，它為動畫和效果提供示例代碼。

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

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

• 嘗試使用JavaFX Scene Builder工具創建視覺上有趣的應用程序。此工具提供了一個可視化布局環境，用于為JavaFX應用程序設計UI并生成FXML代碼。您可以使用菜單欄的“屬性”面板或“修改”選項將效果添加到UI元素。有關信息，請參閱“JavaFX Scene Builder用戶指南”的“屬性”面板和“菜單欄”部分。

?

總結

以上是生活随笔為你收集整理的JavaFX官方教程（八）之JavaFX中的动画和视觉效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。