如何实现模糊(毛玻璃)效果

模糊效果,也叫作毛玻璃效果,是设计上挺常用的,尤其是在 iOS 7 之后。

静态的模糊效果自不用说了,直接在 Photoshop 里做好图片就行了。那动态的实时的模糊效果又是怎么做出来的呢?今天我们就来总结一下在 iOS 上的实现动态模糊(毛玻璃)效果的几种方法。

一、对 UIView 进行模糊

iOS 8 增加了 UIVisualEffectView,让我们可以很方便的做出模糊(毛玻璃)效果。

有两点需要注意的:

1、UIVisualEffectView 是个 view,不是方法

刚开始接触的时候,想当然的就以为,有个叫 UIVisualEffect 的方法,例如 UIVisualEffect(myView),就把 myView 给模糊了。这样理解是不对的。UIVisualEffectView 是一个 view,他不是一个方法。你得把UIVisualEffectView 盖在需要某个 view 的上面,他才会帮你把他罩着的小弟都给模糊掉。

如果你熟悉 Photoshop 的话,可以这么理解:程序员说的 View(视图),就是设计师说的 Layer(图层)。UIVisualEffectView 就是个 Adjustment Layer(调节图层),不是 Layer Style(图层样式)。你要对某个 view 进行模糊,就在他上面放一个 UIVisualEffectView 就行了。

2、UIBlurEffect vs UIVibrancyEffect

UIVisualEffectView 包含两种特效,一种叫 UIBlurEffect,一种叫 UIVibrancyEffect。他们都是用来模糊的,区别在于 UIBlurEffect 不会对自身这层进行模糊,UIVibrancyEffect 除了模糊,还会透出一点下面内容的颜色,显得更加艳丽。(见下图)

UIBlurEffect vs UIVibrancyEffect

3、Object-C 的写法

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurView.frame = myView.bounds;
    [myView addSubview:blurView];

UIBlurEffect有三个参数:

  • UIBlurEffectStyleExtraLight 特别亮
  • UIBlurEffectStyleLight 有点亮
  • UIBlurEffectStyleDark 有点黑

4、Swift 的写法

    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
    let blurView = UIVisualEffectView(effect: blurEffect)
    blurView.frame = myView.bounds
    myView.addSubview(blurView)

UIBlurEffect有三个参数:

  • ExtraLight 特别亮
  • Light 有点亮
  • Dark 有点黑

5、调节模糊半径?

Photoshop 里常用的 Gaussian Blur(高斯模糊,别一不小心写成「搞死模糊」了)有个叫 Radius 的参数,是用来调节模糊半径的,数值越大就越模糊,数值越小就越清晰,UIVisualEffectView 能不能调节模糊半径呢?答案是:没门儿!

网上搜到有人给的方法,就是调节 UIVisualEffectView 的透明度(alpha),透明度低了,模糊效果就没那么明显啦,是不是很机智啊?我去!这馊主意。相信我,这不是设计师能接受的效果。

二、对 UIImage 进行模糊

如果实在想调节模糊半径怎么办?如果要兼容 iOS7,用不了 UIVisualEffectView 怎么办?办法肯定是有的,就是用 CIFilter 滤镜对 UIImage 进行模糊。

用 UIVisualEffectView 和 CIFilter 有什么不同呢?以Photoshop举例,UIVisualEffectView 就好比 Adjustment Layer(调节图层),是对图层进行操作。CIFilter 就像 Gaussian Blur(高斯模糊),是对图片直接进行处理。

Object-C 的写法

-(UIImage *)convertToBlurImage:(UIImage *)image{
    CIFilter *gaussianBlurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [gaussianBlurFilter setDefaults];
    CIImage *inputImage = [CIImage imageWithCGImage:[image CGImage]];
    [gaussianBlurFilter setValue:inputImage forKey:kCIInputImageKey];
    [gaussianBlurFilter setValue:@5 forKey:kCIInputRadiusKey];
    CIImage *outputImage = [gaussianBlurFilter outputImage];
    CIContext *context   = [CIContext contextWithOptions:nil];
    CGImageRef cgimg     = [context createCGImage:outputImage fromRect:[inputImage extent]];  // note, use input image extent if you want it the same size, the output image extent is larger
    UIImage *convertedImage = [UIImage imageWithCGImage:cgimg];
    return convertedImage;
}

其中 [gaussianBlurFilter setValue:@5 forKey:kCIInputRadiusKey]; 就是用来设置模糊半径的。

p.s. Swift的代码没有亲测,就不贴出来了。

三、其他第三方库

除了自己苦哈哈的写代码,也可以用第三方库。GitHub 上有丰富的资源,举个例子:

JTSImageViewController 是个开源的Object-C项目,这个项目不是专门做模糊的,人家的追求是做 iOS 里的 Light Box,也就是当用户点击某个图片,这个图片就放大,原来的页面就变黑变模糊作为背景。

其中有一个方法,一看就是居家旅行做模糊效果的必备良药啊:

- (UIImage *)JTS_applyBlurWithRadius:(CGFloat)blurRadius
                           tintColor:(UIColor *)tintColor
               saturationDeltaFactor:(CGFloat)saturationDeltaFactor
                           maskImage:(UIImage *)maskImage;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容