前言：
在开发过程中，类似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;
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！