視錯(cuò)覺升級(jí)版:多個(gè)視錯(cuò)覺效果實(shí)現(xiàn)

作者:青玉伏案 原文地址

之前發(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蚕甥,一起剝皮案震驚了整個(gè)濱河市哪替,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌菇怀,老刑警劉巖凭舶,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異爱沟,居然都是意外死亡帅霜,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門呼伸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來身冀,“玉大人钝尸,你說我怎么就攤上這事÷Ц” “怎么了珍促?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長剩愧。 經(jīng)常有香客問我猪叙,道長,這世上最難降的妖魔是什么仁卷? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任穴翩,我火速辦了婚禮,結(jié)果婚禮上锦积,老公的妹妹穿的比我還像新娘芒帕。我一直安慰自己,他們只是感情好充包,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布副签。 她就那樣靜靜地躺著遥椿,像睡著了一般基矮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上冠场,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天家浇,我揣著相機(jī)與錄音,去河邊找鬼碴裙。 笑死钢悲,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的舔株。 我是一名探鬼主播莺琳,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼载慈!你這毒婦竟也來了惭等?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤办铡,失蹤者是張志新(化名)和其女友劉穎辞做,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寡具,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秤茅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了童叠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片框喳。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出五垮,到底是詐尸還是另有隱情撰豺,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布拼余,位于F島的核電站污桦,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏匙监。R本人自食惡果不足惜凡橱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望亭姥。 院中可真熱鬧稼钩,春花似錦、人聲如沸达罗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽粮揉。三九已至巡李,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扶认,已是汗流浹背侨拦。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留辐宾,地道東北人狱从。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像叠纹,于是被迫代替她去往敵國和親季研。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容