iOS之UI--CAShapeLayer

關於CAShapeLayer

內容大綱：

1. CAShapeLayer簡介
2. 貝塞爾曲線與CAShapeLayer的關係
3. strokeStart和strokeEnd 動畫
4. 用CAShapeLayer實現進度條效果，以及更加複雜的效果

一、CAShapeLayer簡介

---

 

• 一、CAShapeLayer繼承自CALayer，可使用CALayer的全部屬性值
• 二、CAShapeLayer須要與貝塞爾曲線配合使用纔有意義
• 三、使用CAShapeLayer與貝塞爾曲線能夠實現不在view的drawRect方法中畫出有一些想要的圖形
• 四、CAShapeLayer屬於CoreAnimation框架，其動畫渲染直接提交到手機的GPU當中，相較於view的drawRect方法使用CPU渲染而言，其效率極高，能大大優化內存使用狀況。
  • 我的經驗：能夠重寫UIView的子類中的drawRect來實現進度條效果，可是UIView的drawRect是用CPU渲染實現的，而使用CAShapeLayer效率更高，由於它用的是GPU渲染。

 

 

效果：

雖說，直接更改另外建立的CALayer以及其子類，會觸發隱式動畫，可是直接更改CAShapeLayer的path的值，變化過程沒有漸變移動的效果，因此這裏就須要

使用核心動畫CABasicAnimation來幫忙實現，未使用核心動畫驗證效果在後面的"四、用CAShapeLayer實現進度條效果，以及更加複雜的效果"驗證了。

二、貝塞爾曲線與CAShapeLayer的關係

---

 

• 一、CAShapeLayer中有Shape這個單詞，顧名思義，它須要一個形狀才能生效
• 二、貝塞爾曲線能夠建立基於矢量的路徑
• 三、貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進行渲染，路徑會閉環，因此路徑繪製出了Shape

• 四、用於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的部分不會顯示

一階貝塞爾曲線

二階貝塞爾曲線

三階貝塞爾曲線

四階貝塞爾曲線

五階貝塞爾曲線

 

而後是經過代碼直接體現貝塞爾曲線和CAShapeLayer之間的關係：

 

三、strokeStart與strokeEnd動畫

---

 

• 一、將ShapeLayer的fillColor設置成透明背景
• 二、設置線條的寬度（lineWidth）的值
• 三、設置線條的顏色

• 四、將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

 

而後爲了能實現圓形進度條的效果：

效果就是：

 

將上面的strokeStart也設置，可是注意：strokeStart必需要小於strokeEnd，不然會不畫出線的狀況。

 

 

四、用CAShapeLayer實現圓形進度條效果，以及更復雜綜合起來的動畫效果

---

 

圓形進度條動畫.gif

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

直接更改path的結果，並無理想中的漸變過程，因此須要使用核心動畫：

 

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

若是fillColors不設置成 [UIColor clearColor].CGColor就會有這樣的效果：

轉載原址：http://www.cnblogs.com/goodboy-heyang/p/5185575.html