作者：青玉伏案 原文地址
之前發(fā)表過一篇關(guān)于視錯(cuò)覺的文章：《視錯(cuò)覺：從一個(gè)看似簡單的自定義控件說起》艾凯，雖然不是用iOS開發(fā)中的Mask來實(shí)現(xiàn)的，但是原理和Mask原理是一樣的煮寡，相當(dāng)于手動(dòng)給上面一層加了個(gè)Mask虹蓄。當(dāng)然用mask完全可以實(shí)現(xiàn)上篇博客中的效果，無論是使用Mask還是不使用Mask幸撕，都是利用了視錯(cuò)覺薇组，都是兩層不一樣的視圖進(jìn)行疊加而成的。今天這篇博客是視錯(cuò)覺Demo的升級(jí)版坐儿，上篇博客發(fā)表后律胀，好多小伙伴說使用Mask實(shí)現(xiàn)會(huì)更容易，其實(shí)使用Mask和之前的原理是一樣的貌矿。今天我們這篇博客就使用Mask來實(shí)現(xiàn)視錯(cuò)覺的效果炭菌，并給出不使用Mask的解決方案。當(dāng)然今天博客中的內(nèi)容較多逛漫。
一黑低、一些視錯(cuò)覺經(jīng)典圖片
在博客的第一部分呢，先放松一下尽楔，看一些視錯(cuò)覺的經(jīng)典圖片投储，當(dāng)然下方圖片來源于網(wǎng)絡(luò)。還是那句話阔馋，你的眼睛有時(shí)候會(huì)欺騙你的玛荞，你看到的不一定是你看到的。
1.右下方的人和后方的人大小是一樣的呕寝，第一眼我還不信勋眯，拿著尺子量了一下，結(jié)果是毋庸置疑的下梢。
2.下方兩個(gè)豎直黑線真的是平行的
3.中間那個(gè)框客蹋，真的是正方形的
就先放這三張視錯(cuò)覺圖片當(dāng)開胃菜吧，比較我們今天的主題還是iOS開發(fā)孽江，還是代碼讶坯。說實(shí)話，看這種視錯(cuò)覺圖片老感覺不舒服呢岗屏，越想越別扭辆琅。OK, 第一部分的開胃菜到此為止，更多視錯(cuò)覺圖片請(qǐng)自行Google这刷。
二婉烟、利用視錯(cuò)覺實(shí)現(xiàn)圖片蒙版
本部分我要實(shí)現(xiàn)常見的圖片蒙版，就是你看上去同一張圖片不同的區(qū)域會(huì)有不同的顏色暇屋。這種效果我們經(jīng)乘圃看到，就是一個(gè)圖片有部分區(qū)域是彩色的而其他部分則是黑白的咐刨。本部分我們先使用Mask來實(shí)現(xiàn)這個(gè)效果昙衅，然后使用自定義蒙版在實(shí)現(xiàn)一次。好進(jìn)入今天的第一個(gè)主題定鸟。
1.在ImageView上使用Mask
開門見山绒尊，下方這個(gè)效果就是我們接下來要實(shí)現(xiàn)的效果。圓框區(qū)域中顯示的圖片是彩色的仔粥，圓框外是黑白的婴谱。我們可以通過手指移動(dòng)來變化彩色的區(qū)域。下方就是我們要實(shí)現(xiàn)的最終效果躯泰。
還是那句話谭羔，你看到的不一定是你看到的。上面的效果麦向，給你的第一感覺是只用一張圖片瘟裸，然后渲染圓框區(qū)域內(nèi)的部分即可。當(dāng)然說到這诵竭，你就能猜到话告，上面是使用的兩張圖片來實(shí)現(xiàn)的兼搏，也就是兩層。這種原理與上篇視錯(cuò)覺的博客中的原理一致沙郭。下方截圖就是上述效果的層級(jí)截圖佛呻。本質(zhì)上使用的是兩張圖片，下面是一個(gè)黑白圖片病线，上面是一個(gè)彩色圖片吓著。只不過我們給彩色圖片添加了一個(gè)圓形的mask。在這兒簡單的提一下mask吧送挑，其實(shí)mask就是給上面的ImageView添加了一個(gè)層绑莺，然后設(shè)置一塊區(qū)域，mask區(qū)域內(nèi)是可見的, 而mask區(qū)域外是不透明的惕耕。所以就會(huì)形成上方的效果纺裁。
實(shí)現(xiàn)上述效果是比較簡單的，下方就是上述效果的核心代碼司澎。關(guān)鍵還是給上面的ImageView添加Mask对扶。下方代碼就是給上方彩色的ImageView添加mask, 然后在touchesMoved事件中隨著手指的移動(dòng)來改變mask的位置即可。至此上述這個(gè)效果就使用mask實(shí)現(xiàn)完畢了惭缰。
2.自定義蒙版
我們不使用系統(tǒng)自帶的Mask也能實(shí)現(xiàn)上述效果浪南，而且實(shí)現(xiàn)起來并麻煩。該部分的核心主要是利用AutoLayout來實(shí)現(xiàn)上述效果漱受。下方是我們使用AutoLayout來實(shí)現(xiàn)的上述效果络凿，在下方的效果中，并沒有用到上述的Mask昂羡，不過也是手動(dòng)加了一層蒙版絮记。下方就是我們沒有使用mask的最終效果。效果還是和上方差不多少的虐先。
接下來我們來看上面這個(gè)效果的視圖層級(jí)怨愤，這種實(shí)現(xiàn)方式的視圖層級(jí)與第一部分的視圖層級(jí)稍微不同。下方就是該部分效果所對(duì)應(yīng)的視圖層級(jí)蛹批。雖然也是兩層ImageView撰洗，一張加載黑白圖片，一張加載彩色圖片腐芍，但是這種視圖結(jié)構(gòu)和上面的是不一樣的差导。彩色圖片看不見的部分并不是透明的，而是被中間一塊小的View所遮擋了猪勇，用戶看到的就是為遮擋的部分设褐，也就是小的View所在的區(qū)域。
從下方的視圖層級(jí)中我們不難看出，先貼一張黑白照助析，然后貼一個(gè)小的MaskView犀被，在這個(gè)小的MaskView上在貼一張彩照，小MaskView的外的區(qū)域的彩照是看不見的外冀。關(guān)鍵還在于寡键，彩照的絕對(duì)坐標(biāo)要與黑白照的絕對(duì)坐標(biāo)完全重合，為了達(dá)到這個(gè)效果我們就采用了AutoLayout來實(shí)現(xiàn)的锥惋。下方會(huì)給出核心的實(shí)現(xiàn)代碼昌腰。
看完效果和視圖層級(jí)后开伏，接下來來看一下核心代碼的實(shí)現(xiàn)膀跌，還是那句話核心代碼就是AutoLayout的應(yīng)用。下方代碼就是上述效果的核心部分固灵。colorImageView也就是我們的彩色圖片是加在小的MaskView上的捅伤，也就是上面我們選中的View，不過其約束是添加在整個(gè)視圖控制器的self.view上的巫玻。黑白照的約束也是self.view, 這樣丛忆，彩照和黑白照就會(huì)重合。雖然彩照是在小的MaskView上仍秤，但是其約束是添加在self.view上的熄诡。所以你移動(dòng)MaskView時(shí)，彩照的位置是不會(huì)隨MaskView的位置改變而改變的诗力。所以你就盡管在TouchesMoved事件中盡情的修改MaskView的坐標(biāo)即可凰浮。
三、給Label添加Mask
接下我們將之前的視錯(cuò)覺的Demo進(jìn)行重寫苇本，當(dāng)然我們此處使用的是Swift語言袜茧，并使用mask來進(jìn)行實(shí)現(xiàn)。
上圖就是我們?yōu)槲覀兊腖abel添加的Mask瓣窄，添加后笛厦，文字就會(huì)出現(xiàn)漸變的效果。當(dāng)然原理是一樣的俺夕。下方就是上述效果的視圖層級(jí)裳凸。也是兩層不同的文字，通過mask來顯示指定區(qū)域劝贸。當(dāng)然上面的Hello World是講Mask添加在了Lable上了登舞，而下方的效果是講Mask添加在了上層視圖上，上層視圖的背景色是紅色悬荣，上層視圖上貼了一些列的白色Label菠秒，當(dāng)然顯示的只是mask區(qū)域內(nèi)的東西了。
接下來來看上述效果的核心代碼。下方代碼就是為我們上層紅色的Hello World添加蒙版践叠，并給蒙版添加一個(gè)弧度言缤，所以你看起來的蒙版效果是橢圓形的。而第二種效果是講蒙版添加在了上層的View上禁灼，與下方代碼類似管挟，在此就不做過多贅述了，相關(guān)代碼會(huì)在Github上進(jìn)行分享弄捕。本篇博客后附有g(shù)ithub分享鏈接僻孝。
四、上述效果實(shí)戰(zhàn)
在項(xiàng)目開發(fā)中上述的這種漸變的效果是經(jīng)常使用到的守谓，接下來就使用上述效果來進(jìn)行實(shí)戰(zhàn)一下穿铆。下方這個(gè)效果就是利用上述效果寫的一個(gè)標(biāo)簽欄的切換，在切換時(shí)斋荞，效果是漸變的荞雏。并且與下方的ScrollView是聯(lián)動(dòng)的。下方這種形式是比較常見的平酿。
接下來我們來看一下上述效果的視圖層級(jí)凤优。從下方視圖層級(jí)中我們不難看出上面用的就是我們第三部分所封裝的組件，而下方是一個(gè)ScrollView上貼了三個(gè)View蜈彼。無論上面有多少個(gè)Tab標(biāo)簽筑辨，下方的View會(huì)進(jìn)行復(fù)用的。下方類似于我們之前所發(fā)布的幻燈片輪播圖的效果幸逆。原理請(qǐng)參加《iOS開發(fā)之三個(gè)Button實(shí)現(xiàn)圖片無限輪播(參考手機(jī)淘寶棍辕，Swift版)》這篇博客，原理在此就不做過多的贅述了秉颗。
通過本篇博客想必你還是有所收獲的痢毒，今天博客就先到這。上述所有代碼在Github上的分享地址為：https://github.com/lizelu/MaskLayerDemo
