iOS Mask属性的详细介绍及应用实例

前言：

在开发过程中，类似android和其他平台的ui开发方法，需要通过一个mask图显示部分ui或者icon资源。ios的控件自带alpha的值，但是这个值都是整个icon或者ui的透明效果，不能做到自定义的透明或者镂空效果。我们必须借助于mask资源图。

mask属性介绍

mask平时用的最多的是maskstobounds 吧. 其实除此以外mask使用场景很多,看完之后你会发现好真是好用的不要不要的...

先来了解下mask属性到底是什么?

mask 英文解释是蒙板/面罩,平时我们称为蒙层. 在苹果官方文档里如下图,意思是mask是一个可选的layer,它可以是根据透明度来掩盖layer的内容. 

这么一说好像...还是不晓得有什么卵用...

那再看下面这个说明,意思是layer的透明度决定了layer内容是否可以显示,非透明的内容和背景可以显示,透明的则无法显示.

 

mask 实例使用

实例1:渐变进度条

先看"脸" 再谈"内涵"

 整个动画效果主要可以分成4步骤:

1.创建一个calayer 做为背景色进度条

calayer *bglayer = [calayer layer];

  bglayer.frame = cgrectmake(knumbermarkwidth / 2, self.numbermarkview.bottom + 10.f, self.width - knumbermarkwidth / 2, kprocessheight);

  bglayer.backgroundcolor = [uicolor colorwithhex:0xf5f5f5].cgcolor;

  bglayer.maskstobounds = yes;

  bglayer.cornerradius = kprocessheight / 2;

  [self.layer addsublayer:bglayer];

2.创建一个cagradientlayer 渐变效果的layer

self.gradientlayer = [cagradientlayer layer];
  self.gradientlayer.frame = bglayer.frame;
  self.gradientlayer.maskstobounds = yes;
  self.gradientlayer.cornerradius = kprocessheight / 2;
　　// 设置渐变颜色数组
  [self.gradientlayer setcolors:[nsarray arraywithobjects:
                  (id)[[uicolor colorwithhex:0xff6347] cgcolor],
                  [(id)[uicolor colorwithhex:0xffec8b] cgcolor],
                  (id)[[uicolor colorwithhex:0xeeee00] cgcolor],
                  (id)[[uicolor colorwithhex:0x7fff00] cgcolor],
                  nil]];
　　// 设置渐变位置数组
  [self.gradientlayer setlocations:@[@0.3, @0.5, @0.7, @1]];
　　// 设置渐变开始和结束位置
  [self.gradientlayer setstartpoint:cgpointmake(0, 0)];
  [self.gradientlayer setendpoint:cgpointmake(1, 0)];

3.创建一个mask layer,并设置为cagradientlayer渐变层的mask. 然后通过设置masklayer 宽度来控制进度了. 是不是很简单,不过好像没有感觉不出mask的强大之处...

　self.masklayer = [calayer layer];
   self.masklayer.frame = cgrectmake(0, 0, (self.width - knumbermarkwidth / 2) * self.percent / 100.f, kprocessheight);
  [self.gradientlayer setmask:self.masklayer];

- (void)circleanimation { // 进度条动画
  
  [catransaction begin];
  [catransaction setdisableactions:no];
  [catransaction setanimationtimingfunction:[camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]];
  [catransaction setanimationduration:kanimationtime];
  self.masklayer.frame = cgrectmake(0, 0, (self.width - knumbermarkwidth / 2) * _percent / 100.f, kprocessheight);
  [catransaction commit];
}

4.文字渐变,这个就能看出mask 的特点了.

先创建一个label展示分数,再同第2步创建一个一样的渐变cagradientlayer.将label的关联图层设置为渐变cagradientlayer 的mask, 这样就ok了.

上面有说过mask属性特点是内容非透明则可以显示,透明则隐藏.

实例中,label做为渐变层的mask, label中文字部分是非透明的,其他是透明的.那么文字和文字背景(这里就是渐变层)可以显示.大概就像镂空文字部分,然后显示出底下的渐变层.

最后只要移动label 的位置就能看到我们所要的效果文字颜色渐变. 下左图设置了mask , 下右图未设置mask.

 

- (void)setnumbermarklayer { // 提示文字设置渐变色
  
  cagradientlayer *numbergradientlayer = [cagradientlayer layer];
  numbergradientlayer.frame = cgrectmake(0, ktopspaces, self.width, knumbermarkheight);
  [numbergradientlayer setcolors:self.colorarray];
  [numbergradientlayer setlocations:self.colorlocationarray];
  [numbergradientlayer setstartpoint:cgpointmake(0, 0)];
  [numbergradientlayer setendpoint:cgpointmake(1, 0)];
  [self.layer addsublayer:numbergradientlayer];
  [numbergradientlayer setmask:self.numbermark.layer];
  self.numbermark.frame = numbergradientlayer.bounds;
}

源码可以进github查看: https://github.com/xl20071926/lxgradientprocessview 

另外还有类似的仿照芝麻信用,用mask和cashaperlayer 做的,有兴趣的也可以看下:https://github.com/xl20071926/lxcircleanimationview

 实例2:镂空效果

新手引导大多数app都会有这个功能,然而据了解蛮多就是直接贴张图片上面就搞定了.

额,这样做确实简单,可是这样好low而且做出来的效果不好,那我们来用逼格高点的镂空方式实现:

先来一个简单的效果图:

实现起来也很简单,主要分3个步骤:

1.创建一个镂空的路径:

　　uibezierpath 有个原生的方法- (void)appendpath:(uibezierpath *)bezierpath, 这个方法作用是俩个路径有叠加的部分则会镂空.

　　这个方法实现原理应该是path的fillrule 默认是fillruleevenodd(calayer 有一个fillrule属性的规则就有kcafillruleevenodd), 而evenodd 是一个奇偶规则,奇数则显示,偶数则不显示.叠加则是偶数故不显示.

2.创建cashapelayer 将镂空path赋值给shapelayer

3.将shapelayer 设置为背景视图的mask

uiview *backgroundview = [[uiview alloc] init];
  backgroundview.frame = self.view.bounds;
  backgroundview.backgroundcolor = [uicolor colorwithwhite:0 alpha:0.7];
  [self.view addsubview:backgroundview];
  // 创建一个全屏大的path
  uibezierpath *path = [uibezierpath bezierpathwithrect:self.view.bounds];
  // 创建一个圆形path
  uibezierpath *circlepath = [uibezierpath bezierpathwitharccenter:cgpointmake(self.view.center.x, self.view.center.y - 25)
                               radius:50
                             startangle:0
                              endangle:2 * m_pi
                              clockwise:no];
  [path appendpath:circlepath];
  
  cashapelayer *shapelayer = [cashapelayer layer];
  shapelayer.path = path.cgpath;
  backgroundview.layer.mask = shapelayer;

顺便提下,在实际开发中可能遇到这种需求,当tableview 滑动到某个位置的时候才显示新手引导.

这时候就需要将tableview上的坐标转化为相对于屏幕的坐标.  可用原生的方法:

- (cgrect)convertrect:(cgrect)rect toview:(nullable uiview *)view;

- (cgrect)convertrect:(cgrect)rect fromview:(nullable uiview *)view;

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！