前言：
在开发过程中，类似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 做为背景色进度条
|
1
2
3
4
5
6
7
8
9
10
11
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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的强大之处...
|
1
2
3
|
self.masklayer = [calayer layer]; self.masklayer.frame = cgrectmake(0, 0, (self.width - knumbermarkwidth / 2) * self.percent / 100.f, kprocessheight); [self.gradientlayer setmask:self.masklayer]; |
|
1
2
3
4
5
6
7
8
9
|
- (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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
- (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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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;
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
