iOS 动画 - 窗景篇（一）

iOS 有一种动画，使用虽然简单，但能实现不少有趣的效果，那就是 mask 动画。

若是你还不了解 mask 动画，看完本系列文章后，你能够学会这种动画。若是你已经使用过了，本文也能帮你梳理一下，让你使用起来更方便。

本系列文章共3篇，做为系列的开篇，咱们首先要搞清楚一个问题：什么是 mask。

1、什么是 mask

mask 是 UIView 或 CALayer 的一个属性，它决定了 view 或 layer 的哪一部分能被咱们看到。

本文为了方便讲述，主要使用 view 和它的 mask 属性。

iOS 对 mask 的描述，对不少人来讲不是特别直观，因此在贴出定义以前，咱们先尝试直观地看一下。

首先，咱们来看一下这张图：

如图所示，一张纸上有个圆洞，纸盖在了左边的图片上，图片的一部分经过这个洞透了过来，就像墙上开了一扇窗，让咱们看到了一部分风景。

不严谨的说，中间的这张黑纸就是 mask，它决定了 view 的哪一部分能被咱们看到。

不过这张图会误导咱们，让咱们感受 mask 挡住了 view，其实并非这样。 咱们来看一下这张图：

从这张图中，咱们能够看到：frontView.mask 只影响了 frontView 哪部分能够被咱们看到 ，对后面的 backView 没有任何影响。 看上去，mask 更像是对 view 进行了裁剪。

上面的两张图并不符合 iOS 对 mask 的描述， 但经过这两张图，咱们应该对 “mask 决定了 view 的哪一部分能被咱们看到” 这句话，有了直观的印象。

接下来，咱们就一块儿来看一下 iOS 对 mask 的描述。

2、iOS 中的 mask

咱们首先看一下 iOS 对 UIView 的 mask 的定义：

var mask: UIView? { get set }
复制代码

能够看到，UIView 的 mask，其实就是另外一个 UIView。

再看一下这句简要描述：

An optional view whose alpha channel is used to mask a view’s content.

这句描述指出了：用 mask 的 alpha channel（透明度通道） 去决定 view 的内容显示，但没说怎么决定。

接下来再看一下详细的描述：

Discussion

The view’s alpha channel determines how much of the view’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.

这句 “Fully or partially opaque pixels allow the underlying content to show through” 就比较清晰了，大意是：mask 上不透明的部分（包括半透明的部分，这种状况咱们稍后再看），可让 view 透过来。

“不透明的部分，可让 view 透过来”，这句话听上去可能让人有点困惑，咱们仍是用图来表示一下，咱们先根据这个描述，改造一下前文的那张图，以下：

图中的 mask（本质上也是个 view），只有中间的圆是有颜色（黑色）的，其他部分是透明的。当它做为左边 view 的 mask 时，只有中间有颜色（也就是不透明）的圆，才容许 view 透过来。

这就是为何有些人以为 mask 的描述不是很直观，毕竟咱们下意识里，会以为透明的部分，才能透事后面的东西。

其实也很好理解，mask 上的不透明的部分，只是窗户区域的描述，而不是窗户自己。当它做为 view 的 mask 时，系统就会把 mask 上不透明的部分（不论是纯色、图像仍是视频等）做为窗户区，真正渲染时，就会让 此处的view 透过来。

为了方便讲述，上面的图中，view 和 mask 的 我使用了同样的尺寸，但其实 mask 的 frame 并不重要。view 哪些部分能显示，只以 mask 不透明区域为准，和 mask 的 frame 没有关系 。

好比下面图中的效果和上图是同样的：

注：mask 的 frame 基于 view 的坐标系（和该 view 的 subView 的 frame 相似 ）

咱们知道了 mask 的含义，那么 mask 具体怎么使用呢，很简单，就是把1个 view 赋值给另外一个 view 的 mask 属性。

好比上图的效果，咱们大体能够这样写代码：

// backView
backView.frame = UIScreen.main.bounds
view.addSubview(backView)

// frontView 图片景
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)

// 圆窗
let mask = CircleView()
mask.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
mask.center = CGPoint(x: frontView.bounds.midX, y: frontView.bounds.midY)
frontView.mask = mask
复制代码

至此，咱们差很少就理解了 iOS 的 mask。 本系列文章中，为了便于描述，用窗指代 mask，用景指代 mask 关联的 view。

那么接下来，咱们就简单地看一点窗、景的简单例子，来打开一下思路，思路一打开，后续文章中的效果就很容易实现了。

3、窗、景的简单例子

先来看一下窗。

咱们已经知道，view 的 mask 也是个 view，既然 view 的样式多种多样，那窗的样式固然也是五花八门的。

好比咱们用一个 UIButton 做为以前图片 view 的 mask，button 的 title 天然就成了文字窗户，效果以下图所示：

示意代码以下：

// 图片景
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)

