CABasicAnimation + UIBezierPath - ios

Question

I'm trying to create a circular bar such the one that you can find around the recording button in the native camera on iOS when you are doing a timelapse.
A circle is created along the animation, and once it is completed is removed again "naturally".
I tried next code:
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.lapseBtnOutlet.center.x, self.lapseBtnOutlet.center.y) radius:28 startAngle:2*M_PI*0-M_PI_2 endAngle:2*M_PI*1-M_PI_2 clockwise:YES].CGPath;
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor whiteColor].CGColor;
circle.lineWidth = 2.0;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
animation.duration = self.lapseInterval;
animation.removedOnCompletion = NO;
animation.fromValue = #(0);
animation.toValue = #(1);
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[circle addAnimation:animation forKey:#"drawCircleAnimation"];
But my problem now is that I don't know how to "remove" the line from start-to-end.
I tried with autoreverse property, but it removes the circle from end-to-start instead from start-to-end. Any ideas?

Answer 1

You need to animate the strokeStart from 0 to 1, and when the animation finishes, remove the shape layer.
- (void)viewDidLoad {
[super viewDidLoad];
[self performSelector:#selector(animateProperty:) withObject:#"strokeEnd" afterDelay:1];
[self performSelector:#selector(animateProperty:) withObject:#"strokeStart" afterDelay:3];
}
-(void)animateProperty:(NSString *) prop {
if (! self.circle) {
self.circle = [CAShapeLayer layer];
self.circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.lapseBtnOutlet.center.x, self.lapseBtnOutlet.center.y) radius:28 startAngle:2*M_PI*0-M_PI_2 endAngle:2*M_PI*1-M_PI_2 clockwise:YES].CGPath;
self.circle.fillColor = [UIColor clearColor].CGColor;
self.circle.strokeColor = [UIColor whiteColor].CGColor;
self.circle.lineWidth = 2.0;
[self.view.layer addSublayer:self.circle];
}
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:prop];
animation.delegate = ([prop isEqualToString:#"strokeStart"])? self : nil;
animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fromValue = #0;
animation.toValue = #1;
[self.circle addAnimation:animation forKey:prop];
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
[self.circle removeFromSuperlayer];
self.circle = nil;
}