私は自分のプロジェクトで SVGPaths ( Shape クラスから拡張) を扱っています。さらに、JavaFX のアニメーションについて自分自身を改善しようとしています。問題は、2 つのノード間に 2D 曲線矢印アニメーションを作成したいということです。ここでは、より明確にするために、私のマップのサンプルに国 (つまり、ノード/形状) が含まれていることがわかります。
したがって、マウス カーソルがノード上にあるときはいつでも、2D 矢印がアニメーションを開始して近隣の国を指すことを考慮してください。そして、矢印は次のようになります。
私はインターネットを調査し、JavaFX のアニメーションに関するいくつかのチュートリアルを読みましたが、明確なものを見つけることができませんでした。とにかく、すべての回答に感謝します。
編集: 最後に、2 つの長方形の中点の間で矢印を回転させる適切なアニメーションを実装しました。これが簡単なソースコードです。
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();
ここで、矢印が始点から終点に到達するまで伸び始めるアニメーションを作成したいと考えています。