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

javafx 動畫沒效果

總結

以上是生活随笔為你收集整理的javafx 动画没效果_通过JavaFX标注制作动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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