圖片發(fā)自簡書App

估計(jì)你很熟悉這個(gè)Demo，就是 apple官網(wǎng)的motion effect 。這里有一個(gè)毛玻璃效果，怎么制作的呢？

一開始我以為是代碼控制的，結(jié)果不是！僅僅是圖片而已。接著我想圖片的話，這個(gè)毛玻璃的效果正好像蓋了塊玻璃一樣，怎么保證中間的毛玻璃圖片和背景圖片的相對位置總是固定的呢？否則毛玻璃圖片和原圖就會錯(cuò)位了。看起來很奇怪。

同時(shí)要在PS上裁圖，裁取中間的一部分圖片，然后毛玻璃效果處理之。這個(gè)是我猜測的，可能不是這樣，可能用其它工具來毛玻璃化。

結(jié)果我又吃驚了。保持相對位置固定最好的方法是什么？讓他們擁有一樣的位置和大??！這里有兩張圖片，一個(gè)是原始背景圖，一個(gè)是毛玻璃圖，他們擁有一樣的大小。然后對于毛玻璃的圖片，把它放置在一個(gè)view下面，讓這個(gè)view clipsToBounds為true。所以就會把毛玻璃伸出這個(gè)view的部分裁剪掉所以。這樣就行了！

這樣有個(gè)圓角設(shè)置一下cornerRadius即可。

因?yàn)樵瓐D和毛玻璃圖有一樣的位置和大小，所以無論屏幕大小怎樣，它們的伸縮方式是一樣的，所以毛玻璃的效果就出來了，好像一塊玻璃蓋著。而且這樣PS處理很方便，直接將整張圖片模糊即可，都不用裁剪。

這個(gè)效果可以怎用啦，可以用在關(guān)于或協(xié)議頁面或者登錄頁面，你看著這樣的是不是愉快咧，同時(shí)可以用在聊天背景圖也不錯(cuò)啊。感覺很夢幻。