CAShapeLayer和UIBezierPath做的进度条

CAShapeLayer介绍

1. CAShapeLayer继承自CALayer，可使用CALayer的所有属性。

2. CAShapeLayer需要和贝塞尔曲线配合使用才有意义。

3. 使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形

关于CAShapeLayer和DrawRect的比较

1. DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大
2. CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

贝塞尔曲线与CAShapeLayer的关系

1. CAShapeLayer中shape代表形状的意思，所以需要形状才能生效
2. 贝塞尔曲线可以创建基于矢量的路径
3. 贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape
4. 用于CAShapeLayer的贝塞尔曲线作为Path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线.

总结：形状由贝塞尔曲线决定，过程由strokeStart ,strokeEnd决定。可以使用timer，slider(滑块)，动画等改变数值进行控制。

练习一下CAShapeLayer和UIBezierPath的知识，所以做个小demo。

#import 

@interface YBProgressView : UIView

@property (nonatomic, assign) float progress; /**< 进度条进度 0-1*/

@property(nonatomic,assign)float progressWidth;

@property(nonatomic,strong)UIColor *bottomCircleColor;

@property(nonatomic,strong)UIColor *topCircleColor;

@end

#import "YBProgressView.h"

#define WIDTH self.frame.size.width
#define HEIGHT self.frame.size.height

@interface YBProgressView ()

@property(nonatomic,strong)UILabel *centerLabel;

@property(nonatomic,strong)CAShapeLayer *topLayer;
@property(nonatomic,strong)CAShapeLayer *bottomLayer;

@end

@implementation YBProgressView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.backgroundColor = [UIColor clearColor];
        
        [self initData];
        
        [self loadUI];
        
        
        
    }
    return self;
}

- (void)initData
{
    self.progressWidth = 3.0;
    self.bottomCircleColor = [UIColor lightGrayColor];
    self.topCircleColor = [UIColor redColor];
}

- (void)loadUI
{
    
    CGPoint center = CGPointMake(WIDTH/2.0, WIDTH/2.0);
    CGFloat radius = (WIDTH-self.progressWidth*2.0)/2.0;
    CGFloat startAngle = -M_PI_2;
    CGFloat endAngle = M_PI*3.0/2.0;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    
    CAShapeLayer *bottomLayer = [CAShapeLayer layer];
    bottomLayer.path = path.CGPath;
    bottomLayer.frame = self.bounds;
    bottomLayer.fillColor = [UIColor clearColor].CGColor;
    bottomLayer.strokeColor = self.bottomCircleColor.CGColor;
    [self.layer addSublayer:bottomLayer];
    self.bottomLayer = bottomLayer;
    
    CAShapeLayer *topLayer = [CAShapeLayer layer];
    topLayer.path = path.CGPath;
    topLayer.frame = self.bounds;
    topLayer.fillColor = [UIColor clearColor].CGColor;
    topLayer.strokeColor = self.topCircleColor.CGColor;
    topLayer.strokeEnd = 0;
    [self.layer addSublayer:topLayer];
    self.topLayer = topLayer;
    
    
    
    UILabel *centerlab = [[UILabel alloc]init];
    centerlab.frame = self.bounds;
    centerlab.textAlignment = NSTextAlignmentCenter;
    self.centerLabel = centerlab;
    [self addSubview:centerlab];
}

- (void)setProgressWidth:(float)progressWidth
{
    if (_progressWidth!= progressWidth) {
        _progressWidth = progressWidth;
       self.bottomLayer.lineWidth = self.progressWidth;
        self.topLayer.lineWidth = self.progressWidth;
    }
}

- (void)setTopCircleColor:(UIColor *)topCircleColor
{
    if (_topCircleColor != topCircleColor) {
        _topCircleColor = topCircleColor;
        self.topLayer.strokeColor =_topCircleColor.CGColor;
    }
}

- (void)setBottomCircleColor:(UIColor *)bottomCircleColor
{
    if (_bottomCircleColor != bottomCircleColor) {
        _bottomCircleColor = bottomCircleColor;
        self.bottomLayer.strokeColor = _bottomCircleColor.CGColor;
    }
}

-  (void)setProgress:(float)progress{
    
    if (_progress != progress) {
        _progress = progress;
        
        if (progress >= 1.0 || progress < 0) {
            return;
        }
        
        self.topLayer.strokeEnd = progress;
        
        self.centerLabel.text = [NSString stringWithFormat:@"%.02f%%",progress*100];
        
        
        
    }
}


@end

测试一下

   YBProgressView *view = [[YBProgressView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    view.topCircleColor = [UIColor purpleColor];
    view.bottomCircleColor = [UIColor yellowColor];
    view.progressWidth = 10;
    [self.view addSubview:view];
    
    [NSTimer scheduledTimerWithTimeInterval:0.1 repeats:YES block:^(NSTimer * _Nonnull timer) {
        
        view.progress += 0.01;
        
    }];
    

A282FE4D-7F7B-4062-B724-B7B821DFDEDD.png