iOS文字漸變色效果的實現方法

2022-09-25 01:27:06 字數 1988 閱讀 1828

照例先上文字漸變的效果圖

實現思路如下

一、建立乙個顏色漸變層,漸變圖層跟文字控制項一樣大。

二、用文字圖層裁剪漸變層,只保留文字部分,就會讓漸變層只保留有文字的部分,相當於間接讓漸變層顯示文字,我們看到的其實是被裁剪過後,漸變層的部分內容。

注意:如果用文字圖層裁剪漸變層,文字圖層就不在擁有顯示功能,這個圖層就被弄來裁剪了,不會顯示,在下面**中也會有說明。

2.1 建立乙個帶有文字的label,label能顯示文字。

2.2 設定漸變圖層的mask為label圖層,就能用文字裁剪漸變圖層了。

三、mask圖層工作原理:

1.根據透明度進行裁剪,只保留非透明部分,顯示底部內容。

示例**如下

// 建立uilabel

uilabel *label = [[yzlabel alloc] init];

label.text = @"小碼哥,專注於高階ios開發工程師的培養";

[label sizetofit];

label.center = cgpointmake(200, 100); // 疑問:label只是用來做文字裁剪,能否不新增到view上。

// 必須要把label新增到view上,如果不新增到view上,label的圖層就不會呼叫drawrect方法繪製文字,也就沒有文字裁剪了。

// 如何驗證,自定義label,重寫drawrect方法,看是否呼叫,發現不新增上去,就不會呼叫

[self.view addsubview:label]; // 建立漸變層

cagradientlayer *gradientlayer = [cagradientlayer layer];

gradientlayer.frame = label.frame; // 設定漸變層的顏色,隨機顏色漸變

gradientlayer.colors = @[(id)[self randomcolor].cgcolor, (id)[self randomcolor].cgcolor,(id)[self randomcolor].cgcolor]; // 疑問:漸變層能不能加在label上

// 不能,mask原理:缺省會顯示mask層底部的內容,如果漸變層放在mask層上,就不會顯示了

// 新增漸變層到控制器的view圖層上

[self.view.layer addsublayer:gradientlayer]; // mask層工作原理:按照透明度裁剪,只保留非透明部分,文字就是非透明的,因此除了文字,其他都被裁剪掉,這樣就只會顯示文字下面漸變層的內容,相當於留了文字的區域,讓漸變層onjhbtbewi去填充文字的顏色。

// 設定漸變層的裁剪層

gradientlayer.mask = label.layer; // 注意:一旦把label層設定為mask層,label層就不能顯示了,會直接從父層中移除,然後作為漸變層的mask層,且label層的父層會指向漸變層,這樣做的目的:以漸變層為座標系,方便計算裁剪區域,如果以其他層為座標系,還需要做點的轉換,需要把別的座標系上的點,轉換成自己座標系上點,判斷當前點在不在裁剪範圍內,比較麻煩。

// 父層改了,座標系也就改了,需要重新設定label的位置,才www.cppcns.com能正確的設定裁剪區域。

label.frame = gradientlayer.bounds; // 利用定時器,快速的切換漸變顏色,就有文字顏色變化效果

cadisplaylink *link = [cadisplaylink displaylinkwithtarget:self程式設計客棧 selector:@selector(textcolorchange)];

[link addtorunloop:[nsrunloop main程式設計客棧runloop] formode:nsdefaultrunloopmode]; // 隨機顏色方法

-(uicolor *)randomcolor // 定時器觸發方法

-(void)textcolorchange

總結本文標題: ios文字漸變色效果的實現方法

本文位址:

iOS 文字漸變色的實現

專案中需要實現的效果 實現方法 自定義cfgradientlabel繼承於uilabel,實現 drawrect 方法,在該方法裡面畫漸變色。在 cfgradientlabel.h 裡 import inte ce cfgradientlabel uilabel property nonatomic...

css實現背景漸變色效果

webkit核心的瀏覽器,例如 chrome,safari等 background webkit gradient linear,0 0,0 100 from 000000 to ffffff 第乙個引數表示漸變型別 type 可以是linear 線性漸變 或者radial 徑向漸變 第二個引數和第...

iOS 漸變色實現,漸變色圓環,圓環進度條

cagradientlayer圖層可以通過設定mask來給檢視新增漸變效果 cagradientlayer主要需要設定一下幾個引數 colors 傳入需要漸變的顏色 例如 self.gradientlayer.colors bridge id uicolor orangecolor cgcolor,...