iOS之UI--CAShapeLayer,ui--cashapelayer

來源:互聯網
上載者:User

iOS之UI--CAShapeLayer,ui--cashapelayer
關於CAShapeLayerCAShapeLayer簡介

  • 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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.