文章结构
- CALayer图层结构
- mask的理解
- 影响mask行为的因素
- mask使用前提
- 范例演示
CALayer图层结构
我们先来看一张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。
- 当mask图层完全透明时，即透明度为0，则遮罩区域不显示
- 当mask图层完全不透明时，即透明度为1，则遮罩区域显示
- 当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'scompositingFilter' 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后的效果图，如下图：
每个图片对应一种效果。
我们来一一讲解,每个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玩玩，欢迎下载交流，有疑问或者更好的建议可以留言哦！
最后，谢谢你的垂閲！
