CircleAnimation | Circular animation - Animation for Circular disappearance | Animation library

There is nothing special here. It is almost exactly the same as your initial code but with a small tweak for the rotation angle.

Your initial animation looks great to start with! Like you said, the "snap" where the animation restarts from 0% of the strokeEnd is what gives it off.

As @MadProgrammer pointed out, theoretically you can get rid of the "snap" by never starting or ending the stroke at 0%. This ensures there is always some portion of the stroke visible.

This is a great start, but unfortunately strokeStart and strokeEnd do not allow values outside of the [0.0, 1.0] range. So you can't exactly create an animation (without many keyframes) so that the stroke positions overlap in each animation loop (because you would need to use values out of range to cover the full circle).

So, what I have done is use the above method anyway and ended up with the animation shown below. The arc length of the stroke at the start and end of the animation are equal - very important.

Then, using your existing rotation animation I very slightly rotate the entire drawing during the stroke animation so that the start and end arcs seem to land on top of each other. The rotation angle was calculated as follows.

0.07 was selected by subtracting your initial value for strokeStartAnimation.toValue by 1.0.

• The scalar length of the arc would then be, 0.07 (S).
• The radius of the circle would bounds.width / 2 (r).
• To obtain the arc length (L), we need to multiply scalar length by the Perimeter (P).
• The relationship between arc length (L) and the rotation angle (theta) is,