之前發表過一篇關於視錯覺的文章：《》，雖然不是用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

實現上述效果是比較簡單的，下方就是上述效果的核心程式碼。關鍵還是給上面的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會進行復用的。下方類似於我們之前所釋出的幻燈片輪播圖的效果。原理請參加《》這篇部落格，原理在此就不做過多的贅述了。