iOS自带实现高斯模糊效果

作者: Cloudox_ | 来源:发表于2017-11-27 10:58 被阅读6次

什么叫高斯模糊效果,通俗地说,就是毛玻璃效果,从iOS 7以来,就频繁地被设计使用,如果用得好,效果会显得非常的好。我们来看一个例子:

image.png

图中下面一小部分就是高斯模糊效果。要实现也很简单,iOS自身就支持这种效果。

iOS 7 UIToolbar

iOS 7开始,支持用UIToolbar来实现这种效果,代码很简单:

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    imageView.image = [UIImage imageNamed:@"neo.jpeg"];
    [self.view addSubview:imageView];
    
    /* UIBarStyle枚举:
     UIBarStyleDefault
     UIBarStyleBlack
     UIBarStyleBlackOpaque
     UIBarStyleBlackTranslucent
     */
    UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, imageView.frame.size.height * 0.7, imageView.frame.size.width, imageView.frame.size.height * 0.3)];
    toolbar.barStyle = UIBarStyleBlackTranslucent;
    [self.view addSubview:toolbar];

这个style实现出来就是这个效果:

image.png

事实上除了UIBarStyleDefault风格是白亮的模糊不太好看外,其他三种风格我都看不出有什么差别。

我们可以看一下UI层级:

image.png

事实上就是在原本的图片视图上加了一层UIVisualEffectView,等于是覆盖了一块毛玻璃,很好理解,也很好用。

iOS 8 UIBlurEffect

从iOS 8开始,苹果开始支持一个新的实现方式——UIBlurEffect,苹果也推荐这种方式,当然如果你的应用要支持iOS 7,那还是用上一种。

这种方式的代码一样很简单,在代码中就直接用到了我们上面层级中看到的UIVisualEffectView,代码如下:

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    imageView.image = [UIImage imageNamed:@"neo.jpeg"];
    [self.view addSubview:imageView];
    
    /* UIBlurEffectStyle枚举
     UIBlurEffectStyleRegular
     UIBlurEffectStyleLight
     UIBlurEffectStyleDark
     UIBlurEffectStyleProminent
     UIBlurEffectStyleExtraLight
    */
    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.frame = CGRectMake(0, imageView.frame.size.height * 0.7, imageView.frame.size.width, imageView.frame.size.height * 0.3);
    [self.view addSubview:effectView];

确实这种方式的效果更加自然:

image.png

再看一下UI层级:

image.png

对比一下两种实现方式,其实是不一样的,感兴趣的可以研究一下原理。

我们把风格换成UIBlurEffectStyleDark后是这样的:

image.png

和UIToolbar的实现效果相比的话,要说没区别也有一点区别,总之就是觉得好看一些,所以还是推荐用这种方式。

不得不说毛玻璃(高斯模糊)效果配上好图片后的效果真的很赞,我可以玩很久,其实实现方式真的很简单,大家可以多多应用到自己的应用中去,相信一定会加分不少!


查看作者首页

实例工程:https://github.com/Cloudox/OXBlurDemo
参考:http://www.cnblogs.com/arvin-sir/p/5131358.html?utm_source=tuicool&utm_medium=referral

相关文章

  • iOS自带实现高斯模糊效果

    引 什么叫高斯模糊效果,通俗地说,就是毛玻璃效果,从iOS 7以来,就频繁地被设计使用,如果用得好,效果会显得非常...

  • 高斯模糊

    高斯模糊 【iOS 开发】实现毛玻璃(高斯模糊)效果 - CocoaChina_让移动开发更简单

  • ios高斯模糊背景

    ios自带高斯模糊涂层控件,类似一个view。放上去就可以实现背景高斯模糊。特别是对于需要高斯模糊的区域有动态刷新...

  • iOS的毛玻璃效果

    简要说明 毛玻璃(高斯模糊)效果是iOS开发中经常使用到的一个实现模糊效果的技能,实现这个效果有三种方法: 在iO...

  • ios 毛玻璃效果(高斯模糊)

    // ios 毛玻璃效果(高斯模糊) UIImageView *bgImg = [[UIImageView al...

  • Android 网易云音乐图片高斯模糊

    Android 背景图流行使用高斯模糊效果,界面效果会比较好看。分析各种实现方式,实现网易云音乐图片加载高斯模糊背...

  • 图片高斯模糊效果

    iOS开发的时候有的时候需要将图片设置模糊,或者通过点击下拉方法,去除模糊。关于图片实现高斯模糊效果有三种方式,C...

  • iOS 高斯模糊和头像放大

    很多项目中都会用到高斯模糊(毛玻璃效果)以及头像放大,类似下面的效果: 1、首先解决高斯模糊:iOS系统已经提供了...

  • iOS-实现高斯模糊效果(swift)

    给UIImage添加分类

  • Android 中实现毛玻璃效果

    - 关于高斯模糊效果的实现 public class BitmapLoader { priva...

网友评论

    本文标题:iOS自带实现高斯模糊效果

    本文链接:https://www.haomeiwen.com/subject/svmrbxtx.html