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];

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)];								 
 1/3    1 2 3 下一页 尾页