如何在JavaFX中为两个节点之间的2D曲线箭头设置动画

Question

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

因此，请注意，只要鼠标光标位于节点2d上，箭头就会开始动画指向邻居国家。而且，箭头看起来像这样;

我研究了互联网，并在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