2F530DDAF430228B55CD3323A35F8C1B.jpg

長時間不用CAShapeLayer有些淡忘，正好周末抽時間回顧一下：

1、 先簡單的介紹下CAShapeLayer

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

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

1、DrawRect屬于CoreGraphic框架，占用CPU，消耗性能大
2、CAShapeLayer屬于CoreAnimation框架，通過GPU來渲染圖形，節(jié)省性能。動畫渲染直接提交給手機GPU，不消耗內(nèi)存

3、貝塞爾曲線與CAShapeLayer的關(guān)系

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

說了那么多，下面直接甩代碼：

 //創(chuàng)建出CAShapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(0, 0, 200, 200);//設置shapeLayer的尺寸和位置
shapeLayer.position = self.view.center;
shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色為ClearColor
    
//設置線條的寬度和顏色
 shapeLayer.lineWidth = 1.0f;
 shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
//創(chuàng)建出圓形貝塞爾曲線
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    
//讓貝塞爾曲線與CAShapeLayer產(chǎn)生聯(lián)系
shapeLayer.path = circlePath.CGPath;
    
//添加并顯示
[self.view.layer addSublayer:shapeLayer];

   /**
    上面的結(jié)果是一整個圓，現(xiàn)在我們要用到CAShapeLayer的兩個參數(shù)，strokeEnd和strokeStart
     Stroke:用筆畫的意思
     在這里就是起始筆和結(jié)束筆的位置
     Stroke為1的話就是一整圈，0.5就是半圈，0.25就是1/4圈。以此類推
     如果我們把起點設為0，終點設為0.75
  **/
    
//設置stroke起始點
shapeLayer.strokeStart = 0;
shapeLayer.strokeEnd = 0.75;
    
    /*
     下面來加個基礎動畫玩玩
    */
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
[shapeLayer addAnimation:pathAnima forKey:nil];

252DC1FC-4E34-479F-AE62-3185FF040B83.png