Arc / Circle animation in iphone

Question

Hi,

How would I animate a circle on the iPhone so that the arc starts at "0 degrees" and ends at "360 degrees"?

Advance Thanks, Sat

Answer 1

You need to read the Quartz 2D Programming Guide's section on arcs. (I am assuming you are creating an app with the Cocoa Touch API, not a web app.) You also need to know how to set up a custom animation. You will have to create a custom UIView or CALayer to do the drawing, and create a property (arc degree) that can be animated with a CAAnimation object. Alternatively, you can control the animation using an NSTimer instead. You pretty much have to have a grasp of these classes (and others) to pull this off.

Answer 2

you should read the documentation that Felixyz provided and if you want an example of how to animate the circle have a look over the MBProgressHUD at this link link text. The loader has two modes one with a UIViewActivityIndicator and a progress indicator(a filling circle that it is animated from 0 to 360 degress) i think the last mode is what you want.

the fallowing code is from copy/paste from that implementation that animates the circle:

   - (void)drawRect:(CGRect)rect {    
CGRect allRect = self.bounds;   
CGRect circleRect = CGRectMake(allRect.origin.x + 2, allRect.origin.y + 2, allRect.size.width - 4, allRect.size.height - 4);     
CGContextRef context = UIGraphicsGetCurrentContext(); 
// Draw background    
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); // white    
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 0.1); // translucent white    
CGContextSetLineWidth(context, 2.0);    
CGContextFillEllipseInRect(context, circleRect);    
CGContextStrokeEllipseInRect(context, circleRect); 
// Draw progress    
float x = (allRect.size.width / 2);    
float y = (allRect.size.height / 2);    
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0); // white    
CGContextMoveToPoint(context, x, y);    
CGContextAddArc(context, x, y, (allRect.size.width - 4) / 2, -(PI / 2), (self.progress * 2 * PI) - PI / 2, 0);    
CGContextClosePath(context);    CGContextFillPath(context);
}

but read the documentation first! hope it helps

Answer 3

Here you can find a great sample code about circle animation:

http://www.iphonedevsdk.com/forum/iphone-sdk-development/24152-draw-animated-circle-iphone-using-core-graphics.html