Question

I have a UIBezierPath (a circle) built incrementally with:

[circlePath addArcWithCenter:clockCenter radius:radius startAngle:angleRadians endAngle:1.5*M_PI clockwise:YES];
...
[circlePath closePath];
[COLOR_CIRCLE setFill];
[circlePath fill];

Occasionally, I would like to animate the fill so that it takes a second to completely fill and follows the path as it was built (clockwise). What is the preferred method of accomplishing this? Right now I’m thinking Core Animation but I’m hoping there’s a fill:withDelay or some such that I haven’t stumbled upon. TIA.

Answer 1

You could try this:

Create a CAShapeLayer whose path is set to your shape. Use this CAShapeLayer as a mask for another layer into which you draw a filled arc/circle. Then animate the arc/circle arc angle from 0º to 360º. That might approximate the effect you want.

I can’t find a “built-in” way to animate the fill as you want. There is a built-in way to animate the stroke, however:

Use a UIView with a CAShapeLayer backing it. CAShapeLayer has a path property. You can then apply an animation to the layer’s strokeStart and/or strokeEnd properties.