2

我正在我的项目中处理 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();

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

4

1 回答 1

0

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

阅读FXexperience中的示例

下载的 JKD 8 包括 3D。

下载JDK8 http://jdk8.java.net

于 2013-03-15T11:12:35.480 回答