java - 如何在 JavaFX 中为两个节点之间的二维曲线箭头设置动画

Question

我在我的项目中处理 SVGPaths(从 Shape 类扩展)，而且我正在努力提高自己在 JavaFX 中的动画。问题是，我想在两个节点之间创建 2D 弯曲箭头动画。在这里您可以看到我的 map 示例包括国家(换句话说节点/形状)，以便您更清楚。

因此，请考虑每当鼠标光标位于节点上时，二维箭头将开始动画以指向邻国。而且，箭头看起来像这样；

我研究了互联网并阅读了一些关于 JavaFX 动画的教程，但找不到明确的内容。我将不胜感激每一个答案，无论如何都要感谢。

编辑:最后我实现了一个关于在两个矩形的中点之间旋转箭头的适当动画。这是简单的源代码；

Rectangle rect1 = new Rectangle(71, 64, 31, 21); // Create first rectangle
Rectangle rect2 = new Rectangle(158, 64, 35, 21); // Create second rectangle

rect1.setVisible(false);
rect2.setVisible(false);

worldMap.getChildren().add(rect1); // add both of them in to the Group Layout
worldMap.getChildren().add(rect2);

Path path = new Path(); // Create the oath object which arrow will rotate on

MoveTo moveTo = new MoveTo();

moveTo.setX( rect1.getX()+ (rect1.getWidth()/2) );
moveTo.setY( rect1.getY()+ (rect1.getHeight()/2) );

QuadCurveTo quadCurveTo = new QuadCurveTo(); 

quadCurveTo.setX( rect2.getX()+(rect2.getWidth()/2) );
quadCurveTo.setY( rect2.getY()+(rect2.getHeight()/2) );
quadCurveTo.setControlX( ( rect1.getX()+rect2.getX() ) /2 );
quadCurveTo.setControlY( ( rect1.getY()-50) );

path.getElements().add(moveTo);
path.getElements().add(quadCurveTo);
path.setStrokeWidth(3); 
path.setStroke(Color.BLACK);
path.setMouseTransparent(true);

final Polygon arrow = new Polygon(); // Create arrow

arrow.getPoints().addAll(new Double[] {50.0,50.0,70.0,50.0,70.0,42.0,82.0,54.0,70.0,66.0,70.0,58.0,50.0,58.0});
arrow.setFill(Color.GREEN);

PathTransition pathTransition = new PathTransition(); //

pathTransition.setDuration(Duration.millis(750));
pathTransition.setPath(path);
pathTransition.setNode(arrow);
pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
pathTransition.setCycleCount(Timeline.INDEFINITE);
pathTransition.setAutoReverse(true);
pathTransition.play();

现在我想创建一个动画，它提供箭头将从起点开始延伸直到到达终点。

Answer 1

JavaFX 2D/3D 非常适合使用 JDK 8。

阅读 FXexperience 中的示例

下载的 JKD 8 包括 3D。

Download JDK8 http://jdk8.java.net