當前位置：首頁 > 编程语言 > java >内容正文

java

javafx 动画没效果_通过JavaFX标注制作动画效果

發布時間：2023/12/3 java 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 javafx 动画没效果_通过JavaFX标注制作动画效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

javafx 動畫沒效果

在本文中，您將學習如何使用JavaFX的動畫API創建標注。您可以在https://www.youtube.com/watch?v=XTHbB0LRdT4的 YouTube網站上查看這些標注的演示示例。

什么是標注？

我敢肯定，您已經看過廣告或科幻電影，它們使用在圖像頂部顯示的標注來指示場景中的物體。在本文中，您將學習如何使用JavaFX的Animation API創建動畫標注效果。使用這種效果，您可以將文本放置到場景中，然后通過線條或箭頭將文本連接到感興趣的項目。

圖1顯示了在本文的上下文中組合在一起構成標注的各個部分。

^{圖1.典型標注的不同部分}

以下是圖1中所示各個部分的定義：

頭部 –指示圖像中的項目的點（圓圈）
引導線 –從頭部到另一點的線，通常形成對角線
引伸線末端 – 引伸線段的末端 （水平線）
主標題 –主標題文本。正文開始在引導線的終點滾動
字幕矩形 –來自主標題底部的一個小動畫矩形
字幕 - 字幕文字。字幕文本將在主標題文本下方

并非所有標注都相同。不過，大多數將包含這些元素。

標注通常以靜態方式指出書籍或雜志中的內容，但如果可以對標注進行動畫處理，則視頻中的標注要好得多。一個不錯的動畫效果是從繪制一個點（頭）開始，然后畫一條線（引導線），然后滾動一個主要標題，最后滾動一個字幕。當動畫結束顯示時，它可以暫停一會兒（恰好足以允許觀看者閱讀標題文本），然后將整個過程反向進行，以退出場景。

動畫標注

現在您知道了標注的構成，我們可以跳入一些JavaFX代碼來為圖1中所示的每個片段（1-6）設置動畫。

由于每個標注都是按順序進行動畫處理的，因此您將首先創建一個javafx.animation.SequentialTransition實例。一個SequentialTransition擁有零到許多動畫對象。創建方法如下：

SequentialTransition calloutAnimation = new SequentialTransition（）;

顧名思義，動畫將按順序進行。您還需要在calloutAnimation上設置的其他內容是循環計數和自動反轉屬性。例如：

// Allow animation to go in reversecalloutAnimation.setCycleCount(2);calloutAnimation.setAutoReverse(true);

在閱讀器有時間查看和吸收標注之后，上述設置使動畫可以反轉順序。若要添加動畫，請在順序過渡動畫對象上調用.getChildren（）。add（）方法。以下是將頭部動畫添加到順序過渡動畫對象的代碼。方法buildHeadAnim（）返回一個javafx.animation.Animation實例。

// Animation of headCircle head = new Circle(600, 550, 5); // center x, y, radiushead.setFill(Color.WHITE);calloutAnimation.getChildren().add(buildHeadAnim(head));

頭部動畫

為頭部創建動畫時，可以使用任何形狀，例如矩形或圓形。在接下來的示例中，頭部是JavaFX Circle形狀。動畫從零半徑開始，然后縮放到更大的半徑。所示方法創建并返回一個javafx.animation.Timeline對象。

