Animate CAShapeLayer setPath - ios

Question

I am trying to add animation while drawing a bezierPath. There is base circle darkgray (0 to 360) , green path (-90 to 0) and red path (0 to 90).
#import "ProgressBar.h"
#interface ProgressBar ()
{
CAShapeLayer *lightGrayPath;
}
#end
#implementation ProgressBar
-(id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if(self){
[self initValues];
}
return self;
}
-(id) initWithCoder:(NSCoder *)aDecoder{
self = [super initWithCoder:aDecoder];
if(self){
[self initValues];
}
return self;
}
-(void)awakeFromNib{
[super awakeFromNib];
[self startAnimation];
}
-(void)initValues{
lightGrayPath = [CAShapeLayer layer];
lightGrayPath.fillColor = [UIColor clearColor].CGColor;
lightGrayPath.lineWidth=2.0f;
lightGrayPath.strokeColor =[UIColor colorWithWhite:0 alpha:0.1].CGColor;
[self.layer addSublayer:lightGrayPath];
}
-(void)startAnimation{
CGRect rect=self.bounds;
CGFloat subPathWidth=10.0;
UIBezierPath *bezierPath_lightGray=[UIBezierPath bezierPath];
bezierPath_lightGray.lineWidth=lightGrayPath.lineWidth;
[bezierPath_lightGray addArcWithCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)) radius:(rect.size.height / 2)- subPathWidth/2.0
startAngle:0 endAngle:2*M_PI clockwise:YES];
UIBezierPath *bezierPath_green=[UIBezierPath bezierPath];
bezierPath_green.lineWidth=subPathWidth;
[[UIColor greenColor] setStroke];
[bezierPath_green addArcWithCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)) radius:(rect.size.height / 2)- subPathWidth/2.0 startAngle:-M_PI/2.0 endAngle:0 clockwise:YES];
[bezierPath_green stroke];
[bezierPath_lightGray appendPath:bezierPath_green];
UIBezierPath *bezierPath_red=[UIBezierPath bezierPath];
bezierPath_red.lineWidth=subPathWidth;
[[UIColor redColor] setStroke];
[bezierPath_red addArcWithCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)) radius:(rect.size.height / 2)- subPathWidth/2.0 startAngle:0 endAngle:M_PI_2 clockwise:YES];
[bezierPath_red stroke];
[bezierPath_lightGray appendPath:bezierPath_red];
lightGrayPath.path=bezierPath_lightGray.CGPath;
// CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"path"];
// pathAnimation.duration = 10.0;
// //pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
// pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
// [lightGrayPath addAnimation:pathAnimation forKey:#"path"];
}
#end
I want to show animation of path being drawn. The lightGrayArc should not be animated. The Green arc and the red arc should be.
But, Since I am using only one CAShapeLayer and appending paths to it. When i use animation , it animates the light gray path, no animation for green and red arc.

Answer 1

I would suggest:
Do not animate in drawRect. That's for drawing a single frame.
There are two ways to animate a path:
Don't use CAShapeLayer at all, but instead define a drawRect that performs stroke on one or more UIBezierPath.
To animate, don't use CABasicAnimation, but rather use a CADisplayLink (a type of timer optimized for screen updates) that changes some properties that define where the path starts and ends and then call setNeedsDisplay, which will trigger a call to drawRect that will use those properties to stroke the path for that frame of the animation.
Even easier, don't use drawRect to stroke anything at all. Just add your gray, green, and red arcs as three different CAShapeLayer instances. Let CAShapeLayer do all the rendering of the arcs for you.
When you want to animate the red and green layers, add CABasicAnimation for those respective layers.