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

图片发自简书App

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

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,229评论 4 61
  • “宫歆凝!”一声怒吼把正在吃饭的宫歆凝吓的直呛。宫玉急忙递水心疼的拍拍瘦小的背,帮宫歆凝顺气。 看着宫歆凝...
    诺诺不吃糖阅读 173评论 0 1
  • 表姐之前推荐电影《我是卡拉姆》,网上一直没资源,今天终于看到了优酷的资源,虽然没有中文字幕,但配着英文字幕和国语看...
    haapy等雪阅读 335评论 0 0