,久久九九99,991级黄色录像

CAShapeLayer介紹

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

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

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

CAShapeLayer使用

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

繪制特別的形狀

CAShapeLayer 有一個(gè)神奇的屬性 path 用這個(gè)屬性配合上 UIBezierPath 這個(gè)類(lèi)就可以達(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;

一些特殊的界面效果，也可以通過(guò)CAShapeLayer 繪制出來(lái) 如圖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)畫(huà)

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

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