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



注意：mask 的 backgroundColor 要记得设置颜色（任意颜色都行），不能是 clearColor，否则 mask 不会生效。



至此，我们差不多就理解了 iOS 的 mask。

本系列文章中，为了便于描述，用窗指代 mask，用景指代 mask 关联的 view。



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



三、窗、景的简单例子



先来看一下窗。



我们已经知道，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。



四、半透明 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 的 WindowAndScenery 库 里都有完整的代码。



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



传送门



• GitHub 的 WindowAndScenery 库

• iOS 动画 - 窗景篇（二）

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