用CAGradientLayer添加渐变遮罩

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

没加遮罩

法一: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添加渐变遮罩)