ios 圓環(huán)漸變

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

這是我項目用到的給大家看看效果

先稍微解析一下,這個可是有動畫的衡未,還有一個背景的層尸执,就是那個灰色的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市缓醋,隨后出現(xiàn)的幾起案子如失,更是在濱河造成了極大的恐慌,老刑警劉巖送粱,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件褪贵,死亡現(xiàn)場離奇詭異,居然都是意外死亡抗俄,警方通過查閱死者的電腦和手機脆丁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來动雹,“玉大人槽卫,你說我怎么就攤上這事∫闰穑” “怎么了歼培?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長茸塞。 經(jīng)常有香客問我躲庄,道長,這世上最難降的妖魔是什么钾虐? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任噪窘,我火速辦了婚禮,結(jié)果婚禮上效扫,老公的妹妹穿的比我還像新娘倔监。我一直安慰自己无切,他們只是感情好,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布丐枉。 她就那樣靜靜地躺著,像睡著了一般掘托。 火紅的嫁衣襯著肌膚如雪瘦锹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天闪盔,我揣著相機與錄音弯院,去河邊找鬼。 笑死泪掀,一個胖子當著我的面吹牛听绳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播异赫,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼椅挣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了塔拳?” 一聲冷哼從身側(cè)響起鼠证,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎靠抑,沒想到半個月后量九,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡颂碧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年荠列,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片载城。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡肌似,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出诉瓦,到底是詐尸還是另有隱情锈嫩,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布垦搬,位于F島的核電站呼寸,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏猴贰。R本人自食惡果不足惜对雪,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望米绕。 院中可真熱鬧瑟捣,春花似錦馋艺、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至桑李,卻和暖如春陕悬,著一層夾襖步出監(jiān)牢的瞬間欲逃,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留叶撒,地道東北人壤靶。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓海渊,卻偏偏與公主長得像尔崔,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子呛伴,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內(nèi)容