Question

通过扇形我的意思是下图中的效果：

enter image description here

我希望用动画显示深色部分，从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为零，以便不绘制任何内容。然后，您可以将strokeEnd设置为0.0到0.43，以显示43％的弧。这假设bezier路径设置为绘制弧形的角度大约是图像中显示的角度的2.3倍。

在下面的代码中，弧的中心位于父视图的中心，并选择弧的半径，以便弧的外边缘到达父视图的边缘（看起来像你＆＃ 39;我想稍微调整半径）。选择弧的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"];
}

如何使用UIBezierPath绘制带动画的扇形？

2 个答案: