iOS 之使用CAShapeLayer中的CAGradientLayer實現圓環的顏色漸變

本文轉載自：http://blog.csdn.net/zhoutao198712/article/details/20864143

在 Github上看到一些進度條的功能，都是通過Core Graph來實現。無所謂正確與否，但是開發效率明顯就差很多了，而且運行效率還是值得考究的。其實使用蘋果提供的Core Animation能夠非常簡單和方便的實現環形進度條效果，而且還可以高效的保證動畫效果，無論是前進還是后退（語言水平比較有限，就多用代碼說話）。

1、先來一個結果

80%的狀態：

99%的狀態：

2、需要用到的宏：

 

 #define degreesToRadians(x) (M_PI*(x)/180.0) //把角度轉換成PI的方式 #define  PROGREESS_WIDTH 80 //圓直徑  #define PROGRESS_LINE_WIDTH 4 //弧線的寬度

 

 

3、CAShapeLayer

   首先，你得要引入Core Animation框架。為了實現環形效果，需要使用到CAShapeLayer，原理是CAShapeLayer可以通過指定Path的方式實現生成一個圖形，非常方便。

 

4、UIBezierPath

 

    由於需要畫一個圓形，UIBeziperPath是非常好用的畫圓形的工具。實現下面的代碼可以畫出上面所示的整個軌道。這個圓形是從-210度的角度到30度。

 

 UIBezierPath:CGPointMake(00 radius2:degreesToRadians(-1):degreesToRadians(0 clockwiseYES];

 

5、畫出一個完成的進度的背景軌道

 

這里原理很簡單，就是使用CAShapeLayer和UIBezierPath結合起來就能夠達成目標，這一步的結果如下所示：

 

 _trackLayer = [CAShapeLayer];
 .frameself;
 self addSublayer .fillColor]];
  = [_strokeColor];
 .opacity.25
 .lineCap
 .lineWidth
 UIBezierPath:CGPointMake(00 radius2:degreesToRadians(-1):degreesToRadians(0 clockwiseYES
 .path];

 

 

6、漸變進度條：

首先要明確的需求是，我們需要顏色根據百分比從紅色漸變到黃色然后再到藍色。
怎么實現這個顏色的漸變效果。這里我們需要使用到CAGradientLayer，CAGradientLayer 是一個用來畫顏色漸變的層（如果使用透明的顏色，也就可以做到透明漸變）。我們先用CAGradientLayer做出漸變效果，然后把 ShapeLayer作為GradientLayer的Mask來截取出需要的部分，以此達到漸變的進度條效果。

 

    首先，需要構建出順着弧形的顏色漸變。上面的需求我們可以分解成兩部分。
    ①左半部分，顏色從紅色漸變到黃色。
    ②右半部分，顏色從黃色漸變到藍色。
    由此可以了解到是我們需要兩個CAShapeLayer。
    為什么要這么折騰？CAShapeLayer不能順着弧線進行漸變只能指定兩個點之間進行漸變。所以只能曲線救國了。
    先看看這個部分的效果：

    

    然后，創建一個新的CAShapeLayer來截取這個顏色漸變的層。
    這部分代碼如下所示：

    

 _progressLayer _progressLayer.frame.bounds;
 _progressLayer.fillColor _progressLayer.strokeColor _progressLayer.lineCap;
 _progressLayer.lineWidth;
 _progressLayer.path _progressLayer.strokeEnd;
   = [CALayer layer];
  =  [CAGradientLayer layer];
 gradientLayer1.frame(0, 0, self.width/2, self.height);
        =  [CAGradientLayer layer];
  gradientLayer2.frame(self.width/2, 0, self.width/2, self.height);
         [self.layer addSublayer:gradientLayer];

 

7、進度條效果

        走到上面一步我們得到的效果是一個進度為100%的效果，_progressLayer的長度和_trackLayer的長度是一樣的。那么怎么解決百分比的問題呢？

        CAShapeLayer有一個strokeEnd的屬性，這個屬性是從0到1的浮點類型，正好可以用表達百分比，而且這個屬性是animatable，可以動態的表示進度的變化。
如下代碼所示：

 -(void animatedBOOL  ];
 :!animated];
 :[CAMediaTimingFunction:kCAMediaTimingFunctionEaseIn]];
 :MAIN_SCREEN_ANIMATION_TIME];
  = percent/0.0 ];
   }

 

8、總結

①進度條的百分比是通過CAShapeLayer的strokeEnd屬性來實現。
②環形的漸變進度條，通過結合CAShapeLayer和CAGradientLayer實現，注意layer的mask屬性的使用。

原文鏈接：http://www.ganlvji.com/gradient_circle_progress/