Change of position of UILabel for stroke End CGPath

Question

I try to achieve something similar to an attached image, where the circle is animated depending on your level of progress, and then the label is attached to the end of the animation path to show the experience gained, and the unused part of the circle to show the remaining experience. I have a circle animation, as I would like, but I had problems with the appearance of the solution, so that the labels appear in the right place. I tried to set the position of the label in path.currentPoint, but this always seems to be the beginning of the drawn path, not the end.

Any pointers on how to achieve this will be great!

Answer 1

I worked on your question, first of all, to achieve this, you should animate the path real path, and not just strokeEnd , if you strokeEnd only the strokeEnd , your path.currentPoint will always return the circle endPoint of the path to animate the path needed for KeyFramed animation, animation of the “path” as keyPath and transferring the array of paths from the current angle to the desired one, and then to set the correct position for your shortcut, you need to get the current point of all these path values ​​and make another key framed animation with the “position” keyPath and transfer to as values, all these points collected from an array of paths

This is a basic example of work.

The code is on GitHub in this Repo . You still have a lot of work to do, but this may be the starting point for your final decision.

Hope this helps, best regards