iOS: How to draw a circle step by step with NSTimer

Question

I'd like to draw a circle without filling (only border of the circle) step by step (like animated timer). 1 spin is equal 1 day (24 hours). I really don't know what to do.

Steps I've made

1) I've tried https://github.com/danielamitay/DACircularProgress (it's too wide line of progress)

2) I've tried to draw a circle with many arcs.

Can you put me some code please. I really confused. Thanks in advance.

EDIT

I'd like to use NSTimer because I have a button which allow user to stop drawning a circle. If user touch a button again - drawning will have to continue.

Answer 1

What I would do is to create a path that is a circle and use that with a CAShapeLayer and animate the strokeEnd similar to what I did in this answer.

It would look something like this (but I didn't run this code so there may be typos and other mistakes):

UIBezierPath *circle = [UIBezierPath bezierPathWithArcCenter:center
                                                      radius:radius
                                                  startAngle:0
                                                    endAngle:2.0*M_PI
                                                   clockwise:YES];

CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.bounds = CGRectMake(0, 0, 2.0*radius, 2.0*radius);
circleLayer.path   = circle.CGPath;
circleLayer.strokeColor = [UIColor orangeColor].CGColor;
circleLayer.lineWidth   = 3.0; // your line width

CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration = 10.0; // your duration

// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = @0;
drawAnimation.toValue   = @1;

Just note that both the path and the shape layer has a position so the circle path should be defined relative to the origin of the shape layers frame. It might be clearer to define the shape layer first and then create an oval inside of its bounds:

CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.bounds = CGRectMake(0, 0, 2.0*radius, 2.0*radius);
circleLayer.position = center; // Set center of the circle

// Create a circle inside of the shape layers bounds
UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:circleLayer.bounds];
circleLayer.path     = circle.CGPath;

// Same appearance configuration as before
circleLayer.strokeColor = [UIColor orangeColor].CGColor;
circleLayer.lineWidth   = 3.0; // your line width

Answer 2

If DACircleProgressenter link description here otherwise works for you, it looks like you can easily set the line thickness.

As opposed to have a simple lineWidth type property, it seems the author of that library sets the thickness based on a ratio to the radius of the circle. This exists as the thicknessRatio property of that class. For example, if your radius is 40, then setting thicknessRatio to 0.025 should yield a line width of 1. That library seems simple and well thought out - consider using it, or learning from it.

The default is set to 0.3, so a circle with a radius of 40 would have a progress line thickness of 12. That's probably what you were seeing.

Good luck!