自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;
}
运行结果如下: