简体   繁体   中英

iOS - Pie progress bar with rounded corners

I need to implement a progress bar according to this design :

在此处输入图片说明

As you can see, there is a corner radius to the bar itself.

This is how it looks now with my current code :

在此处输入图片说明

So, how to do that? This is my current code:

- (void)animateProgressBarToPercent:(float)percent
{
    if (percent > 1.0f) return;

    int radius = 42.7f;
    int strokeWidth = 7.f;
    CGColorRef color = [UIColor someColor].CGColor;
    int timeInSeconds = percent * 5;

    CGFloat startAngle = 0;
    CGFloat endAngle = percent;

    CAShapeLayer *circle = [CAShapeLayer layer];
    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
    circle.position = CGPointMake(self.center.x - radius, self.center.y + strokeWidth);
    circle.fillColor = [UIColor clearColor].CGColor;
    circle.strokeColor = color;
    circle.lineWidth = strokeWidth;
    circle.strokeEnd = endAngle;

    [self.layer addSublayer:circle];

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = timeInSeconds;
    drawAnimation.repeatCount         = 1.0;
    drawAnimation.removedOnCompletion = NO;

    drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle];
    drawAnimation.toValue   = [NSNumber numberWithFloat:endAngle];

    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
}
circle.lineCap = kCALineCapRound

只需设置您的CAShapeLayer此属性

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM