CAShapeLayer的使用

2F530DDAF430228B55CD3323A35F8C1B.jpg

长时间不用CAShapeLayer有些淡忘，正好周末抽时间回顾一下：

1、 先简单的介绍下CAShapeLayer

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

2、关于CAShapeLayer和DrawRect的比较：

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

3、贝塞尔曲线与CAShapeLayer的关系

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

说了那么多，下面直接甩代码：

 //创建出CAShapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置
shapeLayer.position = self.view.center;
shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor
    
//设置线条的宽度和颜色
 shapeLayer.lineWidth = 1.0f;
 shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
//创建出圆形贝塞尔曲线
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    
//让贝塞尔曲线与CAShapeLayer产生联系
shapeLayer.path = circlePath.CGPath;
    
//添加并显示
[self.view.layer addSublayer:shapeLayer];

   /**
    上面的结果是一整个圆，现在我们要用到CAShapeLayer的两个参数，strokeEnd和strokeStart
     Stroke:用笔画的意思
     在这里就是起始笔和结束笔的位置
     Stroke为1的话就是一整圈，0.5就是半圈，0.25就是1/4圈。以此类推
     如果我们把起点设为0，终点设为0.75
  **/
    
//设置stroke起始点
shapeLayer.strokeStart = 0;
shapeLayer.strokeEnd = 0.75;
    
    /*
     下面来加个基础动画玩玩
    */
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
[shapeLayer addAnimation:pathAnima forKey:nil];

252DC1FC-4E34-479F-AE62-3185FF040B83.png