iOS 環形漸變進度條實現

之前有人在找漸變進度條的效果，閒來無事就順手寫了乙個，然後畫了檢視層級，方便講解。

環境資訊：

mac os x 10.10.3

xcode 6.3.1

ios 8.3

效果圖：

首先需要搞定的就是檢視層級關係。可以看到，

1. 背景是有透明度的藍色(blueview)

2. 需要乙個從綠->黃->紅的漸變色，那個這裡我採用的是layer(colorlayer)

3. blueview和colorlayer他們的表現狀態都是環形的，所以還需要環形的遮罩

4. 藍色的環並沒有變，而漸變色的環卻在時刻變化，所以需要兩個遮罩，乙個給藍色(bluemasklayer)，乙個給漸變色(colormasklayer)

[viewcontroller.view addsubview:blueview];

[blueview.layer addsublayer:colorlayer];
colorlayer.mask = colormasklayer;
blueview.layer.mask = bluemasklayer;

檢視層級圖

搞清楚了層級，接著就應該逐個實現了。

1. 有透明度的藍色檢視blueview

viewcontroller.m

blueview *blueview = [[blueview alloc] initwithframe:cgrectmake(0, 0, 300, 300)];

blueview.center = self.view.center;
blueview.backgroundcolor = [uicolor bluecolor]; // 我這裡沒有給透明度
[self.view addsubview:blueview];

因為系統沒有提供根據路徑漸變的實現方法，所以只能採用曲線救國的方式來畫。那麼我所使用的方法是：在左邊畫乙個從下往上為綠->黃的漸變layer（leftlayer），然後右邊畫乙個從下往上為紅->黃的漸變layer（rightlayer）。

效果圖如下：

漸變色但是這種方式效果不是很好，因為黃綠色和橘紅色的分界太明顯，所以最好設定乙個漸變的範圍。

效果圖如下：

設定漸變範圍的漸變色

實現**：

blueview.m

- (void)setupcolorlayer 

因為漸變圖層環形遮罩和藍色檢視的環形遮罩樣式都是一樣的，所以可以將環形遮罩的建立**封裝出來：

blueview.m

- (cashapelayer *)generatemasklayer 

blueview.m

- (void)setupcolormasklayer 

blueview.m

- (void)setupbluemasklayer 

設定漸變色所佔的百分比，其實就是改變colormasklayer的範圍，系統提供了乙個方法可以直接根據百分比來修改。

self.colormasklayer.strokeend = 0.5;

我所使用的是pop庫中的popspringanimation，這個效果比較q彈，加在進度條上剛好。要加動畫，只需要把上面的修改strokeend的**換成一下方法就可以了：

- (void)animationwithstrokeend:(cgfloat)strokeend 

ios弧形進度條 iOS快速實現環形漸變進度條

前言 一 先製作乙個不帶顏色漸變的進度條 自定義乙個cycleview，在.m 中實現drawrect方法 void drawrect cgrect rect cgcontextref ctx uigraphicsgetcurrentcontext 獲取上下文 cgpoint center cgpo...

ios弧形進度條 iOS快速實現環形漸變進度條

前言 一 先製作乙個不帶顏色漸變的進度條 自定義乙個cycleview，在.m 中實現drawrect方法 void drawrect cgrect rect cgcontextref ctx uigraphicsgetcurrentcontext 獲取上下文 cgpoint center cgpo...

iOS 環形進度條

1 首先先將自定義的view和進度條的值關聯起來 ibaction progresschange uislider sender2 drawrect方法裡畫弧線 cgfloat radius rect.size.width 2 cgpoint center cgpointmake rect.size...