CAGradientLayer顏色漸變

? ? CAGradientLayer制作顏色漸變效果,常于CAShapeLayer結(jié)合使用富寿。CAShapeLayer繪制形狀月而,CAGradientLayer提供顏色漸變惭缰。如果形狀不是正方形的話,layer會(huì)被拉伸晚缩。

屬性介紹

//顏色數(shù)組,支持動(dòng)畫(huà)

@property(nullable, copy) NSArray *colors;

//每種顏色的最亮的位置,受startPoint尾膊、endPoint的影響。locations中的百分比是以startPoint荞彼、endPoint兩點(diǎn)之間的距離為準(zhǔn)的,支持動(dòng)畫(huà)

@property(nullable, copy) NSArray*locations;

//顏色開(kāi)始變化的地方,支持動(dòng)畫(huà)

@property CGPoint startPoint;

//顏色結(jié)束變化的地方,支持動(dòng)畫(huà)

@property CGPoint startPoint;

//分布類型

@property(copy) NSString *type;


startPoint冈敛、startPoint的取值都是在0-1之間,代表的是比例值卿泽。之前我們說(shuō)過(guò)坐標(biāo)系統(tǒng)的介紹莺债,這里就不多說(shuō)了滋觉。它們共同確定了,漸變的方向和區(qū)域如下圖所示齐邦,圖1-1為startPoint(0,0)椎侠、endPoint(1,0)的漸變圖片,圖1-2為startPoint(0,0)措拇、endPoint(0.5,0)的漸變圖片我纪。起點(diǎn)都在原點(diǎn),都是只有x值變化了丐吓。所以將兩點(diǎn)連接起來(lái)所指向的方向就是漸變方向浅悉。但是圖1-1的x值為1,圖1-2的x值為0.5券犁。所以圖1-2的顏色漸變區(qū)域?yàn)閳D1-1的一半术健。屬性locations中的分割點(diǎn)也是一起點(diǎn)和終點(diǎn)所劃分的區(qū)域進(jìn)行分割的。


圖1-1.png
圖1-2

示例代碼

效果如下所示

圖2.png

利用CAGridientLayer粘衬,提供漸變色荞估。利用CAShapeLayer提供形狀。

代碼很簡(jiǎn)單

CAGradientLayer *layer = [CAGradientLayer layer];

layer.frame = CGRectMake(10, 100, 120, 120);

//漸變的顏色

layer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor greenColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];

//漸變點(diǎn)

layer.locations = @[@0.2, @0.4, @0.6];

//起點(diǎn)

layer.startPoint = CGPointMake(0, 0);

//終點(diǎn)

layer.endPoint = CGPointMake(0.5, 0);

//提供形狀

CAShapeLayer *maskLayer = [CAShapeLayer layer];

maskLayer.path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, layer.frame.size.width, 30)].CGPath;

layer.mask = maskLayer;

[self.view.layer addSublayer:layer];

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末稚新,一起剝皮案震驚了整個(gè)濱河市勘伺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌褂删,老刑警劉巖飞醉,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異屯阀,居然都是意外死亡缅帘,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門蹲盘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)股毫,“玉大人,你說(shuō)我怎么就攤上這事召衔×逦埽” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵苍凛,是天一觀的道長(zhǎng)趣席。 經(jīng)常有香客問(wèn)我,道長(zhǎng)醇蝴,這世上最難降的妖魔是什么宣肚? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮悠栓,結(jié)果婚禮上霉涨,老公的妹妹穿的比我還像新娘按价。我一直安慰自己,他們只是感情好笙瑟,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布楼镐。 她就那樣靜靜地躺著,像睡著了一般往枷。 火紅的嫁衣襯著肌膚如雪框产。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,146評(píng)論 1 297
  • 那天错洁,我揣著相機(jī)與錄音秉宿,去河邊找鬼。 笑死屯碴,一個(gè)胖子當(dāng)著我的面吹牛描睦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播导而,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼酌摇,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了嗡载?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤仍稀,失蹤者是張志新(化名)和其女友劉穎洼滚,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體技潘,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡遥巴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了享幽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铲掐。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖值桩,靈堂內(nèi)的尸體忽然破棺而出摆霉,到底是詐尸還是另有隱情,我是刑警寧澤奔坟,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布携栋,位于F島的核電站,受9級(jí)特大地震影響咳秉,放射性物質(zhì)發(fā)生泄漏婉支。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一澜建、第九天 我趴在偏房一處隱蔽的房頂上張望向挖。 院中可真熱鬧蝌以,春花似錦、人聲如沸何之。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)帝美。三九已至碍彭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間悼潭,已是汗流浹背庇忌。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留舰褪,地道東北人锄俄。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像伟叛,于是被迫代替她去往敵國(guó)和親兄墅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

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