iOS UIBezierPath和CAShapeLayer的使用

CAShapeLayer

简单介绍:
CAShapeLayer继承自CALayer，因此，可使用CALayer的所有属性。  但是，CAShapeLayer需要和贝塞尔曲线配合使用才有意义。

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

温馨提示：drawRect只是一个方法而已，是UIView的方法，重写此方法可以完成我们的绘制图形功能。

CAShapeLayer

CAShapeLayer与UIBezierPath的关系

CAShapeLayer与UIBezierPath的关系：

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

CAShapeLayer和UIBezierPath结合代码

#import "ViewController.h"
#import "DrawLineView.h"

@interface ViewController (){
    CAShapeLayer *_shapeLayer;
    NSTimer *_timer;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor whiteColor];
    //创建CAShapeLayer
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.frame = CGRectMake(0, 0, 300, 400);
    _shapeLayer.position = self.view.center;
    _shapeLayer.fillColor = [UIColor clearColor].CGColor;
    _shapeLayer.strokeColor = [UIColor redColor].CGColor;
    _shapeLayer.lineWidth = 2;
    _shapeLayer.path = [self getStar1BezierPath].CGPath;
    [self.view.layer addSublayer:_shapeLayer];
    _timer = [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(pathAnimation) userInfo:nil repeats:YES];
}
//动画
- (void)pathAnimation {
    static int i = 0;
    if (i++ %2 == 0) {
        CABasicAnimation *circleAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
        circleAnimation.removedOnCompletion = NO;
        circleAnimation.duration = 1;
        circleAnimation.fromValue = (__bridge id _Nullable)([self getStar1BezierPath].CGPath);
        circleAnimation.toValue = (__bridge id _Nullable)([self getStar2BezierPath].CGPath);
        _shapeLayer.path = [self getStar2BezierPath].CGPath;
        [_shapeLayer addAnimation:circleAnimation forKey:@"animationCirclePath"];
    } else {
        CABasicAnimation *circleAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
        circleAnimation.removedOnCompletion = NO;
        circleAnimation.duration = 1;
        circleAnimation.fromValue = (__bridge id _Nullable)([self getStar2BezierPath].CGPath);
        circleAnimation.toValue = (__bridge id _Nullable)([self getStar1BezierPath].CGPath);
        _shapeLayer.path = [self getStar1BezierPath].CGPath;
        [_shapeLayer addAnimation:circleAnimation forKey:@"animationCirclePath"];
    }
}

//贝塞尔曲线1
- (UIBezierPath *)getStar1BezierPath {
    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.26)];
    [starPath addLineToPoint:CGPointMake(3.48, 16.32)];
    [starPath addLineToPoint:CGPointMake(16.68, 14.49)];
    [starPath closePath];
    return starPath;
}

//贝塞尔曲线2
- (UIBezierPath *)getStar2BezierPath {
    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;
}

动画1

动画2

UIBezierPath的用法 http://www.jianshu.com/p/da4b253674b3