文章结构

• CALayer图层结构
• mask的理解
• 影响mask行为的因素
• mask使用前提
• 范例演示

CALayer图层结构

我们先来看一张layer图层的结构图，如下：

layer图层结构图

图层渲染时候，backgroundColor最底下，contents内容居中（一般该对象是一个CGImageRef对象，可通过contentsGravity属性设置图片展示模式，是平铺整个bounds还是等比例展示），border在最上面，如果该layer有子layer，则子layer也显示在boarder下面。

mask的理解

mask是CALayer的一个属性，它本身也是一个CALayer类。我们使用该属性主要是为了让两个图层搭配出一个新的视觉效果，简单理解就是一个遮罩，mask图层区域外的任何区域不显示。

影响mask行为的因素

就是mask图层（是遮罩层，而不是被遮罩层哦~）的透明度，透明度的取值范围（0，1），而CALayer里有两个主要的属性和透明度有关，就是contents属性和backgroundCorlor属性。我们用contents最多的就是给它赋值一个图片，而图片是有透明通道和无透明通道的，backgroundColor属性也是有透明度的（mask不关心是什么颜色，只关心颜色的透明度），而且clearColor的透明度是0，可以去查看UIColor的API。

1. 当mask图层完全透明时，即透明度为0，则遮罩区域不显示
2. 当mask图层完全不透明时，即透明度为1，则遮罩区域显示
3. 当mask图层的透明度值在0~1之间，则mask图层会和被遮罩层内容混合

使用前提

被遮罩图层不能有父图层即superLayer，否则效果是不确定的。mask属性苹果文档说明原文：

A layer whose alpha channel is used as a mask to select between the
layer's background and the result of compositing the layer's
contents with its filtered background. Defaults to nil. When used as
a mask the layer's compositingFilter' andbackgroundFilters'
properties are ignored. When setting the mask to a new layer, the
new layer must have a nil superlayer, otherwise the behavior is
undefined. Nested masks (mask layers with their own masks) are
unsupported.

正确：layer->mask
undefiend：superLayer->layer->mask
但是有一个特殊情况又可以，就是view1添加一个子图层，然后再添加一个子控件，再把子控件的layer作为子图层的mask，这种情况又可以正常使用，会在下面的例子中给出示例代码。如有想法欢迎留言交流。

范例演示

这里一共演示4种效果，每个图片上一个效果，我们先来看不使用mask图层时候的图片原样，如下图：

原图

都是同一张图片。
再来看在图片上添加mask后的效果图，如下图：

mask4种效果图
每个图片对应一种效果。
我们来一一讲解,每个mask图层区域为图片控件内缩进10,即

_firstLayer.frame = CGRectMake(space, space, _firstImageview.bounds.size.width - space * 2, _firstImageview.bounds.size.height - space * 2);

• 示例一：contents是一个透明的图片（就是它带透明通道的，不懂可以去问UI，其实我们天天都在用，也可以查看图片属性看是否有alpha通道字样）。
  backgroundColor透明度为0，代码如下：

- (void)configureTransparentLayer{
    
    //init mask layer
    _firstLayer = [CALayer layer];
    _firstLayer.frame = CGRectMake(space, space, _firstImageview.bounds.size.width - space * 2, _firstImageview.bounds.size.height - space * 2);
    _firstLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage;
    _firstLayer.contentsGravity = kCAGravityResizeAspect;
    _firstLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.0].CGColor;
    
    //or u can init the bg color with clearColor, its appha is 0.
//    _firstLayer.backgroundColor = [UIColor clearColor].CGColor;
    
    //add layer to imageview
    _firstImageview.layer.mask = _firstLayer;
}

效果：如第一张图片，contents内容和被遮罩内容混合显示。
分析：背景色透明，背景色区域内都不显示被遮罩图层；图片是透明的（但是图片的轮廓内容是不透明的，否则我们怎么看得见图片呢），由CALayer图层结构和影响mask行为的因素可知，contents内容和被遮罩区融合显示。

• 示例二： contents是一个透明的图片，backgroundColor透明度为1，即背景色不透明，代码如下：

- (void)configureNonTransparentLayer{
    
    //init mask layer
    _topLayer = [CALayer layer];
    _topLayer.frame = CGRectMake(30, 30, _topImageview.bounds.size.width - 30 * 2, _topImageview.bounds.size.height - 30 * 2);
    _topLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage;
    _topLayer.contentsGravity = kCAGravityResizeAspect;
    _topLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:1].CGColor;
    
    //add layer to imageview
    _topImageview.layer.mask = _topLayer;
}

