iOS CAShapeLayer和UIBezierPath的使用

1.CAShapeLayer简介

• CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。
• CAShapeLayer继承自CALayer，可以使用CALayer的所有属性值。
• CAShapeLayer需要与 贝塞尔曲线 配合使用才有意义（这是个人经验）。
• 使用CAShapeLayer与贝塞尔曲线可以画出你想要的图形。
• 相对于Core Graphics绘制图片，使用CAShapeLayer有以下一些优点:

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

2.贝塞尔曲线简介

在数学的数值分析领域中，贝济埃曲线（英语：Bézier curve，亦作“贝塞尔”）是计算机图形学中相当重要的参数曲线。(贝塞尔曲线扫盲)
贝塞尔曲线对应iOS中是UIBezierPath对象，它是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。

3.简单的使用

使用CAShapeLayer和UIBezierPath画一条直线和一个椭圆形，效果如下：

使用贝塞尔曲线画直线和椭圆形

代码如下：

    // 1,绘制一条直线
    UIBezierPath * path = [[UIBezierPath alloc] init];
    path.lineWidth = 1.f;
    //设置起点
    [path moveToPoint:CGPointMake(0, 10)];
    //添加子路径
    [path addLineToPoint:CGPointMake(300, 10)];
    
    CAShapeLayer * shapeLayer = [CAShapeLayer layer];
    shapeLayer.backgroundColor = [UIColor yellowColor].CGColor;
    shapeLayer.frame = CGRectMake(0, 0, 300, 50);
    shapeLayer.position = self.view.center;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.path = path.CGPath;
    [self.view.layer addSublayer:shapeLayer];

    // 2,绘制一个椭圆形
    UIBezierPath * path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 10, 100, 50)];
   
    CAShapeLayer * shapeLayer2 = [CAShapeLayer layer];
    shapeLayer2.backgroundColor = [UIColor blueColor].CGColor;
    shapeLayer2.frame = CGRectMake(0, 0, 300, 150);
    shapeLayer2.position = CGPointMake(self.view.center.x, self.view.center.y+70);
    shapeLayer2.fillColor = [UIColor clearColor].CGColor;
    shapeLayer2.strokeColor = [UIColor redColor].CGColor;
    shapeLayer2.path = path2.CGPath;
    [self.view.layer addSublayer:shapeLayer2];

到这里你肯定会问，学了这两个就是为了画条线和画个椭圆？？？肯定不是啦，不然我怎么会特（gu）意（yi）写出来呢？先看看效果：

五角星动画

- (void)createUI2 {
    
//    创建shapeLayer
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.frame = CGRectMake(0, 0, 200, 200);
    _shapeLayer.position = self.view.center;
    _shapeLayer.path = [self getStarOneBezierPath].CGPath;
    _shapeLayer.fillColor = [UIColor clearColor].CGColor;
    _shapeLayer.strokeColor = [UIColor redColor].CGColor;
    _shapeLayer.lineWidth = 2.0f;
    [self.view.layer addSublayer:_shapeLayer];
    
//    创建定时器
    _timer = [NSTimer scheduledTimerWithTimeInterval:2.0f target:self selector:@selector(bezierPathAnimation) userInfo:nil repeats:YES];
    
}

/// 执行bezierPath的动画
- (void)bezierPathAnimation {
    static int i = 0;
    if (i++ % 2 == 0) {
        CABasicAnimation * circleAnim = [CABasicAnimation animationWithKeyPath:@"path"];
        circleAnim.removedOnCompletion = NO;
        circleAnim.duration = 2;
        circleAnim.fromValue = (__bridge id _Nullable)([self getStarOneBezierPath].CGPath);
        circleAnim.toValue = (__bridge id _Nullable)([self getStarTwoBezierPath].CGPath);
        _shapeLayer.path = [self getStarTwoBezierPath].CGPath;
        [_shapeLayer addAnimation:circleAnim forKey:@"animateCirclePath"];
    }else {
        CABasicAnimation * circleAnim = [CABasicAnimation animationWithKeyPath:@"path"];
        circleAnim.removedOnCompletion = NO;
        circleAnim.duration = 2;
        circleAnim.fromValue = (__bridge id _Nullable)([self getStarTwoBezierPath].CGPath);
        circleAnim.toValue = (__bridge id _Nullable)([self getStarOneBezierPath].CGPath);
        _shapeLayer.path = [self getStarOneBezierPath].CGPath;
        [_shapeLayer addAnimation:circleAnim forKey:@"animateCirclePath"];
    }
}

/// 贝塞尔曲线1
- (UIBezierPath *)getStarOneBezierPath {
    // draw star
    UIBezierPath * starPath = [UIBezierPath bezierPath];
    [starPath moveToPoint:CGPointMake(22.5, 2.5)];
    [starPath addLineToPoint:CGPointMake(28.32, 14.49)];
    [starPath addLineToPoint:CGPointMake(41.52, 16.32)];
    [starPath addLineToPoint:CGPointMake(31.92, 25.56)];
    [starPath addLineToPoint:CGPointMake(34.26, 38.68)];
    [starPath addLineToPoint:CGPointMake(22.5, 32.4)];
    [starPath addLineToPoint:CGPointMake(10.74, 38.68)];
    [starPath addLineToPoint:CGPointMake(13.08, 25.56)];
    [starPath addLineToPoint:CGPointMake(3.48, 16.32)];
    [starPath addLineToPoint:CGPointMake(16.68, 14.49)];
    [starPath closePath];
    
    return starPath;
}

/// 贝塞尔曲线2
- (UIBezierPath *)getStarTwoBezierPath {
    // draw star
    UIBezierPath * starPath = [UIBezierPath bezierPath];
    [starPath moveToPoint:CGPointMake(22.5, 2.5)];
    [starPath addLineToPoint:CGPointMake(32.15, 9.21)];
    [starPath addLineToPoint:CGPointMake(41.52, 16.32)];
    [starPath addLineToPoint:CGPointMake(38.12, 27.57)];
    [starPath addLineToPoint:CGPointMake(34.26, 38.68)];
    [starPath addLineToPoint:CGPointMake(22.5, 38.92)];
    [starPath addLineToPoint:CGPointMake(10.74, 38.68)];
    [starPath addLineToPoint:CGPointMake(6.88, 27.57)];
    [starPath addLineToPoint:CGPointMake(3.48, 16.32)];
    [starPath addLineToPoint:CGPointMake(12.85, 9.21)];
    [starPath closePath];
    
    return starPath;
}

参考文章: iOS之UI--CAShapeLayer