前言
最近忙着公司的项目，零零散散的功能以及Flutter的研发，导致简书有两年时间没更新了。今天趁着闲暇时间，把前段时间项目里涉及到的遮罩拿出来分享。网络上的方式层出不穷甚至过于复杂，本人就带来个简化后的实现方式（不是什么高超技术，望大佬们高抬贵手哈）。
示意图
遮罩前
遮罩后
实现方式
- 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];
- 实现渐变图层
/// 更新渐变图层
- (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;
}
浅析
代码其实还是很简单的，一对父子关系的控件+渐变图层的实现，即可完成此功能。接下来做个简单的分析：
- 给需要加遮罩效果的视图增加一个父级View，为了让此容器内的所有控件都具有统一的遮罩效果；也是为了保证TextView能保持正常滚动。因为如果给TextView的layer增加遮罩的话，将会导致遮罩层跟着一起滚动，影响实际效果。
- CAGradientLayer的编写。CAGradientLayer是个线性的图层，经常用于渐变色效果。
colors：渐变色的颜色节点；
locations：颜色节点的位置，取值范围[0,1]；
startPoint、endPoint：起始点与结束点，可通过参数实现是水平、垂直还是斜向； - layer.mask。给gradientLayer增加一层遮罩。
maskLayer透明的地方，gradientLayer就不会渲染，而是变透明，显示出gradientLayer之后的内容；
maskLayer不透明的地方，gradientLayer就会正常渲染。
Demo
多谢支持！
