文章結構
- 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玩玩，歡迎下載交流，有疑問或者更好的建議可以留言哦！
最后，謝謝你的垂閲！