效果：如第二张图片所示。
分析：背景色不透明，背景色区域内的被遮罩图层内容都显示，即使contents有内容，但是背景色为不透明，无法和被遮罩图层混合显示。

• 示例三：contents是一个不透明的图片，backgroundColor透明度为0.5，即背景色不透明，代码如下：

- (void)configureCompositeMaskLayer{
    
    //init mask layer
    _middleLayer = [CALayer layer];
    _middleLayer.frame = CGRectMake(30, 30, _middleImageview.bounds.size.width - 30 * 2, _middleImageview.bounds.size.height - 30 * 2);
    _middleLayer.contents = (id)[UIImage imageNamed:@"bgNonTransparent"].CGImage;
    _middleLayer.contentsGravity = kCAGravityResizeAspect;
    _middleLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5].CGColor;
    
    //add layer to imageview
    _middleImageview.layer.mask = _middleLayer;
}

效果：第三张图片所示。
分析：背景色有一定透明度 ，能显示被遮罩层内容，但是有一定的模糊，而contents内容为不透明的，所以在contents内容处的被遮罩内容没有模糊。

• 示例四：在一个有superLayer的layer上添加mask，结果是undefined的。代码如下：

- (void)configureUndefinedMaskLayer{
    
    //add gradient layer to imageview layer
    _gradientLayer = [CAGradientLayer layer];
    _gradientLayer.frame =  _bottomImageview.bounds;
    [self setupGradientlayer:_gradientLayer];
    [_bottomImageview.layer addSublayer:_gradientLayer];
    
    //init mask layer
    _btmLayer = [CALayer layer];
    _btmLayer.frame = CGRectMake(30, 30, _bottomImageview.bounds.size.width - 30 * 2, _bottomImageview.bounds.size.height - 30 * 2);
    _btmLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage;
    _btmLayer.contentsGravity = kCAGravityResizeAspect;
    _btmLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5].CGColor;
    
    _gradientLayer.mask = _btmLayer;
}

效果：如第四张图片所示。
分析：在gradientLayer上添加一个mask，mask图层的contents是一张透明图片，backgroundColor为0.5。按理mask区域外的被遮罩层不显示（我们的mask的bounds是比被遮罩层的bounds小的哦~，效果更明显），但是得到的效果和理论不一样，所以是和苹果文档里说的一样，当mask的图层有父图层时即superLayer->layer->mask，得到的结果是undefined的。

在使用前提里提到的特殊情况我们实现下。

• 示例五：把label的文字渲染到另一个图层上
  代码如下：

- (void)configureLayerForLabelBgView{
    
    //add gradient layer to label bg view
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = _labelBgView.bounds;
    [self setupGradientlayer:gradientLayer];

    [_labelBgView.layer addSublayer:gradientLayer];
    
    //add label to label bg view
    UILabel *label = [[UILabel alloc] initWithFrame:_labelBgView.bounds];

    //remember to set the bg color's alpha to 0
    label.backgroundColor = [UIColor clearColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.text = @"天王老子天下无敌";
    label.font = [UIFont systemFontOfSize:30];
    [_labelBgView addSubview:label];

    gradientLayer.mask = label.layer;
    
}

效果如下图：

文字渲染到另外图层上

分析：在一个view上添加一个渐变图层，再把label作为子控件添加到一个view上，最后把label的layer作为渐变图层的mask，要把文字渲染到渐变图层上，需要把label的backgroundColor透明度设置为0，就可以融合lable的文字到渐变图层上了。

• 示例六：把图片内容渲染到另外一个图层上
  代码如下：

- (void)configureLayerForImageBgView_1{
    //add gradient layer to ImageBgView_1
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = _imageBgView_1.bounds;
    [self setupGradientlayer:gradientLayer];
    [_imageBgView_1.layer addSublayer:gradientLayer];
    
    //add imageview to imageBgView_1
    UIImageView *imgView = [self imageViewWithframe:CGRectMake(10, 10, _imageBgView_1.bounds.size.width-20, _imageBgView_1.bounds.size.height-20) image:@"bgTransparent"];
    [_imageBgView_1 addSubview:imgView];
    
    _imageBgView_1.layer.mask = imgView.layer;
}

效果如下图中的第一个图片，mask的bounds比渐变图层小10，即内缩进10pixel，第二个图是图片的原图。

把图片渲染到另外图层上

分析：和示例五一个样，backgroundColor不显示设置的话都是nil，透明度也是0。

我认为已经讲得够透彻了，不明白的可以下载Demo玩玩，欢迎下载交流，有疑问或者更好的建议可以留言哦！
最后，谢谢你的垂閲！