Search code examples
iphonecore-animationcore-graphics

iPhone: Drawing a curved line until it becomes a circle animation

I wish to draw a curved line until it makes a full rotation and joins to become a complete circle, just the circle outline, not filled. This has to be animated over a number of seconds.

Can anyone point me in the right direction? I already asked a similar question to this but I worded it incorrectly so everyone had a hard time understanding what I meant and thus it got lost in the sea of questions.

Many Thanks for any help

[edit]

I'm currently sub-classing UIView and overriding drawRect. I found code to draw a filled circle but I only require the stroke.

- (void)drawRect:(CGRect)rect {
// Drawing code

CGRect allRect = self.bounds;
CGRect circleRect = CGRectInset(allRect, 2.0f, 2.0f);

CGContextRef context = UIGraphicsGetCurrentContext();

// Draw background
CGContextSetRGBStrokeColor(context, self.strokeValueRed, self.strokeValueGreen, self.strokeValueBlue, self.strokeValueAlpha); // white
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 0.1f); // translucent white
CGContextSetLineWidth(context, self.lineWidth);
CGContextFillEllipseInRect(context, circleRect);
CGContextStrokeEllipseInRect(context, circleRect);

// Draw progress
CGPoint center = CGPointMake(allRect.size.width / 2, allRect.size.height / 2);
CGFloat radius = (allRect.size.width - 4) / 2;
CGFloat startAngle = - ((float)M_PI / 2); // 90 degrees
CGFloat endAngle = (self.progress * 2 * (float)M_PI) + startAngle;
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f); // white
CGContextMoveToPoint(context, center.x, center.y);
CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0);
CGContextClosePath(context);
CGContextFillPath(context);
}

[edit #2]

I changed the code to remove all the fill references but now its not drawing anything :( any ideas?

- (void)drawRect:(CGRect)rect
{
// Drawing code

CGRect allRect = self.bounds;
CGContextRef context = UIGraphicsGetCurrentContext();

// Draw background
CGContextSetRGBStrokeColor(context, self.strokeValueRed, self.strokeValueGreen, self.strokeValueBlue, self.strokeValueAlpha); // white
CGContextSetLineWidth(context, 5);

// Draw progress
CGPoint center = CGPointMake(allRect.size.width / 2, allRect.size.height / 2);
CGFloat radius = (allRect.size.width - 4) / 2;
CGFloat startAngle = - ((float)M_PI / 2); // 90 degrees
CGFloat endAngle = (self.progress * 2 * (float)M_PI) + startAngle;
CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0);
CGContextStrokePath(context);
}

[edit #3] Solution

Right I feel like a right dickhead! the problem was that the stroke colour values were not initialised meaning that line was being draw but obviously could not see it!!

Solution

  • Take out everything that says Fill.

    Change the CGContextFillPath at the end to CGContextStrokePath.

    Take out the CGContextMoveToPoint and CGContextClosePath near the end. Those just outline the straight sides of the wedge.

    You might have to change the CGContextMoveToPoint to move to the start point of the arc instead of the center, instead of taking it out.