CAGradientLayer的使用

假期遇上臺風(fēng)天停電 休息了好幾天齿桃。

今天大概說說CAGradientLayer的使用。

CAGradientLayer是用于處理漸變色的層結(jié)構(gòu)德频,比如想設(shè)置一個背景色的一部分為藍色苍息,一部分為紅色,這時候就可以使用CAGradientLayer來設(shè)置了壹置。CAGradientLayer的漸變色和前面所使用的CALayer竞思、CAShapeLayer一樣都可以做隱式動畫。CAGradientLayer與CAShapeLayer配合使用(CAShapeLayer上一篇有講解了)钞护,CAShapeLayer提供一個形狀盖喷,CAGradientLayer提供一個漸變色的背景。其實就是把CAShapeLayer當(dāng)作CAGradientLayer的mask屬性(遮罩)來使用了难咕。CAGradientLayer可以實現(xiàn)png圖片遮罩無法實現(xiàn)的效果课梳,而且更效率。

另外余佃,CAGradientLayer有一個坐標(biāo)系統(tǒng)暮刃,是從(0,0)到(1,1)繪制的矩形,CAGradientLayer的frame不為正方形的話爆土,坐標(biāo)系統(tǒng)就會被拉伸椭懊。還有兩個屬性,startPoint和endPoint的設(shè)置會影響顏色的繪制方向步势,即從上到下或者從左到右等氧猬,由坐標(biāo)系統(tǒng)決定。


坐標(biāo)系統(tǒng).png

畫圖還是那么差勁坏瘩,能看懂就好 - -
比如startPoint是(0,0) endPoint是(0,1)則顏色的繪制方向由左到右盅抚。其他的類推。CAGradientLayer的多種顏色的分割由0->1的比例決定不由它的frame決定倔矾。


顏色分割點.png

代碼部分

    @property (nonatomic, strong) CAGradientLayer *gradientLayer;

    //初始化
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = CGRectMake(0, 0, 200, 200);
    //laye的position和view的center一樣 居中屬性
    self.gradientLayer.position = self.view.center;
    //邊寬
    self.gradientLayer.borderWidth = 1.f;
    [self.view.layer addSublayer:self.gradientLayer];

    //設(shè)置顏色
    self.gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                                  (__bridge id)[UIColor greenColor].CGColor,
                                  (__bridge id)[UIColor blueColor].CGColor];
    
    //設(shè)置顏色漸變方向 (0,0)->(1,1)則45度方向 (0,0)->(1,0)上->下
    self.gradientLayer.startPoint = CGPointMake(0, 0);
    self.gradientLayer.endPoint = CGPointMake(0, 1);
    
    //設(shè)置顏色分割點
    self.gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];

由于代碼較多就不貼出來了妄均,有需要下載的可以去http://www.code4app.com/thread-10691-1-1.html

下面是實現(xiàn)色差動畫的效果

下面這些效果我都整理了 放在demo中了,可以去這里下載這里就不一一貼出來了哪自,注釋也寫的比較多丰包,很容易理解。
先放一張截圖的吧提陶。運行時的效果烫沙。因為視頻轉(zhuǎn)成gif后不知道為什么變成很差的效果匹层,可能是幀數(shù)吧隙笆。代碼中運行時還是很不錯的效果的锌蓄。。撑柔。有大神知道原因的告訴我一下感激不盡瘸爽。


helloAda.png

色差實現(xiàn),先設(shè)定漸變方向铅忿,再設(shè)置2種以上的顏色一種是透明的剪决,另外一種就隨意了。如果沒有透明色檀训,就會掩蓋掉view柑潦,第三就是顏色分割點的值。注意:分割點的值和顏色的數(shù)量要匹配峻凫。
色差實現(xiàn)的效果

色差效果.gif

環(huán)形帶間隔的進度條實現(xiàn) 或者全部飽滿的也有渗鬼,在代碼中。


帶間隔的進度條.gif

加載提示框


加載提示框.gif

后續(xù)還會繼續(xù)更新一些其他的內(nèi)容荧琼,如果覺得對你有用請點個喜歡吧譬胎。謝謝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末命锄,一起剝皮案震驚了整個濱河市堰乔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌脐恩,老刑警劉巖镐侯,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異被盈,居然都是意外死亡析孽,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門只怎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來袜瞬,“玉大人,你說我怎么就攤上這事身堡〉擞龋” “怎么了?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵贴谎,是天一觀的道長汞扎。 經(jīng)常有香客問我,道長擅这,這世上最難降的妖魔是什么澈魄? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮仲翎,結(jié)果婚禮上痹扇,老公的妹妹穿的比我還像新娘铛漓。我一直安慰自己,他們只是感情好鲫构,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布浓恶。 她就那樣靜靜地躺著,像睡著了一般结笨。 火紅的嫁衣襯著肌膚如雪包晰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天炕吸,我揣著相機與錄音伐憾,去河邊找鬼。 笑死赫模,一個胖子當(dāng)著我的面吹牛塞耕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播嘴瓤,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼扫外,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了廓脆?” 一聲冷哼從身側(cè)響起筛谚,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎停忿,沒想到半個月后驾讲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡席赂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年吮铭,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颅停。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡谓晌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出癞揉,到底是詐尸還是另有隱情纸肉,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布喊熟,位于F島的核電站柏肪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏芥牌。R本人自食惡果不足惜烦味,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望壁拉。 院中可真熱鬧谬俄,春花似錦岩遗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽案铺。三九已至蔬芥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間控汉,已是汗流浹背笔诵。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留姑子,地道東北人乎婿。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像街佑,于是被迫代替她去往敵國和親谢翎。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

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