How to make multicolour circle animation with CAShapeLayer in iphone or xcode?
<p>I am trying to make a circle which will be animated and filled with black color clockwise, the duration of the circle animating is predefined to 20 second, what I want to do is the first 10 seconds it will be filled with black and the rest of the circle will be filled with red, and after the total 20 seconds it will become a 2 colored round circle, but I couldnt find any procedure of it, here is my code by which I drawn the circle animation:</p>

<pre><code>-(void)makeCircle{
int radius = 100;
CAShapeLayer *circle = [CAShapeLayer layer];
//make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius)cornerRadius:radius].CGPath;
//centre the shape in self.view
circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, CGRectGetMidY(self.view.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 = 20.0;//animate over 10 seconds or so...
drawAnimation.repeatCount=1.0;//animate only once;

drawAnimation.removedOnCompletion=NO;

drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.0f];

drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
}
</code></pre>

<p>but I need to know how should I do this?</p>
