iOS文字遮罩的实现及浅析

---

前言

最近忙着公司的项目，零零散散的功能以及Flutter的研发，导致有两年时间没更新了。今天趁着闲暇时间，把前段时间项目里涉及到的遮罩拿出来分享。网络上的方式层出不穷甚至过于复杂，本人就带来个简化后的实现方式（不是什么高超技术，望大佬们高抬贵手哈）。

---

示意图

遮罩前

遮罩后

---

实现方式

1. UI布局

// 文字内容底部渐变
UIView *gradientView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 350, 200)];
[self.view addSubview:gradientView];
    
 // 文字内容
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];

2. 实现渐变图层

/// 更新渐变图层
- (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;
}

---

浅析

代码其实还是很简单的，一对父子关系的控件+渐变图层的实现，即可完成此功能。接下来做个简单的分析：

1. 给需要加遮罩效果的视图增加一个父级View，为了让此容器内的所有控件都具有统一的遮罩效果；也是为了保证TextView能保持正常滚动。因为如果给TextView的layer增加遮罩的话，将会导致遮罩层跟着一起滚动，影响实际效果。
2. CAGradientLayer的编写。CAGradientLayer是个线性的图层，经常用于渐变色效果。
   colors：渐变色的颜色节点；
   locations：颜色节点的位置，取值范围[0,1]；
   startPoint、endPoint：起始点与结束点，可通过参数实现是水平、垂直还是斜向；
3. layer.mask。给gradientLayer增加一层遮罩。
   maskLayer透明的地方，gradientLayer就不会渲染，而是变透明，显示出gradientLayer之后的内容；
   maskLayer不透明的地方，gradientLayer就会正常渲染。

---

Demo

Github

---

多谢支持！