iOS之UI--CAShapeLayer

關于CAShapeLayer

CAShapeLayer簡介

• 1、CAShapeLayer繼承自CALayer，可以使用CALayer的所有屬性值
• 2、CAShapeLayer需要與貝塞爾曲線配合使用才有意義
• 3、使用CAShapeLayer與貝塞爾曲線可以實現不在view的drawRect方法中畫出有一些想要的圖形
• 4、CAShapeLayer屬于CoreAnimation框架，其動畫渲染直接提交到手機的GPU當中，相較于view的drawRect方法使用CPU渲染而言，其效率極高，能大大優化內存使用情況。
  • 個人經驗：可以重寫UIView的子類中的drawRect來實現進度條效果，但是UIView的drawRect是用CPU渲染實現的，而使用CAShapeLayer效率更高，因為它用的是GPU渲染。

貝塞爾曲線與CAShapeLayer的關系

• 1、CAShapeLayer中有Shape這個單詞，顧名思義，它需要一個形狀才能生效
• 2、貝塞爾曲線可以創建基于矢量的路徑
• 3、貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進行渲染，路徑會閉環，所以路徑繪制出了Shape

• 4、用于CAShapeLayer的貝塞爾曲線做為path，其path實一個首尾相接的閉環的曲線，即使該貝塞爾曲線不是一個閉環的曲線

  圖2.png

  如何建立貝塞爾曲線和CAShapeLayer的聯系：

  • 類：CAShapeLayer

  • 屬性：path

    • 值：可以是貝塞爾曲線對象

    UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,200,100)]; shape.path = circle.CGPath;

  • 屬性：fillColor 修改貝塞爾曲線的填充顏色

    • 值：CGColor對象

  • 屬性：maskToBounds

    • 值：YES 會讓超出CAShapeLayer的部分不會顯示

strokeStart與strokeEnd動畫

• 1、將ShapeLayer的fillColor設置成透明背景
• 2、設置線條的寬度（lineWidth）的值
• 3、設置線條的顏色

• 4、將strokeStart值設定成0，然后讓strokeEnd的值變化觸發隱式動畫

• 類：CAShapeLayer

  • 屬性：

    • strokeStart
    • strokeEnd
      • 注意 ：strokeEnd的值一定要比strokeStart的大
      • 范圍 ：(0~1)

    處理方法：
        shapeLayer.strokeStart = valueOne < valueTwo ? valueOne : valueTwo; shapeLayer.strokeStart = valueOne > valueTwo ? valueOne : valueTwo;

  • 屬性：

    • lineWidth 線條的寬度
    • strokeColor 線條的顏色  
      • 值：CGColor

用CAShapeLayer實現圓形進度條效果

圓形進度條動畫.gif

源碼下載地址： CircleProgress  中的 CircleProgress源碼

直接更改path的結果，并沒有理想中的漸變過程，所以需要使用核心動畫：

綜合示例源碼請看： https://github.com/HeYang123456789/UIView