CAShapeLayer + UIBezierPath结合动画效果

先简单的介绍下CAShapeLayer
1,CAShapeLayer继承自CALayer，可使用CALayer的所有属性
2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义。
Shape：形状
贝塞尔曲线可以为其提供形状，而单独使用CAShapeLayer是没有任何意义的。
3,使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形

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

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

CAShapeLayer有着几点很重要:
1. 它依附于一个给定的path,必须给与path,而且,即使path不完整也会自动首尾相接
2. strokeStart以及strokeEnd代表着在这个path中所占用的百分比
3. CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果

上代码：

#import "ViewController.h"

@interface ViewController ()
//创建全局属性的ShapeLayer
@property (nonatomic, strong) CAShapeLayer *shapeLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
//创建出CAShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置
    self.shapeLayer.position = self.view.center;
    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor

    //设置线条的宽度和颜色
    self.shapeLayer.lineWidth = 1.0f;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;

    //创建出圆形贝塞尔曲线  这个方法是根据一个矩形画内切曲线。通常用它来画圆或者椭圆
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];


    //让贝塞尔曲线与CAShapeLayer产生联系  从贝塞尔曲线获取到形状
    self.shapeLayer.path = circlePath.CGPath;

    //添加并显示
    [self.view.layer addSublayer:self.shapeLayer];



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


  /*
    现在我们要用到CAShapeLayer的两个参数，strokeEnd和strokeStart
Stroke:用笔画的意思
    在这里就是起始笔和结束笔的位置
    Stroke为1的话就是一整圈，0.5就是半圈，0.25就是1/4圈。以此类推

    */


    //  如果我们把起点设为0，终点设为1.0    设置stroke起始点
    self.shapeLayer.strokeStart = 0;
    self.shapeLayer.strokeEnd = 1.0;

}
@end

运行结果为一圆形动画图