圖片發(fā)自簡書App
估計你很熟悉這個Demo浮声，就是 apple官網(wǎng)的motion effect 魄健。這里有一個毛玻璃效果赋铝，怎么制作的呢？
一開始我以為是代碼控制的沽瘦，結(jié)果不是革骨！僅僅是圖片而已。接著我想圖片的話析恋，這個毛玻璃的效果正好像蓋了塊玻璃一樣良哲，怎么保證中間的毛玻璃圖片和背景圖片的相對位置總是固定的呢？否則毛玻璃圖片和原圖就會錯位了助隧≈欤看起來很奇怪。
同時要在PS上裁圖并村，裁取中間的一部分圖片巍实，然后毛玻璃效果處理之。這個是我猜測的哩牍，可能不是這樣棚潦，可能用其它工具來毛玻璃化。
結(jié)果我又吃驚了膝昆。保持相對位置固定最好的方法是什么丸边？讓他們擁有一樣的位置和大小荚孵！這里有兩張圖片妹窖，一個是原始背景圖，一個是毛玻璃圖收叶，他們擁有一樣的大小骄呼。然后對于毛玻璃的圖片，把它放置在一個view下面滔驾，讓這個view clipsToBounds為true。所以就會把毛玻璃伸出這個view的部分裁剪掉所以俄讹。這樣就行了哆致！
這樣有個圓角設(shè)置一下cornerRadius即可。
因為原圖和毛玻璃圖有一樣的位置和大小患膛，所以無論屏幕大小怎樣摊阀，它們的伸縮方式是一樣的，所以毛玻璃的效果就出來了，好像一塊玻璃蓋著胞此。而且這樣PS處理很方便臣咖，直接將整張圖片模糊即可，都不用裁剪漱牵。
這個效果可以怎用啦夺蛇，可以用在關(guān)于或協(xié)議頁面或者登錄頁面，你看著這樣的是不是愉快咧酣胀，同時可以用在聊天背景圖也不錯啊刁赦。感覺很夢幻。
