How to draw fan shape with animation by using UIBezierPath?

Question

By fan shape I mean the effect in the following image:

I want to show the part of deep color with animation, from 0 to 43%. Can anyone suggest the appropriate way of doing this?

Below is the code snippet which I tried, but it only draws the fan-shape without animation.

CABasicAnimation *bas=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
bas.duration=1;
bas.delegate=self;
bas.fromValue=[NSNumber numberWithInteger:0];
bas.toValue=[NSNumber numberWithInteger:1];

CGPoint arcCenter=self.center;
UIBezierPath *_bezierpath=[[UIBezierPath   bezierPathWithArcCenter:arcCenter
                                                            radius:150
                                                        startAngle:-M_PI_2
                                                          endAngle:2*M_PI*0.5 -M_PI_2
                                                         clockwise:YES]retain];
[_bezierpath addLineToPoint:self.center];
[_bezierpath closePath];


CAShapeLayer *_shapeLayer=[CAShapeLayer layer];
_shapeLayer.fillColor=[UIColor yellowColor].CGColor;
_shapeLayer.path = _bezierpath.CGPath;
_shapeLayer.position =CGPointMake(-self.center.x+self.view.frame.size.width/2,-self.center.y+self.view.frame.size.height/2);
[self.view.layer addSublayer:_shapeLayer];

[_shapeLayer addAnimation:bas forKey:@"key"];

Answer 1

The general idea here is to draw an arc using a large line width. The strokeEnd property of the CAShapeLayer determines what percentage of the arc is drawn. Initially, you want srokeEnd to be zero, so that nothing is drawn. You can then animate strokeEnd from 0.0 to 0.43 to display 43% of the arc. This assumes that the bezier path is setup to draw an arc through an angle about 2.3 times more than the angle shown in your image.

In the code below, the center of the arc is at the center of the parent view, and the radius of the arc is chosen so that the outside edge of the arc reaches the edge of the parent view (looks like you'll want to adjust the radius a little). The endAngle of the arc was chosen so that 43% of the arc looks sort of like the image you posted (you'll want to adjust that as well).

- (void)addPieShapeToView:(UIView *) view
{
    int thickness = 40;
    int x = view.bounds.size.width  / 2;
    int y = view.bounds.size.height / 2;
    int r = (x < y ? x : y) - thickness / 2;

    UIBezierPath *path = [UIBezierPath new];
    [path moveToPoint:CGPointMake(x, y - r)];
    [path addArcWithCenter:CGPointMake(x, y) radius:r startAngle:-M_PI_2 endAngle:2.88 clockwise:YES];

    UIColor *blue = [UIColor blueColor];
    UIColor *clear = [UIColor clearColor];

    self.timerLayer = [CAShapeLayer new];
    self.timerLayer.frame = view.bounds;
    self.timerLayer.path = [path CGPath];
    self.timerLayer.strokeColor = [blue CGColor];
    self.timerLayer.fillColor = [clear CGColor];
    self.timerLayer.lineWidth = thickness;
    self.timerLayer.strokeEnd = 0;

    [view.layer addSublayer:self.timerLayer];
}

- (void)animationForPieShape
{
    CABasicAnimation *timerAnimation;
    timerAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    timerAnimation.duration = 1;
    timerAnimation.fromValue = @0.00;
    timerAnimation.toValue   = @0.43;
    self.timerLayer.strokeEnd = 0.43;
    [self.timerLayer addAnimation:timerAnimation forKey:nil];
}

Answer 2

This is my code

-(void)initFanShapeGetCash
{
CGRect rect=circleViewGetCash.frame;
CGRect layerRect = CGRectMake(0, 0, 92, 92);

UIBezierPath *path=[[UIBezierPath   bezierPathWithArcCenter:CGPointMake(rect.size.width/2,rect.size.height/2)
                                                     radius:46
                                                 startAngle:0
                                                   endAngle:2*M_PI
                                                  clockwise:YES]retain];

arcLayer=[CAShapeLayer layer];
arcLayer.path=path.CGPath;//46,169,230
arcLayer.fillColor=[NSString colorWithHexString:@"ffd0b0"].CGColor;
arcLayer.strokeColor=[UIColor colorWithWhite:1 alpha:0.7].CGColor;
arcLayer.lineWidth=0;
arcLayer.frame=layerRect;
[circleViewGetCash.layer addSublayer:arcLayer];

UIBezierPath *path2=[UIBezierPath bezierPath];
[path2 addArcWithCenter:CGPointMake(rect.size.width/2,rect.size.height/2) radius:28 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
arcLayer=[CAShapeLayer layer];
arcLayer.path=path2.CGPath;//46,169,230
arcLayer.fillColor=[UIColor clearColor].CGColor;
arcLayer.strokeColor=[NSString colorWithHexString:@"fe7110"].CGColor;
arcLayer.lineWidth=30;
arcLayer.frame=layerRect;
[circleViewGetCash.layer addSublayer:arcLayer];
[self fanShapeAnimation:arcLayer];

UIBezierPath *path1=[[UIBezierPath   bezierPathWithArcCenter:CGPointMake(rect.size.width/2,rect.size.height/2)
                                                      radius:14
                                                  startAngle:0
                                                    endAngle:2*M_PI
                                                   clockwise:YES]retain];

arcLayer=[CAShapeLayer layer];
arcLayer.path=path1.CGPath;//46,169,230
arcLayer.fillColor=[UIColor whiteColor].CGColor;
arcLayer.strokeColor=[NSString colorWithHexString:@"fe7110"].CGColor;
arcLayer.lineWidth=2;
arcLayer.frame=layerRect;
[circleViewGetCash.layer addSublayer:arcLayer];
}

-(void)fanShapeAnimation:(CALayer*)layer
{
CABasicAnimation *bas=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
bas.duration=1;
bas.delegate=self;
bas.fromValue=[NSNumber numberWithInteger:0];
bas.toValue=[NSNumber numberWithInteger:1];
[layer addAnimation:bas forKey:@"key"];
}