欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-19 12:54:46
前言: 在开发过程中,类似android和其他平台的ui开发方法,需要通过一个mask图显示部分ui或者icon资源。ios的控件自带alpha的值,但是这个值都是整个i...

前言:

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

mask属性介绍

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

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

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

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

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

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

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

 

mask 实例使用

实例1:渐变进度条

先看"脸" 再谈"内涵"

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

 整个动画效果主要可以分成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.

iOS  Mask属性的详细介绍及应用实例 iOS  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而且做出来的效果不好,那我们来用逼格高点的镂空方式实现:

先来一个简单的效果图:

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

实现起来也很简单,主要分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;

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

上一篇:

下一篇: