【不求甚解之UI篇】毛玻璃效果

自iOS7以来,苹果抛弃了拟物化的设计风格,转而大胆地采用扁平化风格,并且加入了人们日常喜爱的元素,其中让人眼前一亮的就是毛玻璃风格。于是包括小米、三星等在内的各大手机厂商开始跟风。下面请大家欣赏一下QQ空间所采用的毛玻璃效果:

随着手指的滑动,毛玻璃的模糊度也在变化。那么毛玻璃效果到底怎么实现呢？实际上,这种效果是把图片上每一个像素做了“模糊”化算法（高斯“模糊”算法）得到的新图像。

iOS8之前我们采用的 "UIImage+ImageEffects.h"的类别方法。是将Image模糊处理后获得一个新的Image。

方法如下:

- (UIImage *)applyLightEffect;
- (UIImage *)applyExtraLightEffect;
- (UIImage *)applyDarkEffect;
- (UIImage *)applyTintEffectWithColor:(UIColor *)tintColor;

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

Demo中主要代码如下:

  //_blurStyle 代表风格
    //_defaultImage 是我们想要处理的图片
    //_value 模糊度
    //_arcColor 随机生成的颜色
    switch (_blurStyle) {
        case BlurStyleNone://原图
            _imgView.image=_defaultImage;
            break;
        case BlurStyleLight://透白风
            _imgView.image=[_defaultImage applyLightEffect];
            break;
        case BlurStyleExtraLight://亮白风
            _imgView.image=[_defaultImage applyExtraLightEffect];
            break;
        case BlurStyleDark://黑暗风
            _imgView.image=[_defaultImage applyDarkEffect];
            break;
        case BlurStyleTintEffect://自定义颜色
            _imgView.image= [_defaultImage applyTintEffectWithColor:_arcColor];
            break;
        case BlurStyleCustom://自定义颜色和模糊度
            _imgView.image=[_defaultImage applyBlurWithRadius:_value tintColor:_arcColor  saturationDeltaFactor:1.8 maskImage:nil];
            break;
        default:
            break;
    }

运行结果如下: