iOS 动画 - 窗景篇（一）

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

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

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

一、什么是 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 的描述。

二、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.