IOS中的循环进度条

Question

我想创建一个圆形的进度条，如下所示：如何使用Objective-C和Cocoa做到这一点？我开始做的是创建UIView和编辑drawRect，但是我有点迷茫。任何帮助将不胜感激。谢谢！

Answer 1

我的魔术数字示例（以便更好地理解）：

  CAShapeLayer *circle = [CAShapeLayer layer];

  circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath;

  circle.fillColor = [UIColor clearColor].CGColor;

  circle.strokeColor = [UIColor greenColor].CGColor;

  circle.lineWidth = 4;

  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

  animation.duration = 10;

  animation.removedOnCompletion = NO;

  animation.fromValue = @(0);

  animation.toValue = @(1);

  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

  [circle addAnimation:animation forKey:@"drawCircleAnimation"];

  [imageCircle.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];

  [imageCircle.layer addSublayer:circle];

Answer 2

对于Swift来说，

let circle = UIView(frame: CGRectMake(0,0, 100, 100))

circle.layoutIfNeeded()

let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2)

let circleRadius : CGFloat = circle.bounds.width / 2 * 0.83

var circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(-0.5 * M_PI), endAngle: CGFloat(1.5 * M_PI), clockwise: true    )

let progressCircle = CAShapeLayer()

progressCircle.path = circlePath.CGPath

progressCircle.strokeColor = UIColor.greenColor().CGColor

progressCircle.fillColor = UIColor.clearColor().CGColor

progressCircle.lineWidth = 1.5

progressCircle.strokeStart = 0

progressCircle.strokeEnd = 0.22

circle.layer.addSublayer(progressCircle)

self.view.addSubview(circle)