How to use CoreAnimation to animate a circle like a clock countdown

Question

I wish to have a time countdown indicator just like a circle to start from a slice of arch to a full circle.

I have tried several ways, both ended up with the arch turning directly to be a full circle, not go clockwise. Shown in demo pics as following:

Any idea? Greatly appreciated!

Answer 1

SetNeedsDisplay when you change one of the angles, you can do some optimizations to only redraw the affected area. Put something like this into your draw function of your view. Good Luck

CGContextRef myContext = UIGraphicsGetCurrentContext();
CGPoint center = { self.bounds.size.width * 0.5f, self.bounds.size.height * 0.5f };


CGContextClearRect(myContext, rect);

CGContextMoveToPoint(myContext, center.x, center.y);
// start and end are in radians.
CGContextAddArc(myContext, center.x, center.y, MIN(self.frame.size.width,self.frame.size.height)*0.5f, _startAngle, _endAngle, NO);
CGContextAddLineToPoint(myContext, center.x, center.y);
CGContextClip(myContext);

CGContextSetFillColorWithColor(myContext,[UIColor redColor].CGColor);
CGContextFillRect(myContext, self.bounds);