? ? ? ? 之前由于項(xiàng)目中需要自定義一個(gè)帶有漸變色的進(jìn)度條(也可以成為progressView)，最近抽出一點(diǎn)時(shí)間來整理一下。一來可以記錄一下，二來也可以和大家分享一下他的實(shí)現(xiàn)過程。

? ? ? ? 首先，需求是這樣的?？磮D??。

這是一個(gè)很常見的帶有漸變色的環(huán)形進(jìn)度條

? ? ? ? 今天，我們的目的就是這個(gè)環(huán)形進(jìn)度條的實(shí)現(xiàn)。要實(shí)現(xiàn)這樣一個(gè)需求，需要三步：

? ? ? ? 第一步：從0%到99%的那個(gè)灰色背景的環(huán)形Layer。

? ? ? ? 第二步：具有進(jìn)度的progressLayer(就是上圖有顏色的那個(gè)layer，但是這個(gè)時(shí)候沒有漸變色哦)

? ? ? ? 第三步：給progressLayer 加上漸變色? ? ?

? ? ? ? 既然知道每一步該干啥，那就直接開始入手了。首先勾勒出環(huán)形背景

通過layer和貝塞爾曲線勾勒出環(huán)形的背景

? ? ? ? ? ?背景寫好了，接下來我們來完成progress的layer這個(gè)時(shí)候還是沒有漸變色的??

設(shè)置progressLayer的基本屬性

? ? ? ? ? ? 添加漸變色，最主要的是設(shè)置CAGradientLayer。

設(shè)置mask必不可少，后面我們可以通過控制progresslayer的stokeend來控制進(jìn)度

? ? ? ? ? ? ? 比如 progressLayer.strokeEnd = 0.5。我們的進(jìn)度為50%.duang,一個(gè)帶有漸變色的進(jìn)度條就實(shí)現(xiàn)了??????

大功告成

? ? 當(dāng)然你也可以加上動(dòng)畫，讓他在改變的時(shí)候看起來更舒服。??

progress的取值為0-1

? ? 好了，如果正好對(duì)你有幫助，你也可以試試看。