iOS文字遮罩的实现及浅析

2021-07-13  本文已影响0人  颠趴高手

前言

最近忙着公司的项目,零零散散的功能以及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];
  1. 实现渐变图层
/// 更新渐变图层
- (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


多谢支持!

上一篇下一篇

猜你喜欢

热点阅读