Mask属性介绍

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

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

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

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

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

Mask 实例使用

实例1:渐变进度条

先看"脸" 再谈"内涵"

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

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

     CALayer *bgLayer = [CALayer layer];

     bgLayer.frame = CGRectMake(kNumberMarkWidth / , self.numberMarkView.bottom + .f, self.width - kNumberMarkWidth / , kProcessHeight);

     bgLayer.backgroundColor = [UIColor colorWithHex:0xF5F5F5].CGColor;

     bgLayer.masksToBounds = YES;

     bgLayer.cornerRadius = kProcessHeight / ;

     [self.layer addSublayer:bgLayer];

2.创建一个CAGradientLayer 渐变效果的Layer

   self.gradientLayer =  [CAGradientLayer layer];
self.gradientLayer.frame = bgLayer.frame;
self.gradientLayer.masksToBounds = YES;
self.gradientLayer.cornerRadius = kProcessHeight / ;
  // 设置渐变颜色数组
[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, @]];
  // 设置渐变开始和结束位置
[self.gradientLayer setStartPoint:CGPointMake(, )];
[self.gradientLayer setEndPoint:CGPointMake(, )];

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

    self.maskLayer = [CALayer layer];
self.maskLayer.frame = CGRectMake(, , (self.width - kNumberMarkWidth / ) * self.percent / .f, kProcessHeight);
3 [self.gradientLayer setMask:self.maskLayer];
 - (void)circleAnimation { // 进度条动画

     [CATransaction begin];
[CATransaction setDisableActions:NO];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[CATransaction setAnimationDuration:kAnimationTime];
self.maskLayer.frame = CGRectMake(, , (self.width - kNumberMarkWidth / ) * _percent / .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(, kTopSpaces, self.width, kNumberMarkHeight);
[numberGradientLayer setColors:self.colorArray];
[numberGradientLayer setLocations:self.colorLocationArray];
[numberGradientLayer setStartPoint:CGPointMake(, )];
[numberGradientLayer setEndPoint:CGPointMake(, )];
[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: 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 - )
radius:
startAngle:
endAngle: * 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;

好了,介绍完毕.

第一次写博客,玻璃心求轻喷,希望自己能坚持下去,当做一种知识总结也能分享给一些新手朋友们.

iOS—Mask属性的使用的更多相关文章

  1. iOS开发——UI篇&文字渐变效果:图层中的mask属性

    文字渐变效果:图层中的mask属性 本次文章,主要讲述的是图层中的mask属性,利用它,可以做出文字渐变效果! 一.文字渐变效果: 二.文字渐变实现思路: 1.创建一个颜色渐变层,渐变图层跟文字控件一 ...

  2. 文字渐变效果:图层中的mask属性

    http://www.cocoachina.com/ios/20150716/12571.html 前言 已经很久没写blog了,最近发生了太多事情,失去了生命中一位很重要的成员,使我不得不放下对技术 ...

  3. 利用layer的mask属性实现逐渐揭示的动画效果

    github上又看到个不错的动画(https://github.com/rounak/RJImageLoader),如图: 所以就想来自己实现以下 不试不知道,这个动画还真不是看上去那么简单,我自己想 ...

  4. Unity 摄像机Clear Flags和Culling Mask属性用途详解

    原文地址:http://blog.csdn.net/tanmengwen/article/details/8798231 1.简述两个属性 1.1 Clear Flags 清除标记 每个相机在渲染时会 ...

  5. CALayer之mask属性-遮罩

    CALayer有一个属性叫做mask. 这个属性本身就是个CALayer类型,有和其他图层一样的绘制和布局属性. 它类似于一个子图层,相对于父图层(即拥有该属性的图层)布局,但是它却不是一个普通的子图 ...

  6. iOS中属性与成员变量的区别

    一.类Class中的属性property 在ios第一版中,我们为输出口同时声明了属性和底层实例变量,那时,属性是oc语言的一个新的机制,并且要求你必须声明与之对应的实例变量,例如: @interfa ...

  7. IOS开发-属性动画和关键帧动画的使用

    CAMediaTiming是一个协议(protocol),CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类. 继承关系: CoreAnmiation 核心动画 简写CA ...

  8. iOS中属性Property的常用关键字的使用说明

    属性关键字的作用 现在我们iOS开发中,基本都是使用ARC(自动引用计数)技术,来编写我们的代码.因此在属性property中我们经常使用的关键字有strong,weak,assign,copy,no ...

  9. iOS的属性声明:retain和strong的区别

    声明属性时用strong或者retain效果是一样的(貌似更多开发者更倾向于用strong).不过在声明Block时,使用strong和retain会有截然不同的效果.strong会等于copy,而r ...

随机推荐

  1. C# 技巧(3) C# 操作 JSON

    RestAPI中, 经常需要操作json字符串,  需要把json字符串"反序列化"成一个对象, 也需要把一个对象"序列化"成一字符串. C# 操作json, ...

  2. Ingress 记萌新的第一次连多重(xjbl)

    之前为了升七,ArtanisWei学长告诉我可以去紫金园雕塑[这是什么地方啊],顺带靠卖萌骗了一桶key 于是屁颠屁颠的跑去按照群里攻略开始连多重[馒头 by handsomepeach],连了一百年 ...

  3. scalac 学习

    val logEnable = false def log(msg: => String) = if (logEnable) println(msg) val MSG = "progr ...

  4. JS判断客户端是否是iOS或者Android

    通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端.代码如下: <script type="text/javascript"> var ...

  5. error MSB6006: “CL.exe”已退出,代码为X —— 的解决办法

    错误 : error MSB6006: “CL.exe”已退出,代码为X . 解决方法: 1.有少可能是执行目录引起的. 参考 http://bbs.csdn.net/topics/370064083 ...

  6. python登录执行命令

    #-*- coding: utf-8 -*- #!/usr/bin/python import paramiko import threading import getpass def ssh2(ip ...

  7. Secondary NameNode:的作用?

    前言 最近刚接触Hadoop, 一直没有弄明白NameNode和Secondary NameNode的区别和关系.很多人都认为,Secondary NameNode是NameNode的备份,是为了防止 ...

  8. Python3学习(一)-基础、数据类型、变量、字符串和编码、list&tuple、if、for、while、dict、set、函数与参数

    ##廖雪峰py3笔记 ## '//'这是获得相除后的整数部分 ##a = 10//3 ##print (a) ## '/'获得相除后的结果,为浮点数,结果能整除也也是浮点数 ##b = 10/3 ## ...

  9. android-oldman之TitleBar

    随着大众口味的不断提高,对app要的开发的要求也不断提高,开发人员们要在app上展示的东西安也越来越多,android早期的一些控件慢慢的不不能满足开发的要求了,比如TitleBar的应用的就没有原来 ...

  10. Java 基础知识相关好文章

    1. 使用简单易懂的例子,分析了equals 和 hashCode 两个方法的异同,尤其中自定义类中对他们的重写,对Set等容器类的在插入时的判断是否相等的影响. http://blog.csdn.n ...