CAShapeLayer简介

这里通过一个环形进度条来对CAShapeLayer做简单的介绍

直接上代码：

    // 贝塞尔曲线(创建一个圆)
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2)
                                                        radius:100 / 2.f
                                                    startAngle:0
                                                      endAngle:M_PI*2
                                                     clockwise:YES];
    
    // 创建一个shapeLayer
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame         = self.view.bounds;                
    layer.strokeColor   = [UIColor redColor].CGColor;      // 边缘线的颜色
    layer.fillColor     = [UIColor yellowColor].CGColor;   // 闭环填充的颜色
    layer.lineCap       = kCALineCapSquare;                // 边缘线的类型
    layer.path          = path.CGPath;                     // 从贝塞尔曲线获取到形状
    layer.lineWidth     = 4.0f;                            // 线条宽度
    layer.strokeStart   = 0.0f;
    layer.strokeEnd     = 1.0f;
    
    // 将layer添加进图层
    [self.view.layer addSublayer:layer];

    // 给这个layer添加动画效果
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [layer addAnimation:pathAnimation forKey:nil];

效果图：

说明：

实现一个基于贝塞尔曲线的一个形状层，它可以是圆，椭圆，直线，曲线或者折线，上面代码实现的是一个黄色填充，边沿用红色绘制的圆形，代码首先用贝塞尔绘制了一个闭环的圆形，然后创建形状层，CAShapeLayer继承自CALayer，所有的CALayer都必须有一个frame；

strokeColor是边沿线的颜色，也就是我们的贝塞尔路径的颜色，

fillColor是形状层的填充颜色，这里通过贝塞尔路径得到的形状正好是一个圆，是封闭的，因此看起来是一个黄色的圆形，如果贝塞尔路径不是一个闭环，则这个层会自动连接贝塞尔曲线的起点和终点来形成一个闭环，然后用这个属性颜色去填充；

lineCap是线条边缘线的类型，kCALineCapSquare是方形，kCALineCapRound是圆形等；

strokeStart和strokeEnd是取值范围在0~1之间的浮点型数值，分别表示绘制贝塞尔曲线的起始位置和终止位置在整段贝塞尔路径中的百分比位置，比如上面的圆中，如果设置起始位置是0.5，终止位置是1.0，则效果图如下：这里看到，只是绘制的起点和终点位置发生了变化，当时动画还是从0位置开始，并且填充也是从0位置开始的闭环；

lineDashPhase 线型模板的起始位置

lineDashPattern用来画虚线的，这是一个NSNumber的数组，索引从0开始记，偶数位数值表示实线长度，奇数位数值表示空白长度；

添加如下代码：

layer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:20], [NSNumber numberWithInt:20],  nil];

效果图如下：