如何使用UIBezierPath通過動畫繪製扇形形狀？

Question

通過扇形我指的是以下圖像中的效果：

我要顯示顏色深的動畫部分，從0到43％。任何人都可以建議這樣做的適當方式？

下面是我試過的代碼片段，但它只繪製了沒有動畫的扇形。

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

這裏的一般想法是使用大的線寬繪製弧。 CAShapeLayer的strokeEnd屬性確定繪製弧的百分比。最初，您希望srokeEnd爲零，以便沒有任何東西被繪製。然後，您可以從0.0到0.43動畫strokeEnd以顯示弧線的43％。這假定貝塞爾路徑被設置爲通過比圖像中顯示的角度大2.3倍的角度繪製弧。

在下面的代碼中，弧的中心位於父視圖的中心，並選擇弧的半徑以便弧的外邊緣到達父視圖的邊緣（看起來像您將要稍微調整半徑）。圓弧的endAngle被選中，以便43％的弧看起來有點像你發佈的圖像（你也想調整它）。

- (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

這是我的代碼

-(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"]; 
}