貝塞爾曲線 & CAShapeLayer & Stroke 動畫 淺談


轉載自:http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qiaoqiaoqiao2014/article/details/46928787

 

1.CAShapeLayer簡介

 1.1CAShapeLayer繼承於CALayer,可以使用CALayer的所有屬性值;

   1.2CAShapeLayer需要貝塞爾曲線配合使用才有意義(也就是說才有效果)

   1.3使用CAShapeLayer(屬於CoreAnimation)與貝塞爾曲線可以實現不在view的drawRect(繼承於CoreGraphics走的是CPU,消耗的性能較大)方法中畫出一些想要的圖形

   1.4CAShapeLayer動畫渲染直接提交到手機的GPU當中,相較於view的drawRect方法使用CPU渲染而言,其效率極高,能大大優化內存使用情況

2.CAShapeLayer使用

   2.1代碼展示

 

 

  

 

  

 

 

 

 

 

 

 

1.貝塞爾曲線與CAShapeLayer的關系

   1.1CAShapeLayer需要一個形狀才能生效,貝塞爾曲線可以創建基於矢量的路徑,進而可以給CAShapeLayer提供路徑,路徑會閉環。

   1.2貝塞爾曲線作為CAShapeLayer的path,其path是一個首尾相接的閉環的曲線。

2.實際應用

    2.2畫橢圓

 


     2.2畫矩形,畫圓形的方法和上邊的一致,只是畫圖時調用的方法不一致而已。

3.注意:貝塞爾曲線與CAShapeLayer的frame值互不干擾,貝塞爾曲線只不過是要放在CAShapeLayer層上而已,所以CAShapeLayer的frame.size不能小於貝塞爾曲線的frame.size,masksToBounds是CAShapeLayer的一個屬性,禁止貝塞爾曲線的路徑超出CAShapeLayer的frame范圍。

 

 

4.StrokeStart與StrokeEnd的用法

   4.1用法步驟:

        4.1.1將ShapeLayer的fillColor設置成透明色

        4.1.2設置邊緣線的寬度

        4.1.3設置邊緣線的顏色

        4.1.4將strokeStart值設為0,讓strokeEnd的值變化,進而觸發隱式動畫

        4.1.5采用計時器讓其變化

    4.2事例應用

     

     

效果圖,此效果圖是漸變滑動的,類似於扣扣登陸的等待轉動視圖,大家可以去我的博客資源里面去下載demo哦。

        

 

      

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM