iOS毛玻璃效果制作方法之一

图片发自App

估计你很熟悉这个Demo，就是 apple官网的motion effect 。这里有一个毛玻璃效果，怎么制作的呢？

一开始我以为是代码控制的，结果不是！仅仅是图片而已。接着我想图片的话，这个毛玻璃的效果正好像盖了块玻璃一样，怎么保证中间的毛玻璃图片和背景图片的相对位置总是固定的呢？否则毛玻璃图片和原图就会错位了。看起来很奇怪。

同时要在PS上裁图，裁取中间的一部分图片，然后毛玻璃效果处理之。这个是我猜测的，可能不是这样，可能用其它工具来毛玻璃化。

结果我又吃惊了。保持相对位置固定最好的方法是什么？让他们拥有一样的位置和大小！这里有两张图片，一个是原始背景图，一个是毛玻璃图，他们拥有一样的大小。然后对于毛玻璃的图片，把它放置在一个view下面，让这个view clipsToBounds为true。所以就会把毛玻璃伸出这个view的部分裁剪掉所以。这样就行了！

这样有个圆角设置一下cornerRadius即可。

因为原图和毛玻璃图有一样的位置和大小，所以无论屏幕大小怎样，它们的伸缩方式是一样的，所以毛玻璃的效果就出来了，好像一块玻璃盖着。而且这样PS处理很方便，直接将整张图片模糊即可，都不用裁剪。

这个效果可以怎用啦，可以用在关于或协议页面或者登录页面，你看着这样的是不是愉快咧，同时可以用在聊天背景图也不错啊。感觉很梦幻。