视错觉升级版：多个视错觉效果实现

之前发表过一篇关于视错觉的文章：《视错觉：从一个看似简单的自定义控件说起》，虽然不是用iOS开发中的Mask来实现的，但是原理和Mask原理是一样的，相当于手动给上面一层加了个Mask。当然用mask完全可以实现上篇博客中的效果，无论是使用Mask还是不使用Mask，都是利用了视错觉，都是两层不一样的视图进行叠加而成的。今天这篇博客是视错觉Demo的升级版，上篇博客发表后，好多小伙伴说使用Mask实现会更容易，其实使用Mask和之前的原理是一样的。今天我们这篇博客就使用Mask来实现视错觉的效果，并给出不使用Mask的解决方案。当然今天博客中的内容较多。

一、一些视错觉经典图片

在博客的第一部分呢，先放松一下，看一些视错觉的经典图片，当然下方图片来源于网络。还是那句话，你的眼睛有时候会欺骗你的，你看到的不一定是你看到的。

1.右下方的人和后方的人大小是一样的，第一眼我还不信，拿着尺子量了一下，结果是毋庸置疑的。

　　

 

2.下方两个竖直黑线真的是平行的

　　

 

3.中间那个框，真的是正方形的

　　

就先放这三张视错觉图片当开胃菜吧，比较我们今天的主题还是iOS开发，还是代码。说实话，看这种视错觉图片老感觉不舒服呢，越想越别扭。OK, 第一部分的开胃菜到此为止，更多视错觉图片请自行Google。

 

二、利用视错觉实现图片蒙版

本部分我要实现常见的图片蒙版，就是你看上去同一张图片不同的区域会有不同的颜色。这种效果我们经常看到，就是一个图片有部分区域是彩色的而其他部分则是黑白的。本部分我们先使用Mask来实现这个效果，然后使用自定义蒙版在实现一次。好进入今天的第一个主题。

1.在ImageView上使用Mask

开门见山，下方这个效果就是我们接下来要实现的效果。圆框区域中显示的图片是彩色的，圆框外是黑白的。我们可以通过手指移动来变化彩色的区域。下方就是我们要实现的最终效果。

　　

还是那句话，你看到的不一定是你看到的。上面的效果，给你的第一感觉是只用一张图片，然后渲染圆框区域内的部分即可。当然说到这，你就能猜到，上面是使用的两张图片来实现的，也就是两层。这种原理与上篇视错觉的博客中的原理一致。下方截图就是上述效果的层级截图。本质上使用的是两张图片，下面是一个黑白图片，上面是一个彩色图片。只不过我们给彩色图片添加了一个圆形的mask。在这儿简单的提一下mask吧，其实mask就是给上面的ImageView添加了一个层，然后设置一块区域，mask区域内是可见的, 而mask区域外是不透明的。所以就会形成上方的效果。

　　

实现上述效果是比较简单的，下方就是上述效果的核心代码。关键还是给上面的ImageView添加Mask。下方代码就是给上方彩色的ImageView添加mask, 然后在touchesMoved事件中随着手指的移动来改变mask的位置即可。至此上述这个效果就使用mask实现完毕了。

　　

 

2.自定义蒙版

我们不使用系统自带的Mask也能实现上述效果，而且实现起来并麻烦。该部分的核心主要是利用AutoLayout来实现上述效果。下方是我们使用AutoLayout来实现的上述效果，在下方的效果中，并没有用到上述的Mask，不过也是手动加了一层蒙版。下方就是我们没有使用mask的最终效果。效果还是和上方差不多少的。

　　

接下来我们来看上面这个效果的视图层级，这种实现方式的视图层级与第一部分的视图层级稍微不同。下方就是该部分效果所对应的视图层级。虽然也是两层ImageView，一张加载黑白图片，一张加载彩色图片，但是这种视图结构和上面的是不一样的。彩色图片看不见的部分并不是透明的，而是被中间一块小的View所遮挡了，用户看到的就是为遮挡的部分，也就是小的View所在的区域。

从下方的视图层级中我们不难看出，先贴一张黑白照，然后贴一个小的MaskView，在这个小的MaskView上在贴一张彩照，小MaskView的外的区域的彩照是看不见的。关键还在于，彩照的绝对坐标要与黑白照的绝对坐标完全重合，为了达到这个效果我们就采用了AutoLayout来实现的。下方会给出核心的实现代码。

　　

看完效果和视图层级后，接下来来看一下核心代码的实现，还是那句话核心代码就是AutoLayout的应用。下方代码就是上述效果的核心部分。colorImageView也就是我们的彩色图片是加在小的MaskView上的，也就是上面我们选中的View，不过其约束是添加在整个视图控制器的self.view上的。黑白照的约束也是self.view, 这样，彩照和黑白照就会重合。虽然彩照是在小的MaskView上，但是其约束是添加在self.view上的。所以你移动MaskView时，彩照的位置是不会随MaskView的位置改变而改变的。所以你就尽管在TouchesMoved事件中尽情的修改MaskView的坐标即可。

　　

 

三、给Label添加Mask

接下我们将之前的视错觉的Demo进行重写，当然我们此处使用的是Swift语言，并使用mask来进行实现。

　　

上图就是我们为我们的Label添加的Mask，添加后，文字就会出现渐变的效果。当然原理是一样的。下方就是上述效果的视图层级。也是两层不同的文字，通过mask来显示指定区域。当然上面的Hello World是讲Mask添加在了Lable上了，而下方的效果是讲Mask添加在了上层视图上，上层视图的背景色是红色，上层视图上贴了一些列的白色Label，当然显示的只是mask区域内的东西了。

　　

接下来来看上述效果的核心代码。下方代码就是为我们上层红色的Hello World添加蒙版，并给蒙版添加一个弧度，所以你看起来的蒙版效果是椭圆形的。而第二种效果是讲蒙版添加在了上层的View上，与下方代码类似，在此就不做过多赘述了，相关代码会在Github上进行分享。本篇博客后附有github分享链接。

　　

 

四、上述效果实战

在项目开发中上述的这种渐变的效果是经常使用到的，接下来就使用上述效果来进行实战一下。下方这个效果就是利用上述效果写的一个标签栏的切换，在切换时，效果是渐变的。并且与下方的ScrollView是联动的。下方这种形式是比较常见的。

　　

接下来我们来看一下上述效果的视图层级。从下方视图层级中我们不难看出上面用的就是我们第三部分所封装的组件，而下方是一个ScrollView上贴了三个View。无论上面有多少个Tab标签，下方的View会进行复用的。下方类似于我们之前所发布的幻灯片轮播图的效果。原理请参加《iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)》这篇博客，原理在此就不做过多的赘述了。

　　

 

通过本篇博客想必你还是有所收获的，今天博客就先到这。上述所有代码在Github上的分享地址为：https://github.com/lizelu/MaskLayerDemo