JavaFX. How to animate the drawing of a Line from starting point to ending point?

Question

I wrote this code to animate a circle:

  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();

I need the path to keep the same color of the circle, so it actually draws a line, and then the line will stay. How to accomplish this idea? Or is there a better way to draw a permanent line with animations?

jewelsea · Answer 1 · 2021-11-26T22:26:57.593

A potential solution:

animation which uses PathTransition as a drawing pen

The line is revealed and appears to grow as the pen movement updates a clip set on the line to gradually reveal more of the line.

To generate the path, define a line with appropriate start and end locations and appropriate stroke properties, instead of using the text path from the linked Sergey's answer.

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

For a square (or butt) line cap, you can use a rectangle as the pen (as in the linked answer).

For a round line cap, you can use a circle rather than a rectangle for the pen.

JavaFX. How to animate the drawing of a Line from starting point to ending point?

1 Answers1