通过JavaFX标注制作动画效果

在本文中，您将学习如何使用JavaFX的动画API创建标注。您可以在https://www.youtube.com/watch?v=XTHbB0LRdT4的 YouTube网站上查看这些标注的演示示例。

JavaFX的动画

什么是标注？

我敢肯定，您已经看过广告或科幻电影，它们使用在图像顶部显示的标注来指示场景中的物体。在本文中，您将学习如何使用JavaFX的Animation API创建动画标注效果。使用这种效果，您可以将文本放置到场景中，然后通过线条或箭头将文本连接到感兴趣的项目。

图1显示了在本文的上下文中组合在一起构成标注的各个部分。

JavaFX的动画

^{图1.典型标注的不同部分}

以下是图1中所示各个部分的定义：

头部 –指示图像中的项目的点（圆圈）
引导线 –从头部到另一点的线，通常形成对角线
引伸线末端 – 引伸线段的末端 （水平线）
主标题 –主标题文本。正文开始在引导线的终点滚动
字幕矩形 –来自主标题底部的一个小动画矩形
字幕 - 字幕文字。字幕文本将在主标题文本下方

并非所有标注都相同。不过，大多数将包含这些元素中的大多数。

标注通常以静态方式指出书籍或杂志中的内容，但如果可以对标注进行动画处理，则在视频中要好得多。一个不错的动画效果是从绘制一个点（头）开始，然后画一条线（引导线），然后滚动一个主标题，最后滚动一个字幕。当动画结束显示时，它可以暂停一会儿（恰好足以允许观看者阅读标题文本），然后将整个过程反向进行，以退出场景。

动画标注

现在您知道了标注的构成，我们可以跳入一些JavaFX代码来为图1中所示的每个片段（1-6）设置动画。

由于标注的每个部分都是按顺序进行动画处理的，因此您将首先创建一个javafx.animation.SequentialTransition实例。一个SequentialTransition拥有零到许多Animation对象。创建方法如下：

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组件呈现到主场景图上之前，很难知道它的大小。

现在，您知道如何实现动画标注，我相信您将使应用程序更具吸引力。编码愉快！