Using CAShapeAnimation Progressively Using Taps iOS - 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.