Changing UILabel position to strokeEnd of CGPath

Question

I'm trying to achieve something similar to the attached image, where the circle is animated depending on your level progress and then a label is attached to both the end of the animated path to show the gained experience and also the undrawn part of the circle to show the remaining experience. I have the circle animating as wanted but am having trouble coming up with a solution to the labels to appear in the right spot. I've tried setting the position of the label to the path.currentPoint but that always seems to be the start of the drawn path and not the end.

Any pointers on how to achieve this would be great!

Answer 1

I had been working on your question, first of all to achieve this you must animate the path the real path, not only the strokeEnd, if you animate only the strokeEnd your path.currentPoint will always return the circle endPoint of the path, in order to animate the path you need to make a KeyFramed Animation animating the “path” as keyPath and passing an array of paths from current angle to desired one, then in order to set the correct position for your label you need to get de currentPoint of all this paths values and making another keyFramed animation with “position” keyPath and passing as values all this points collected from paths array

This is a basic example working

The code is in GitHub in this Repo You have a lot of work to do yet but, this can be an starting point for your final solution

Hope this helps, best regards