視錯覺升級版：多個視錯覺效果實現

以前發表過一篇關於視錯覺的文章：《視錯覺：從一個看似簡單的自定義控件提及》，雖然不是用iOS開發中的Mask來實現的，可是原理和Mask原理是同樣的，至關於手動給上面一層加了個Mask。固然用mask徹底能夠實現上篇博客中的效果，不管是使用Mask仍是不使用Mask，都是利用了視錯覺，都是兩層不同的視圖進行疊加而成的。今天這篇博客是視錯覺Demo的升級版，上篇博客發表後，好多小夥伴說使用Mask實現會更容易，其實使用Mask和以前的原理是同樣的。今天咱們這篇博客就使用Mask來實現視錯覺的效果，並給出不使用Mask的解決方案。固然今天博客中的內容較多。

1、一些視錯覺經典圖片

在博客的第一部分呢，先放鬆一下，看一些視錯覺的經典圖片，固然下方圖片來源於網絡。仍是那句話，你的眼睛有時候會欺騙你的，你看到的不必定是你看到的。

1.右下方的人和後方的人大小是同樣的，第一眼我還不信，拿着尺子量了一下，結果是毋庸置疑的。

　　

 

2.下方兩個豎直黑線真的是平行的

　　

 

3.中間那個框，真的是正方形的

　　

就先放這三張視錯覺圖片當開胃菜吧，比較咱們今天的主題仍是iOS開發，仍是代碼。說實話，看這種視錯覺圖片老感受不舒服呢，越想越彆扭。OK, 第一部分的開胃菜到此爲止，更多視錯覺圖片請自行Google。

 

2、利用視錯覺實現圖片蒙版

本部分我要實現常見的圖片蒙版，就是你看上去同一張圖片不一樣的區域會有不一樣的顏色。這種效果咱們常常看到，就是一個圖片有部分區域是彩色的而其餘部分則是黑白的。本部分咱們先使用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的座標便可。

　　

 

3、給Label添加Mask

接下咱們將以前的視錯覺的Demo進行重寫，固然咱們此處使用的是Swift語言，並使用mask來進行實現。

　　

上圖就是咱們爲咱們的Label添加的Mask，添加後，文字就會出現漸變的效果。固然原理是同樣的。下方就是上述效果的視圖層級。也是兩層不一樣的文字，經過mask來顯示指定區域。固然上面的Hello World是講Mask添加在了Lable上了，而下方的效果是講Mask添加在了上層視圖上，上層視圖的背景色是紅色，上層視圖上貼了一些列的白色Label，固然顯示的只是mask區域內的東西了。

　　

接下來來看上述效果的核心代碼。下方代碼就是爲咱們上層紅色的Hello World添加蒙版，並給蒙版添加一個弧度，因此你看起來的蒙版效果是橢圓形的。而第二種效果是講蒙版添加在了上層的View上，與下方代碼相似，在此就不作過多贅述了，相關代碼會在Github上進行分享。本篇博客後附有github分享連接。

　　

 

4、上述效果實戰

在項目開發中上述的這種漸變的效果是常用到的，接下來就使用上述效果來進行實戰一下。下方這個效果就是利用上述效果寫的一個標籤欄的切換，在切換時，效果是漸變的。而且與下方的ScrollView是聯動的。下方這種形式是比較常見的。

　　

接下來咱們來看一下上述效果的視圖層級。從下方視圖層級中咱們不難看出上面用的就是咱們第三部分所封裝的組件，而下方是一個ScrollView上貼了三個View。不管上面有多少個Tab標籤，下方的View會進行復用的。下方相似於咱們以前所發佈的幻燈片輪播圖的效果。原理請參加《iOS開發之三個Button實現圖片無限輪播(參考手機淘寶，Swift版)》這篇博客，原理在此就不作過多的贅述了。

　　

 

經過本篇博客想必你仍是有所收穫的，今天博客就先到這。上述全部代碼在Github上的分享地址爲：https://github.com/lizelu/MaskLayerDemo