最近在做一個類似于滴滴打車派單的功能，需要做一個圓形進(jìn)度條。效果如下圖：

其中實現(xiàn)圓形進(jìn)度條的demo代碼如下：
 @interface ProgressView() {
    NSUInteger num;
}
/** timer */
@property (nonatomic, strong) NSTimer *timer;
/** 圖片 */
@property (nonatomic, strong) UIImageView *imageView;
/** 背景l(fā)ayer */
@property (nonatomic, strong) CAShapeLayer *backgroundLayer;
/** 進(jìn)度條layer */
@property (nonatomic, strong) CAShapeLayer *progressLayer;

@end

@implementation ProgressView

- (void)dealloc {
    if (_timer) {
        [_timer invalidate];
        _timer = nil;
    }
}

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self buildView];
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
}

- (void)buildView {
    // 設(shè)置self
    self.transform = CGAffineTransformMakeRotation(-M_PI_2);
    self.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);
    self.layer.cornerRadius = self.frame.size.width * 0.5;
    self.layer.masksToBounds = YES;
    // 添加專輯圖片
    [self addSubview:self.imageView];
    self.imageView.image = [UIImage imageNamed:@"img1418"];
    [self addSubview:self.imageView];
    // 設(shè)置進(jìn)度條的背景 Layer
    [self.layer addSublayer:self.backgroundLayer];
    // 設(shè)置進(jìn)度條 Layer
    [self.layer addSublayer:self.progressLayer];
    self.progressLayer.strokeEnd = 0;
    // 設(shè)置 Timer
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeInterval) userInfo:nil repeats:YES];
    self.timer = timer;
}

- (UIImageView *)imageView {
    if (!_imageView) {
        _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
        _imageView.contentMode = UIViewContentModeScaleAspectFit;
    }
    return _imageView;
}

- (CALayer *)backgroundLayer {
    if (!_backgroundLayer) {
        _backgroundLayer = [self buildShapeLayerColor:[UIColor lightGrayColor] lineWidth:kLineWidth];
    }
    return _backgroundLayer;
}

- (CALayer *)progressLayer {
    if (!_progressLayer) {
        _progressLayer =  [self buildShapeLayerColor:[UIColor blueColor] lineWidth:kLineWidth];
    }
    return _progressLayer;
}

- (CAShapeLayer *)buildShapeLayerColor:(UIColor *)color lineWidth:(CGFloat)width  {
    CAShapeLayer *layer = [CAShapeLayer layer];
    CGRect rect = {kLineWidth * 0.5, kLineWidth * 0.5, self.frame.size.width - kLineWidth, self.frame.size.height - kLineWidth};
    // 設(shè)置path
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];
    layer.path = path.CGPath;
    // 設(shè)置layer
    layer.strokeColor = color.CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth = width;
    layer.lineCap = kCALineCapRound;
    return layer;
}

- (void)timeInterval {
    if (num == 20) {
        [self.timer invalidate];
        self.timer = nil;
    }
    num ++;
    [self updateProgressWithNumber:num];
}

- (void)updateProgressWithNumber:(NSUInteger)number {
    [CATransaction begin];

    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
    [CATransaction setAnimationDuration:1];
    // 20為倒計時時間
    self.progressLayer.strokeEnd = number / 20.0f;
    
    [CATransaction commit];
}

這么調(diào)用的：

CGFloat width = [UIScreen mainScreen].bounds.size.width;
    ProgressView *progress = [[ProgressView alloc] initWithFrame:CGRectMake(10, 20, width - 20, width - 20)];
    [self.view addSubview:progress];

效果圖是這樣的：