protected Animation buildHeadAnim(Node head) {Circle headCircle = (Circle) head;return new Timeline(new KeyFrame(Duration.millis(1),new KeyValue(headCircle.visibleProperty(), true),new KeyValue(headCircle.radiusProperty(), 0)), // start valuenew KeyFrame(Duration.millis(300),new KeyValue(headCircle.radiusProperty(), 5.0d)) // end value); }

時間軸由初始關鍵幀組成，該初始關鍵幀將頭圈的visible屬性設置為true，并將radius屬性設置為零。接下來，使用關鍵值定義結束關鍵幀，以在300毫秒內將radius屬性從零插入到5.0。

領導線動畫

在設置引導線動畫時，該線將看起來就像是用鉛筆進行描畫或繪制。在下面的代碼中，將對端點坐標進行插值（線性）。從頭部的中心（600，550）到lineToPoint坐標（400，300）畫一條線。我對值進行了硬編碼，以使代碼更簡潔。 endX / endY的實際鍵值分別設置為getLeaderLineToPoint（）。getX（）和getLeaderLineToPoint（）。getY（） 。

protected Animation buildBeginLeaderLineAnim(Line leaderLine) {return new Timeline(new KeyFrame(Duration.millis(1),new KeyValue(leaderLine.visibleProperty(), true)),// shownew KeyFrame(Duration.millis(300),new KeyValue(leaderLine.endXProperty(), 400),new KeyValue(firstLeaderLine.endYProperty(), 300))); }

領導線結束動畫

由于動畫引導線末端的代碼將與以前的動畫非常相似，因此，我將省略該代碼。要查看完整列表，請訪問： https : //github.com/carldea/callouts/tree/master/src/com/carlfx/callouts 。

主標題文字動畫

主標題文本動畫由一個HBox組成，該HBox包含一個Text節點，該節點將根據引出線終點的方向向左或向右滾動。例如，如果引出線終點的方向指向右側，則主標題文本將顯示為向右滾動。

下面是buildMainTitleAnim（）方法，用于對主標題文本進行動畫處理。由于該方法是標注動畫中最復雜的部分，因此我想分享我在使用過程中遇到的一些技巧。

protected Animation buildMainTitleAnim(HBox mainTitleBackground) {// main title box// Calculate main title width and height upfrontRectangle2D mainTitleBounds = getBoundsUpfront(mainTitleBackground);double mainTitleWidth = mainTitleBounds.getWidth();double mainTitleHeight = mainTitleBounds.getHeight();// Position mainTitleText background beside the end part of the leader line.Point2D endPointLLine = calcEndPointOfLeaderLine();double x = endPointLLine.getX();double y = endPointLLine.getY();// Viewport to make main title appear to scrollRectangle mainTitleViewPort = new Rectangle();mainTitleViewPort.setWidth(0);mainTitleViewPort.setHeight(mainTitleHeight);mainTitleBackground.setClip(mainTitleViewPort);mainTitleBackground.setLayoutX(x);mainTitleBackground.setLayoutY(y - (mainTitleHeight/2));// Animate main title from end point to the left.if (LEFT == getEndLeaderLineDirection()) {// animate layout x and widthreturn new Timeline(new KeyFrame(Duration.millis(1),new KeyValue(mainTitleBackground.visibleProperty(), true),new KeyValue(mainTitleBackground.layoutXProperty(), x)), // shownew KeyFrame(Duration.millis(200),new KeyValue(mainTitleBackground.layoutXProperty(), x - mainTitleWidth),new KeyValue(mainTitleViewPort.widthProperty(), mainTitleWidth)));}// Animate main title from end point to the rightreturn new Timeline(new KeyFrame(Duration.millis(1),new KeyValue(mainTitleBackground.visibleProperty(), true)), // shownew KeyFrame(Duration.millis(200),new KeyValue(mainTitleViewPort.widthProperty(), mainTitleWidth))); }

放置主標題文本時，您的代碼將需要預先知道邊界區域的大小。下面是一種方法，該方法采用包含文本節點的HBox，然后計算HBox的寬度和高度，而不必在主場景圖上顯示該框。

protected Rectangle2D getBoundsUpfront(Region node) {// Calculate main title width and heightGroup titleRoot = new Group();new Scene(titleRoot);titleRoot.getChildren().add(node);titleRoot.applyCss();titleRoot.layout();return new Rectangle2D(0, 0, node.getWidth(), node.getHeight()); }

您可以在此示例中看到javafx.scene.Node類中的applyCss（）和layout（）方法如何負責在應用CSS樣式后確定寬度和高度。在上方，您會發現一個場景是臨時創建的。

字幕動畫

為簡便起見，我省略了字幕動畫。我相信您會看到我在Github上提到的完整代碼清單。就動畫的初始開始和內插到結束鍵值而言，所有字幕動畫均遵循與標題動畫相同的模式。

播放標注動畫

假設將構成標注的節點添加到JavaFX Pane布局節點，則需要停止順序動畫calloutAnimation 。然后，您需要初始化所有不顯示的節點（visible屬性設置為false）。最后，您需要調用play（）方法。

getChildren().addAll(head,firstLeaderLine,secondLeaderLine,mainTitle,subTitleRect,subTitle);calloutAnimation.stop();getChildren().forEach(node -> node.setVisible(false));calloutAnimation.play();

結論

通過使用JavaFX的動畫API和簡單的形狀，創建動畫標注非常容易。在本文中，您學習了如何使用SequentialTransition對象來順序調用較小的動畫（時間軸）。

構建每個時間軸動畫的標注的每個步驟，將使用根據形狀屬性（例如圓的半徑）在關鍵值上插值的關鍵幀。之后，在學習如何對引導線進行動畫處理之后，您還學到了一個巧妙的技巧，可以通過applyCss（）和layout（）方法幫助確定主標題文本的大小。由于樣式和字體大小的原因，在將UI組件呈現到主場景圖上之前，很難知道它的大小。

現在，您知道如何實現動畫標注，我相信您將使應用程序更具吸引力。編碼愉快！

翻譯自: https://www.javacodegeeks.com/2018/10/animated-effects-javafx-callouts.html