CAShapeLayer仿进度条

• 先看下简单效果

shapeLayer.gif

先简单的介绍下CAShapeLayer

 1.CAShapeLayer继承自CALayer，可使用CALayer的所有属性(Shape：形状)
 2.CAShapeLayer需要和贝塞尔曲线配合使用才有意义。贝塞尔曲线可以为其提供形状，而单独使用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是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

• 说完了简介们来看一下如何创建一个简单的圆形进度条

#import "ViewController.h"
@interface ViewController ()
{
    CGFloat add;
}
@property(nonatomic,strong)NSTimer *timer;
@property(nonatomic,strong)CAShapeLayer *shapeLayer;
@end
@implementation ViewController
//定时器
       - (NSTimer *)timer
{
    if (!_timer) {
        _timer = [NSTimer scheduledTimerWithTimeInterval:0.1
                                                  target:self
                                                selector:@selector(timeAction)
                                                userInfo:nil
                                                 repeats:YES];
                 }
return _timer;
}
//定时器方法 
  - (void)timeAction
{
    if(self.shapeLayer.strokeEnd > 1 && self.shapeLayer.strokeStart < 1)
    {
        self.shapeLayer.strokeStart += add;
    }
    else
    if (self.shapeLayer.strokeStart == 0)
    {
        self.shapeLayer.strokeEnd += add;
    }
    if (self.shapeLayer.strokeEnd == 0)
    {
        self.shapeLayer.strokeStart = 0;
    }
    if (self.shapeLayer.strokeStart == self.shapeLayer.strokeEnd)
    {
        self.shapeLayer.strokeEnd = 0;
    }
}
  - (void)viewDidLoad {
    [super viewDidLoad];
    //创建shapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = CGRectMake(self.view.center.x - 100, self.view.center.y - 100, 200, 200);
    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
    //设置shapeLayer边框线
    self.shapeLayer.lineWidth = 1.0f;
    //边框线颜色给个随机色
    self.shapeLayer.strokeColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0 blue:arc4random() % 256 / 255.0 alpha:1].CGColor;
    //创建圆形贝塞尔曲线
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    //shapelayer关联贝塞尔曲线
    self.shapeLayer.path = bezierPath.CGPath;
    [self.view.layer addSublayer:self.shapeLayer];
    
    //设置stroke的起始点 1为一整圈
    self.shapeLayer.strokeStart = 0;
    self.shapeLayer.strokeEnd = 0;
    //递增量
    add = 0.1;
    self.timer.fireDate = [NSDate distantPast];
}