// 文字窗
let mask = UIButton(type: .custom)
mask.setTitle("柯烂", for: .normal)
mask.titleLabel?.font = UIFont.systemFont(ofSize: 100)
mask.frame = CGRect(x: 0, y: 0, width: 300, height: 200)
mask.center = CGPoint(x: frontView.bounds.midX, y: frontView.bounds.midY)
frontView.mask = mask
复制代码

接下来再看一下景。

景也是 view，能够是纯色、图片，也能够是动图、视频等。 本例中，咱们用一个渐变更画的 view 做为景，用一个圆形窗，效果以下图所示：

因为背景是渐变更画，下面这张动图能更好地展现效果：

示意代码以下：

// 渐变更画景
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)
// 执行动画
frontView.start()

// 圆窗
let mask = CircleView()
mask.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
mask.center = CGPoint(x: frontView.bounds.midX, y: frontView.bounds.midY)
frontView.mask = mask
复制代码

也许有的同窗已经想到了，上面的文字窗、渐变景一结合，不就是个不错的效果吗， 是啊，这就造成了动态渐变的文字效果，以下面的动图所示：

示意代码以下：

// 渐变更画景
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)
// 执行动画
frontView.start()

// 文字窗
let mask = UIButton(type: .custom)
mask.setTitle("柯烂", for: .normal)
mask.titleLabel?.font = UIFont.systemFont(ofSize: 100)
mask.frame = CGRect(x: 0, y: 0, width: 300, height: 200)
mask.center = CGPoint(x: frontView.bounds.midX, y: frontView.bounds.midY)
frontView.mask = mask
复制代码

例子举到这里，你们就明白了，只要选窗用景的思路开阔一些，mask 动画效果是多种多样的。

细心的同窗还记得，前面咱们留了个尾巴，我引用一下前文的话：

这句 “Fully or partially opaque pixels allow the underlying content to show through” 就比较清晰了，mask 上不透明的部分（包括半透明的部分，这种状况咱们稍后再看），可让 view 透过来。

因为彻底不透明的 mask 比较好理解（就是把不透明的区域，抠掉当作窗户），因此前文都以彻底不透明的 mask 做为示例。

读到了这里，咱们对半透明的 mask 理解已经没有障碍了，因此咱们补充一下半透明 mask。

4、半透明 mask

如今你们已经了解了，mask 上的不透明区至关于描述了窗户的区域，而 mask 的半透明度，至关于描述了窗户的通透程度。

mask 的区域彻底不透明，那窗户就是全透明的，view 能彻底透过来；而 mask 的区域半透明，窗户就是半透明的，view 能模模糊糊的透过来。 mask的透明度和窗户的透明度成反比。

咱们用一个实践中经常使用的例子来看一下。

例子是这样的， 有时候，咱们有一个半屏的 tableView，它的顶部再也不屏幕的顶部，而是在屏幕的中央（好比直播间里的聊天区）。 这种状况下，cell 向上滑出 tableView，滑到一半时，因为只显示半个 cell，tableView 的边缘会显得很明显。以下图所示：

咱们想让它的边缘不那么明显，有个相似淡出的效果，若是用 mask 来实现，只要有一个竖直渐变的 view 做为 mask 就能够了。

注：此处 mask 要做为 tableView 的 superView 的 mask（能够建立一个和 tableView 大小相等的 view 做为它的 superView）

mask 顶部逐渐过渡到了透明，相应地，窗户就渐渐过渡到了不透明，tableView 的顶部看上去就像是淡出了，效果以下图所示：

示意代码以下：

// table 景（tableContainer 来辅助）
let tableContainer = UIView()
let bounds = UIScreen.main.bounds
let gradientHeight: CGFloat = 20.0
tableContainer.frame = CGRect(x: 0, y: bounds.midY, width: bounds.width / 2, height: bounds.height / 2)
view.addSubview(tableContainer)
tableView.frame = tableContainer.bounds
tableContainer.addSubview(tableView)

// 半透明渐变窗
let mask = GradientView()
mask.frame = tableContainer.bounds
mask.gradientLayer.startPoint = CGPoint(x: 0, y: 1)
mask.gradientLayer.endPoint = CGPoint(x: 0, y: 0)
mask.colors = [.white, .white, UIColor.white.withAlphaComponent(0)]
mask.locations = [0, 1 - Double(gradientHeight / tableContainer.bounds.height), 1]
// 做为 tableContainer 的 mask，而不是 tableView
tableContainer.mask = mask
复制代码

半透明 mask 咱们就先说到这，后面的文章，咱们主要仍是以不透明 mask 为主。

尾声

至此，咱们对 mask 就有了足够的了解，也打开了一点窗与景的思路；接下来的文章，咱们就一块儿来看一下 mask 的各类玩法。

本文全部示例，在 GitHub 库 里都有完整的代码。

感谢您的阅读，咱们下篇文章见。

传送门

• GitHub 库
• iOS 动画 - 窗景篇（二）
• iOS 动画 - 窗景篇（三·完结）