文字與圖片漸變效果(圖層CALayer與屬性蒙版mask )

先讓我們看看,能實現(xiàn)的最終效果:

1450806559781.png

首先圆恤,我們需要稍微理清一下CAGradientLayer、CALayer,UIView和mask的大概關(guān)系。
在iOS中窗悯,能看得見摸的著的基本都是UIView,如按鈕偷拔、圖片等蒋院。UIView之所以能看得見是因為里面有一個圖層(即CALayer對象)。對UIView的位置大小的操作莲绰,實際上就是對圖層(即CALayer對象)的操作欺旧。可以把圖層看成是沒有事件的UIView蛤签,而對應(yīng)UIView則是這個圖層的控制者切端。所以如果直接在圖層上添加(addSublayer)圖層,就會直接覆蓋在上面顷啼。CAGradientLayer是繼承CALayer的踏枣,用于畫出漸變圖層。圖層A有一個屬性是mask钙蒙,mask實際上也是一個圖層茵瀑,該圖層設(shè)置為圖層B。mask層工作原理是按照透明度裁剪躬厌,只保留非透明部分马昨,所以圖層B并非覆蓋在圖層A上,而是根據(jù)圖層B不透明的部分去顯示圖層A扛施。若圖層B是個藍(lán)色圓環(huán)鸿捧,而圖層A是個紅色的長方形,那么最終顯示的就是紅色的圓環(huán)疙渣。(所以說設(shè)置蒙版mask并不會改變原來圖層的顏色

實例一:
1450792777714.png

1450804026188.png

漸變思路(適合文字漸變和圖片不透明部分漸變):UILabel本身的圖層其實就是文字匙奴,所以我們需要創(chuàng)建一個漸變層到UILabel的父視圖圖層(即superview的layer對象),然后使用UILabel本身的圖層作為漸變層的mask即可妄荔。

    UILabel *label4 = ({
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(64, 300, 200, 15)];
        label.text = @"你好啊";
        [self.view addSubview:label];
        //設(shè)置漸變層泼菌,實際上有這個漸變層就可以顯示了。
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.frame = label.frame;
        // 設(shè)置漸變層的顏色
        gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];
        //水平漸變添加下面兩行即可
        //    gradientLayer.startPoint = CGPointMake(0, .5);
        //    gradientLayer.endPoint = CGPointMake(1, .5);
        // 疑問:漸變層能不能加在label上
        // 不能啦租,如果添加漸變層到label圖層上,則會遮蓋label的文字圖層哗伯;如果作為label圖層的mask,由于mask是完全不透明漸變層篷角,所以是正常顯示焊刹,這種情況如果消失了,說明mask的frame.origin沒有設(shè)置正確恳蹲。
        // 添加漸變層到控制器的view圖層上
        [self.view.layer addSublayer:gradientLayer];
        gradientLayer.mask = label.layer;
        //由于label.layer從self.view.layer中移動到漸變層gradientLayer中作為蒙版虐块,所以坐標(biāo)改變了需要重新調(diào)整。
        label.layer.frame = gradientLayer.bounds;
        label;
    });
實例二:
1450804128723.png

1450804110590.png

漸變思路(適合文字背景漸變和圖片透明部分漸變):創(chuàng)建漸變圖層添加到圖標(biāo)或文字的父視圖圖層(既superview的layer)阱缓,然后把圖標(biāo)或文字的圖層addSublayer到漸變層即可非凌。

    UIImageView *imageView5 = ({
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(64, 400, 200, 30)];
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        imageView.image = [UIImage imageNamed:@"abc.png"];
        startY +=35;
        [self.view addSubview:imageView];
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.frame = imageView.frame;
        gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];
        //添加漸變層到view圖層上
        [self.view.layer addSublayer:gradientLayer];
        //將原來的圖標(biāo)圖層或者文字圖層添加到漸變層上
        [gradientLayer addSublayer:imageView.layer];
        //由于imageView.layer從self.view.layer中移動到漸變層gradientLayer中,所以坐標(biāo)改變了需要重新調(diào)整荆针。
        imageView.layer.frame = imageView.layer.bounds;
        imageView;
    });
實例三:

有時候可能還需要制作成這種圖片:


1450805634345.png

這時候只需要將UIImageView的寬高設(shè)置成相等的敞嗡,并且在實例二的基礎(chǔ)上對漸變層的cornerRadius和masksToBounds處理即可。相信大家對這兩個屬性都比較熟悉了航背。
在漸變層做圓角處理喉悴,處理成圓:

        gradientLayer.cornerRadius = imageView.frame.size.width/2;
        gradientLayer.masksToBounds = YES;

演示Demo下載:GraduatedColor

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市玖媚,隨后出現(xiàn)的幾起案子箕肃,更是在濱河造成了極大的恐慌,老刑警劉巖今魔,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件勺像,死亡現(xiàn)場離奇詭異障贸,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)吟宦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門篮洁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人殃姓,你說我怎么就攤上這事袁波。” “怎么了蜗侈?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵篷牌,是天一觀的道長。 經(jīng)常有香客問我踏幻,道長枷颊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任叫倍,我火速辦了婚禮偷卧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘吆倦。我一直安慰自己听诸,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布蚕泽。 她就那樣靜靜地躺著晌梨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪须妻。 梳的紋絲不亂的頭發(fā)上仔蝌,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機(jī)與錄音荒吏,去河邊找鬼敛惊。 笑死,一個胖子當(dāng)著我的面吹牛绰更,可吹牛的內(nèi)容都是我干的瞧挤。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼儡湾,長吁一口氣:“原來是場噩夢啊……” “哼特恬!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起徐钠,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤癌刽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體显拜,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡衡奥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了讼油。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片杰赛。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖矮台,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情根时,我是刑警寧澤瘦赫,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站蛤迎,受9級特大地震影響确虱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜替裆,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一校辩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧辆童,春花似錦宜咒、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至庭砍,卻和暖如春场晶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背怠缸。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工诗轻, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人揭北。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓扳炬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親罐呼。 傳聞我的和親對象是個殘疾皇子鞠柄,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

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