JavaFX。如何为从起点到终点的线绘制动画？

Posted 2023-03-25

【中文标题】JavaFX。如何为从起点到终点的线绘制动画？

【英文标题】：JavaFX. How to animate the drawing of a Line from starting point to ending point?

【发布时间】：2022-01-04 19:04:18

【问题描述】：

我写了这段代码来动画一个圆圈：

  Circle animatedCircle = new Circle();
    animatedCircle.setRadius(10);
    animatedCircle.setFill(Color.YELLOW);
    
    Path path = new Path();
    path.getElements().add(new MoveTo(20,20));
    path.getElements().add(new LineTo(50,50));
    PathTransition transicion = new PathTransition();
    transicion.setDuration(Duration.millis(1000));
    transicion.setPath(path);
    transicion.setNode(animatedCircle);
    transicion.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
    transicion.setCycleCount(Timeline.INDEFINITE);
    transicion.play();

我需要路径保持圆圈的颜色相同，所以它实际上画了一条线，然后这条线会留下来。如何实现这个想法？或者有没有更好的方法用动画画一条永久线？

【问题讨论】：

minimal reproducible example 请..

【参考方案1】：

一个潜在的解决方案：

animation which uses PathTransition as a drawing pen

随着笔的移动更新在线上的剪辑集以逐渐显示更多的线条，线条被显露并似乎变长。

要生成路径，请使用适当的开始和结束位置以及适当的笔划属性定义一条线，而不是使用链接的 Sergey 答案中的文本路径。

Line line = new Line(startX, startY, endX, endY);
line.setStrokeWidth(10);
line.setStrokeLineCap(StrokeLineCap.ROUND);

对于方形（或对接）线帽，您可以使用矩形作为笔（如链接答案中所示）。

对于圆形线帽，您可以使用圆形而不是矩形笔。