iOS动画 —— CAShapeLayer

简介

• CAShapeLayer属于QuartzCore框架，继承自CALayer。CAShapeLayer是在坐标系内绘制贝塞尔曲线的，通过绘制贝塞尔曲线，设置shape(形状)的path(路径)，从而绘制各种各样的图形以及不规则图形。因此，使用CAShapeLayer需要与UIBezierPath一起使用。
• UIBezierPath类允许你在自定义的 View 中绘制和渲染由直线和曲线组成的路径.。你可以在初始化的时候直接为你的UIBezierPath指定一个几何图形。
• 通俗点就是UIBezierPath用来指定绘制图形路径，而CAShapeLayer就是根据路径来绘图的。

优点

1. 渲染快速。CAShapeLayer使用了硬件加速(使用CPU渲染)，绘制同一图形会比用Core Graphics快很多
2. 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。
3. 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。

与drawRect比较

1. drawRect：属于CoreGraphics框架，占用CPU，性能消耗大，不建议重写
2. CAShapeLayer：属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存
3. 温馨提示：drawRect只是一个方法而已，是UIView的方法，重写此方法可以完成我们的绘制图形功能。

CAShapeLayer与UIBezierPath的关系

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

主要属性

主要属性
// CAShapeLayer 绘制的路径
@property(nullable) CGPathRef path;

//路径中的填充颜色
@property(nullable) CGColorRef fillColor;

//填充规则
@property(copy) NSString *fillRule;

//画笔颜色（路径的颜色，边框颜色）
@property(nullable) CGColorRef strokeColor;

//这是一组范围值，路径绘制开始和结束的范围（0 -> 1）
@property CGFloat strokeStart;
@property CGFloat strokeEnd;

//设置虚线显示的起点距离，设置为8，则显示长度8之后的线
@property CGFloat lineDashPhase;

//设置虚线线段的长度和空格的长度，@[@20,@30,@40,@50],画20空30画40空50
@property(nullable, copy) NSArray *lineDashPattern;

//以下属性参见 UIBezierPath 的介绍
@property CGFloat lineWidth;
@property CGFloat miterLimit;
@property(copy) NSString *lineCap;
@property(copy) NSString *lineJoin;

案例

绘制一个矩形，使用CAShapeLayer创建一个图层

///  矩形
-(void)createRect{
   // 矩形的尺寸
   CGRect rect = CGRectMake(50, 50, 100, 100);
   UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];
   
   // 在view上直接绘制，而不是添加控件图层
   CAShapeLayer * shapeLayer = [CAShapeLayer layer];
   
   // 不设置frame 默认同self.view
   shapeLayer.frame = CGRectMake(150, 30, 200, 400);
   shapeLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
   
   //设置填充颜色
   shapeLayer.fillColor = [UIColor yellowColor].CGColor;
   //设置线的颜色
   shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
   //设置线宽
   shapeLayer.lineWidth = 2.0;
   // 边线路径的完成情况
   shapeLayer.strokeStart = 0;
   shapeLayer.strokeEnd = 1;
   
   // 设置CAShapeLayer与UIBezierPath关联
   shapeLayer.path = path.CGPath;
   
   // 将CAShaperLayer放到某个层上显示
   [self.view.layer addSublayer:shapeLayer];
}

GitHub: https://github.com/iOSlixiang/Animations.git