CAShapeLayer

簡單介紹:
CAShapeLayer繼承自CALayer，因此，可使用CALayer的所有屬性。  但是，CAShapeLayer需要和貝塞爾曲線配合使用才有意義。

CAShapeLayer和drawRect的比較
- 1.drawRect：屬于CoreGraphics框架，占用CPU，性能消耗大 
- 2.CAShapeLayer：屬于CoreAnimation框架，通過GPU來渲染圖形，節(jié)省性能。動畫渲染直接提交給手機GPU，不消耗內(nèi)存

溫馨提示：drawRect只是一個方法而已，是UIView的方法，重寫此方法可以完成我們的繪制圖形功能。

CAShapeLayer

CAShapeLayer與UIBezierPath的關(guān)系

CAShapeLayer與UIBezierPath的關(guān)系：

1.CAShapeLayer中shape代表形狀的意思，所以需要形狀才能生效
2.貝塞爾曲線可以創(chuàng)建基于矢量的路徑，而UIBezierPath類是對CGPathRef的封裝
3.貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進行渲染。路徑會閉環(huán)，所以繪制出了Shape
4.用于CAShapeLayer的貝塞爾曲線作為path，其path是一個首尾相接的閉環(huán)的曲線，即使該貝塞爾曲線不是一個閉環(huán)的曲線

CAShapeLayer和UIBezierPath結(jié)合代碼

#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];
    //創(chuàng)建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.itdecent.cn/p/da4b253674b3