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.