CAShapeLayer

学习CAShapeLayer

 1、CAShapeLayer 继承自 CALayer,可以使用 CALayer 的所有属性值；
 2、CAShapeLayer 绘制需要与贝塞尔曲线配合才能实现；
 4、CAShapeLayer 属于 CoreAnimation 框架,其动画渲染直接提交到手机的 GPU 当中(不消耗内存),相较于 view 的 drawRect 方法(属于CoreGraphics 框架,使用CPU渲染，消耗的性能极大)而言,其效率极高,能大大优化内存使用情况；
 5、贝塞尔曲线可以创建基于矢量的路径；
 6、贝塞尔曲线给CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染,路径会闭环,所以路径绘制出了Shape；
 7、用于CAShapeLayer的贝塞尔曲线作为path,其path是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线。

 

一、绘制简单的图形

 1 // 绘制简单的图形
 2 - (void)easyShape {
 3     // 创建圆形贝塞尔曲线
 4     UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
 5     // 创建椭圆形贝塞尔曲线
 6     UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)];
 7     // 创建矩形贝塞尔曲线
 8     UIBezierPath *rect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
 9     [self strokeWithPath:oval];
10     [self strokeWithPath:rect];
11     [self strokeWithPath:circle];
12 }
13 
14 /**
15  *  @brief 绘制图形
16  *
17  *  @param path 路径
18  */
19 - (void)strokeWithPath:(UIBezierPath *)path {
20     // 创建CAShapeLayer
21     CAShapeLayer *shape = [CAShapeLayer layer];
22     // frame的大小不能小于贝塞尔取现的frame，否则会出现问题
23     shape.frame = CGRectMake(0, 0, 200, 100);
24     shape.position = self.view.center;
25     
26     // 设置填充颜色
27     shape.fillColor = [UIColor cyanColor].CGColor;
28     
29     // 设置路径颜色
30     shape.strokeColor = [UIColor redColor].CGColor;
31     
32     // 设置路径宽度
33     shape.lineWidth = 2.f;
34     
35     // 设置CAShapeLayer的边界
36     shape.borderWidth = 2.f;
37     
38     // 剪切掉超出父视图的部分
39     shape.masksToBounds = YES;
40     
41     // 建设贝塞尔取现和CAShapeLayer之间的关系
42     shape.path = path.CGPath;
43     
44     // 添加并显示
45     [self.view.layer addSublayer:shape];
46 }

 

二、使用 strokeStart 与 strokeEnd 动画 (strokeStart 的值必须大于 strokeEnd)

1、将 shapeLayer 的 fillColor 设置成透明背景
2、设置线条的宽度(lineWidth)的值
3、设置线条的颜色
4、将 strokeStart值设定为0，然后让strokeEnd的值变化触发隐式动画

 1 - (void)implementProcess {
 2     /**
 3      1、将 shapeLayer 的 fillColor 设置成透明背景
 4      2、设置线条的宽度(lineWidth)的值
 5      3、设置线条的颜色
 6      4、将 strokeStart值设定为0，然后让strokeEnd的值变化触发隐式动画
 7      */
 8     
 9     // 创建CAShapeLayer
10     self.shapeLayer             = [CAShapeLayer layer];
11     self.shapeLayer.frame       = CGRectMake(0, 0, 200, 200);
12     self.shapeLayer.position    = self.view.center;
13     self.shapeLayer.fillColor   = [UIColor clearColor].CGColor;
14     self.shapeLayer.lineWidth   = 1.f;
15     self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
16     
17     // 设置strokeStart和strokeEnd的值
18     self.shapeLayer.strokeStart = 0; // 默认为0，全部绘制(逆时针推算)
19     self.shapeLayer.strokeEnd   = 0;
20     
21     // 创建圆形贝塞尔曲线
22     UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
23     
24     // 关联CAShapeLayer与贝塞尔曲线
25     self.shapeLayer.path = circlePath.CGPath;
26     
27     
28     // 添加并显示
29     [self.view.layer addSublayer:self.shapeLayer];
30     
31     // 使用定时器模拟
32     _timer = [NSTimer scheduledTimerWithTimeInterval:1.f
33                                               target:self
34                                             selector:@selector(circleAnimationTypeOne)
35                                             userInfo:nil
36                                              repeats:YES];
37 }
38 
39 - (void)circleAnimationTypeOne {
40     self.shapeLayer.strokeEnd = arc4random() % 100 / 100.f;
41 }
42 
43 - (void)circleAnimationTypeTwo {
44     CGFloat valueOne = arc4random() % 100 / 100.f;
45     CGFloat valueTwo = arc4random() % 100 / 100.f;
46     self.shapeLayer.strokeEnd = MAX(valueOne, valueTwo);
47     self.shapeLayer.strokeStart = MIN(valueOne, valueTwo);
48 }

我们可以看一下，CAShapeLayer 绘制的起始点以及绘制的方法，效果如下：