这篇文章是系列文章的第三篇。
看过上一篇文章的朋友,已经知道标题中的“景”指代 view,“窗”指代 view.mask,窗景篇就是在梳理 mask 及 mask 动画。如果你还不熟悉 iOS 的 mask,建议先看一下第一篇。
前两篇我们介绍了 mask、mask 动画的一些用法。
这一篇作为收尾,我们来实现一个效果练练手,
也借这个效果,让大家回忆起一个简单的道理:复杂的效果,可以等价于简单效果的组合。
一、效果
这个效果如下面的动图所示:
我们截取比较有代表性的一帧,如下图所示:
从图中可以看到,波浪由两种颜色组成,各部分颜色不同。
这个效果看上去有点复杂,如果不熟悉 mask,可能一时半会儿没有思路。
但看过前两篇的朋友,可能已经暗暗在想,是窗在动?还是景在动?会不会有多套窗景?
那么接下来,我们先通过一个简单的效果来看一下原理。
注:波浪动画的实现和本文关系不大,本文不会讲述。
网上有成熟的波浪动画的教程,本文 demo 中 WaveView 类也有简要的注释。
二、一个简单的效果
这个效果如下图所示:
从图中可以看到,一张黑白图片上有一部分是彩色的。
我们当然可以通过图像处理来实现这个效果,但在本文中,我们还是使用 mask 的方式来实现。
我们回忆一下前文中的一张图:
通过对frontView 添加一个圆 mask,就形成了图中的效果。
也许有的朋友已经想到,把上图中 backView 的图换成和 frontView 一样的黑白图片,不就是本例的效果吗,如下图所示:
也就是说,这个效果看上去是黑白图片上有一部分变成了彩色,
但其实只是两张内容一样的图片重叠,黑白图片在后,彩色图片在前,而前方的彩色图片,被施加了圆形的 mask。
这个效果很简单,但能让我们意识到一件事:看上去是一张图,其实可能是多张图组合而成。
既然如此,那本文的波浪动画中,各部分颜色不同的波浪,真的只是一个波浪吗?
没错,本例中的波浪,也是多个波浪组合而成的,接下来,我们就详细的看一看。
三、多景合一
和黑白、彩色图片重叠效果一样,多色波浪也是由一组重叠的波浪 view 组合而成。
每层 view 的波浪只有一种颜色,各层 view 的波浪动画都一致,对于每一帧,所有波浪都是完全重合的。
每个波浪 view 都有自己的 mask,在 mask 们 的控制下,每层波浪 view 只显示了波浪的一部分,我们看到的多色波浪,就是各层波浪 view 可见部分的组合。
我们取两层来示意一下,如下图所示:
从图中可以看到,白底红波浪 view 有个上半圆 mask、黑底蓝波浪 view 有个下半圆 mask,两个 view 的波浪进度完全一致,组合之后就成了最右边的的效果。
捅破了这层窗户纸后,其实原理就是如此简单。
知道了原理,其实大家可以自己去动手去实现效果了,
当然,如果不着急的话,那咱们一块把流程走一遍。
四、创建4层 view
这一步很简单,创建 frame 完全一致的 4 层 view,本例中使用 WaveView 作为 view,
根据需要,设置不同的背景色(黑、白)和波浪色(红、蓝)。
这一步后,4 层波浪 view 如图所示:
示意代码如下:
// A3WaveViewController
private func addSubViews() {
// 上大半圆 view
view.addSubview(bigTopView)
// 上小半圆 view
view.addSubview(smallTopView)