前言
最近忙著公司的項(xiàng)目纤壁，零零散散的功能以及Flutter的研發(fā)，導(dǎo)致簡(jiǎn)書(shū)有兩年時(shí)間沒(méi)更新了。今天趁著閑暇時(shí)間饺窿，把前段時(shí)間項(xiàng)目里涉及到的遮罩拿出來(lái)分享碴里。網(wǎng)絡(luò)上的方式層出不窮甚至過(guò)于復(fù)雜沈矿，本人就帶來(lái)個(gè)簡(jiǎn)化后的實(shí)現(xiàn)方式（不是什么高超技術(shù)，望大佬們高抬貴手哈）咬腋。
示意圖
遮罩前
遮罩后
實(shí)現(xiàn)方式
- UI布局
// 文字內(nèi)容底部漸變
UIView *gradientView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 350, 200)];
[self.view addSubview:gradientView];
// 文字內(nèi)容
UITextView *textView = [[UITextView alloc] initWithFrame:gradientView.bounds];
textView.backgroundColor = UIColor.clearColor;
textView.selectable = NO;
textView.textColor = UIColor.whiteColor;
textView.text = @"這是第1行文字羹膳。。根竿。\n這是第2行文字陵像。。寇壳。\n這是第3行文字醒颖。。壳炎。\n這是第4行文字泞歉。。。\n這是第5行文字腰耙。榛丢。。\n這是第6行文字挺庞。晰赞。。\n這是第7行文字选侨。宾肺。。\n這是第8行文字侵俗。锨用。。\n這是第9行文字隘谣。增拥。。\n這是第10行文字寻歧。掌栅。。\n這是第11行文字码泛。猾封。。\n這是第12行文字噪珊。晌缘。。\n這是第13行文字痢站。磷箕。。\n這是第14行文字阵难。岳枷。。\n這是第15行文字呜叫。空繁。。\n這是第16行文字朱庆。盛泡。。";
[gradientView addSubview:textView];
[self updateGradientLayer:gradientView];
- 實(shí)現(xiàn)漸變圖層
/// 更新漸變圖層
- (void)updateGradientLayer:(UIView *)gradientView {
NSObject *transparent = (NSObject*)[UIColor.clearColor CGColor];
NSObject *opaque = (NSObject*)[UIColor.blackColor CGColor];
CALayer *maskLayer = [CALayer layer];
maskLayer.frame = gradientView.bounds;
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = maskLayer.bounds;
gradientLayer.colors = @[opaque, opaque, transparent];
gradientLayer.locations = @[@(0), @(0.857), @(1)];
gradientLayer.startPoint = CGPointMake(0.5, 0);
gradientLayer.endPoint = CGPointMake(0.5, 1);
[maskLayer addSublayer:gradientLayer];
gradientView.layer.mask = maskLayer;
}
淺析
代碼其實(shí)還是很簡(jiǎn)單的椎工，一對(duì)父子關(guān)系的控件+漸變圖層的實(shí)現(xiàn)饭于，即可完成此功能蜀踏。接下來(lái)做個(gè)簡(jiǎn)單的分析：
- 給需要加遮罩效果的視圖增加一個(gè)父級(jí)View，為了讓此容器內(nèi)的所有控件都具有統(tǒng)一的遮罩效果掰吕；也是為了保證TextView能保持正常滾動(dòng)果覆。因?yàn)槿绻oTextView的layer增加遮罩的話，將會(huì)導(dǎo)致遮罩層跟著一起滾動(dòng)殖熟，影響實(shí)際效果局待。
- CAGradientLayer的編寫(xiě)。CAGradientLayer是個(gè)線性的圖層菱属，經(jīng)常用于漸變色效果钳榨。
colors：漸變色的顏色節(jié)點(diǎn)；
locations：顏色節(jié)點(diǎn)的位置纽门，取值范圍[0,1]薛耻；
startPoint、endPoint：起始點(diǎn)與結(jié)束點(diǎn)赏陵，可通過(guò)參數(shù)實(shí)現(xiàn)是水平饼齿、垂直還是斜向； - layer.mask蝙搔。給gradientLayer增加一層遮罩缕溉。
maskLayer透明的地方，gradientLayer就不會(huì)渲染吃型，而是變透明证鸥，顯示出gradientLayer之后的內(nèi)容；
maskLayer不透明的地方勤晚，gradientLayer就會(huì)正常渲染枉层。
Demo
多謝支持！
