Search code examples
iphoneioscore-animation

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

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:

demo for the clock animation

Any idea? Greatly appreciated!

Solution

  • 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);