CAShapeLayer介紹

1. CAShapeLayer繼承自CALayer甸怕，可使用CALayer的所有屬性
2. CAShapeLayer需要和貝塞爾曲線配合使用才有意義争群。貝塞爾曲線可以為其提供形狀阴颖，而單獨(dú)使用CAShapeLayer是沒有任何意義的鞭莽。
3. 使用CAShapeLayer與貝塞爾曲線可以實(shí)現(xiàn)不在view的DrawRect方法中畫出一些想要的圖形

關(guān)于CAShapeLayer和DrawRect的比較

• DrawRect：DrawRect屬于CoreGraphic框架，占用CPU宣旱，消耗性能大
• CAShapeLayer：CAShapeLayer屬于CoreAnimation框架费尽，通過GPU來渲染圖形赠群，節(jié)省性能。動(dòng)畫渲染直接提交給手機(jī)GPU旱幼，不消耗內(nèi)存

CAShapeLayer使用

請下載Demo 運(yùn)行CAShapeLayerDemo 工程

• 繪制特別的形狀

CAShapeLayer 有一個(gè)神奇的屬性 path 用這個(gè)屬性配合上 UIBezierPath 這個(gè)類就可以達(dá)到超神的效果查描。

圖1.1

實(shí)現(xiàn)如圖1.1效果，需要?jiǎng)?chuàng)建一個(gè)UIBezierPath曲線柏卤，賦值給 CAShapeLayer 的path屬性冬三。
實(shí)現(xiàn)代碼如下 ，圖中紅點(diǎn)表示 startPoint缘缚，endPoint勾笆，controlPoint1，controlPoint2桥滨，

    // 創(chuàng)建 path
    UIBezierPath *path = [[UIBezierPath alloc]init];
    [path moveToPoint:startPoint];
    [path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    // 創(chuàng)建 shapeLayer
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc]init];
    [self.view.layer addSublayer:shapeLayer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    shapeLayer.lineWidth = 5;

一些特殊的界面效果窝爪，也可以通過CAShapeLayer 繪制出來 如圖1.2

圖1.2

    CGSize finalSize = CGSizeMake(CGRectGetWidth(self.view.frame), 600);
    CGFloat layerHeight = finalSize.height * 0.2;
    CAShapeLayer *bottomCurveLayer = [[CAShapeLayer alloc]init];
    
    UIBezierPath *path = [[UIBezierPath alloc]init];
    [path moveToPoint:CGPointMake(0, finalSize.height - layerHeight)];
    [path addLineToPoint:CGPointMake(0, finalSize.height - 1)];
    [path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - 1)];
    [path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - layerHeight)];
    [path addQuadCurveToPoint:CGPointMake(0, finalSize.height - layerHeight) controlPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];

    
    bottomCurveLayer.path = path.CGPath;
    bottomCurveLayer.fillColor = [UIColor orangeColor].CGColor;
    [self.view.layer addSublayer:bottomCurveLayer];

• 繪制進(jìn)度條
  
  屏幕快照 2016-07-28 下午1.12.22.png

創(chuàng)建要展示的四個(gè)圖層

// 灰色虛線
@property (nonatomic, strong)CAShapeLayer *baseLayer;
// 彩色虛線
@property (nonatomic, strong)CAShapeLayer *shapeLayer;
// 外圈灰色大圓
@property (nonatomic, strong)CAShapeLayer *bigBaseLayer;
// 帶顏色的大圓
@property (nonatomic, strong)CAShapeLayer *bigShapeLayer;

設(shè)置path 給圖層，

- (void)layoutSubviews {
    CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
    CGFloat radius = MIN(self.bounds.size.width, self.bounds.size.height)/2 - dashLayerMargin;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:- M_PI_2 endAngle: (M_PI * 2)- M_PI_2 clockwise:YES];
    
    CGFloat bigRadius = radius + 8;
    UIBezierPath *bigPath = [UIBezierPath bezierPathWithArcCenter:center radius:bigRadius startAngle:- M_PI_2 endAngle: (M_PI * 2)- M_PI_2 clockwise:YES];
    
    self.shapeLayer.path = path.CGPath;
    self.baseLayer.path = path.CGPath;
    
    self.bigBaseLayer.path = bigPath.CGPath;
    self.bigShapeLayer.path = bigPath.CGPath;
    
    [self createGradientLayer];

}

控制進(jìn)度 使用 layer的strokeEnd 屬性

- (void)setProgress:(CGFloat)progress {
    _progress = progress;

    self.shapeLayer.strokeEnd = progress;
    self.bigShapeLayer.strokeEnd = progress;

}

一些 CAShapeLayer 動(dòng)畫

這些動(dòng)畫都基于CAShapeLayer & UIBezierPath 實(shí)現(xiàn)各種形狀圖層齐媒，使用 CoreAnimation顯式動(dòng)畫控制圖層的變化蒲每。
動(dòng)畫實(shí)現(xiàn)的關(guān)鍵是將復(fù)雜任務(wù)拆分成多個(gè)可實(shí)現(xiàn)的簡單任務(wù)，然后選擇合適的方法實(shí)現(xiàn)

收錄下面這些動(dòng)畫喻括，可以在需要時(shí)為動(dòng)畫實(shí)現(xiàn)提供參考邀杏，這里不做贅述。唬血，詳見Demo中的
CAShapeLayerDemo 望蜡，
OneLoadingAnimation ，
ChangeAnimation

EyeRefreshView

drawing

彈簧效果

http://www.reibang.com/p/ce4e5f226d34

加載動(dòng)畫

http://www.reibang.com/p/1e2b8ff3519e

切換動(dòng)畫