CODEWITHSUNDEEP
iphoneioscore-animation
bobzsj87
bobzsj87

Reputation: 818

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!

Upvotes: 1

Views: 1718

Answers (1)

Nico
Nico

Reputation: 3826

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

Upvotes: 1

Related Questions