1需求
?需要繪制一個下圖的圓環(huán)骗奖,可能圓環(huán)看上有點丑确徙,但是加了漸變,對于新手朋友來說执桌,可能也沒那么簡單鄙皇。
2分析需求
這里需要用到一些繪畫的基礎知識,不過仰挣,不知道的也沒有問題伴逸。跟著教程一步步下去,就可以了椎木。
1先用貝塞爾曲線繪制一個圓環(huán)
2用CAShapeLayer作為遮罩來將圓環(huán)布上去违柏。
3再繪制一個漸變層,將第二步的CAShapeLayer設置為漸變層的遮罩
下圖就是我手繪的層級關(guān)系香椎,要是有朋友覺得有問題的漱竖,可以跟我來討論一下。
3 實現(xiàn)步驟
就按照需求分析的過來
? 1繪制貝賽爾曲線
說到繪制圓環(huán)畜伐,我得說一下圓的坐標系馍惹。
還有這個宏定義的函數(shù) degressToRadius(-90) 具體是這樣的:
#define degressToRadius(ang) (M_PI*(ang)/180.0f)//把角度轉(zhuǎn)換成PI的方式
? 2用CAShapeLayer作為遮罩來將圓環(huán)布上去。
說一下玛界,為什么要將_progressLayer設置為當前試圖的成員變量万矾,(因為我不想告訴你們,哈哈哈)
記得設置好遮罩形狀層以后記得要指定形狀(也就是第一步繪制的貝塞爾曲線)
?3繪制漸變層 (這應該是這里面最難的慎框,不過良狈,也不難) ?
先設置一個底部層(也就是我寫的grain),來將第二步繪制好的遮罩層設置為當前底部層的遮罩笨枯。然后來將左右兩個漸變層繪制上去薪丁。繪制左邊的漸變層遇西,我是從上邊向下邊漸變的(我又得畫圖了,哈哈哈哈)
參數(shù)說明
先說一下漸變的StartPoint严嗜,EndPoint:
Locations的意思就從哪個位置開始到哪個位置會顯示漸變的變化。
Colors的意思就是漸變的顏色漫玄,你可以設置很多很多很多顏色的茄蚯,我這里就兩個。
最后一步將漸變底層添加到當前視圖層上面睦优。
我得將我的代碼防到git上面渗常,我還不知道怎么放上去,所以還得去學一下汗盘。
額凳谦,原來不需要學github地址:GitHub - hnustJoe/CircleGradient
給我?guī)椭哪俏慌笥训牟┛偷刂氛娴牟灰娏恕?/p>
附加
地址:GitHub - hnustJoe/CircleGradient_pro
這是我項目用到的給大家看看效果
先稍微解析一下,這個可是有動畫的衡未,還有一個背景的層尸执,就是那個灰色的