Animate fillColor property

Question

I am trying to achieve the filling of a circle(something like a pie). I want to fill it from 0 to 360 This is what i have done

CAShapeLayer *circleLayer=[CAShapeLayer layer];
    circleLayer.path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:360 clockwise:YES].CGPath;
    circleLayer.strokeColor=[UIColor redColor].CGColor;
    circleLayer.fillColor=[UIColor blueColor].CGColor;
    [self.view.layer addSublayer:circleLayer];




    //adding animation
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"fillColor"];
    basicAnimation.fillMode=kCAFillModeForwards;
    basicAnimation.fromValue=(id)[UIColor clearColor].CGColor;
    basicAnimation.toValue=(id)[UIColor yellowColor].CGColor;
    basicAnimation.duration=1.5f;
    basicAnimation.repeatCount=10;
    basicAnimation.autoreverses=YES;
    [circleLayer addAnimation:basicAnimation forKey:@"fillColor"];

I am not able to figure out,how do i acheive the effect of color filling from start angle to end angle. Thanks

Answer 1

Your description of what you want to do is unclear. Are you trying to create a "clock wipe" effect, where the color change sweeps like the second hand of a clock?

If so, check out this demo app I created on github:

github animation demo project

Look in particular at the description of the Clock Wipe animation in the read me file.

Here is what the clock wipe animation looks like:

This project animates the mask of an image view to do a clock wipe reveal animation, but it would be a simple matter to animate a shape layer as a content layer of a view instead of making it a mask.

Answer 2

CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 0.7f;
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:1.0f];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[circleLayer addAnimation:animation forKey:@"strokeEnd"];

Answer 3

I have implemented a shape layer subclass for similar requirements. Here is the Github link. For your requirement the arc start radius is 0.0f and end radius is the circle radius. You can also refer the sample project in that link.