美文网首页很常
用CAGradientLayer添加渐变遮罩

用CAGradientLayer添加渐变遮罩

作者: DSA碼侬 | 来源:发表于2021-02-07 13:31 被阅读0次

    最近自定义一个视图需要添加遮罩,使看上去柔和一些。
    说明:控制器页面整体有个背景图
    未加遮罩如下图绿色(上下)框所示:

    没加遮罩

    法一:addSublayer:上下添加遮罩layer

    - (instancetype)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
            
            // textView
            YYTextView *textView = [[YYTextView alloc] init];
            textView.showsVerticalScrollIndicator = NO;
            [self addSubview:textView];
            self.textView = textView;
            
            
            // 上下蒙层 渐变
            CAGradientLayer *layer = [CAGradientLayer layer];
            layer.frame = self.bounds;
            // 渐变方向
            layer.startPoint = CGPointMake(0, 0);
            layer.endPoint = CGPointMake(0, 1);
            // 设定颜色组
            layer.colors = @[
                             (__bridge id)[UIColor colorWithWhite:1 alpha:1.0f].CGColor, // 白色 不透明
                             (__bridge id)[UIColor colorWithWhite:1 alpha:0.0f].CGColor, // 透明
                             (__bridge id)[UIColor colorWithWhite:1 alpha:0.0f].CGColor, // 透明
                             (__bridge id)[UIColor colorWithWhite:1 alpha:1.0f].CGColor // 白色 不透明
                             ];
            // 设定颜色的分割点 必须递增
            layer.locations = @[@0, @0.1, @0.9, @1.0];
            //实际上->下显示:不透明->透明->透明->不透明
            [self.layer addSublayer:layer];
        }
        return self;
    }
    

    上->下:不透明->透明->透明->不透明 看上去应该就是我们需要的,运行如下所示:


    addSublayer:加遮罩

    显然:不是我们想要的,与大背景图完全不融合。

    所以,如果 没有背景图的话且上下视图全是白色backgroundColor的话,这样做是完全没问题的。(或者其他颜色,只要背景色与layer的colors的主色相同即可)

    法二:self.layer.mask上下添加遮罩layer

    // 上下蒙层 渐变
            CAGradientLayer *layer = [CAGradientLayer layer];
            layer.frame = self.bounds;
            // 渐变方向
            layer.startPoint = CGPointMake(0, 0);
            layer.endPoint = CGPointMake(0, 1);
            // 设定颜色组
            layer.colors = @[
                             (__bridge id)[UIColor colorWithWhite:1 alpha:0.0f].CGColor, // 代码透明
                             (__bridge id)[UIColor colorWithWhite:1 alpha:1.0f].CGColor, // 代码不透明
                             (__bridge id)[UIColor colorWithWhite:1 alpha:1.0f].CGColor, // 代码不透明
                             (__bridge id)[UIColor colorWithWhite:1 alpha:0.0f].CGColor  // 代码透明
                             ];
            // 设定颜色的分割点 必须递增
            layer.locations = @[@0, @0.1, @0.9, @1.0];
          
            // 实际上->下显示:不透明->透明->透明->不透明!!!! 解释如下
            self.layer.mask = layer;
    

    运行如下图所示:


    self.layer.mask上下添加遮罩

    显然是我们所希望的,与背景完全融合在一起。

    这里说明一下mask的属性,mask的属性很简单,例如:view上加了一层imageView,如果imageView.layer.mask = layerA,那么layerA上不透明的部分将会被绘制成透明,透明的部分将会把imageView.layer绘制成白色(与“ 代码透明”、“代码不透明”相反)

    相关文章

      网友评论

        本文标题:用CAGradientLayer添加渐变遮罩

        本文链接:https://www.haomeiwen.com/subject/gzhztltx.html