Using CAShapeAnimation Progressively Using Taps iOS

Question

As I tap, I would like a counter to increment to increase the arc size of a circle.

The line should animate to the next size and stay there until the next increment is made (lets say from a tap - that i already measure elsewhere), then animate to the next size etc..

Seee the example below

Here is some code I've found so far...

_radius = 150;

CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*_radius, 2.0*_radius)
                                         cornerRadius:_radius].CGPath;
// Center the shape in self.view
circle.position = CGPointMake(CGRectGetMidX(self.target.frame)-_radius,
                              CGRectGetMidY(self.target.frame)-_radius);

// Configure the appearence of the circle
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor blackColor].CGColor;
circle.lineWidth = 5;

// Add to parent layer
[self.view.layer addSublayer:circle];...

// Configure animation
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = 0.3; // "animate over 10 seconds or so.."
drawAnimation.repeatCount         = 1.0;  // Animate only once..
drawAnimation.removedOnCompletion = NO;   // Remain stroked after the animation..

// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
//drawAnimation.toValue   = [NSNumber numberWithFloat:0.0f];

// Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

// Add the animation to the circle

[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

Answer 1

Animating Drawing Values

I've done similar animations in CoreGraphics, so you may want to take a look at that as an alternative if you can't get CAShapeAnimation to work for you. I've got a progress view here that has this sort of animation except in a linear fashion.

- (void)setProgress:(CGFloat)progress {
    self.progressToAnimateTo = progress;
    if (self.animationTimer) {
        [self.animationTimer invalidate];
    }
    self.animationTimer = [NSTimer scheduledTimerWithTimeInterval:0.008 target:self selector:@selector(incrementAnimatingProgress) userInfo:nil repeats:YES];
}

- (void)incrementAnimatingProgress {
    if (_progress >= self.progressToAnimateTo-0.01 && _progress <= self.progressToAnimateTo+0.01) {
        _progress = self.progressToAnimateTo;
        [self.animationTimer invalidate];
        [self setNeedsDisplay];
    } else {
        _progress = (_progress < self.progressToAnimateTo) ? _progress + 0.01 : _progress - 0.01;
        [self setNeedsDisplay];
    }
}

This technique of using another property such as progressToAnimateTo and incrementing the progress value before redrawing could also be harnessed to then redraw the progress of a circle.

Resources

I might also add that there are other implementations of what you're doing here. MBProgressHUD and EVCircularProgressView have this sort of effect.