【不求甚解之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;}

运行结果如下:

其中最后一张，添加了UIStepper用来控制模糊度.模糊度为0,不模糊。模糊度越大,越模糊。

然而，这种处理方法不免在有些时候显得“不够用",或者说如果想要达到某种动态的毛玻璃效果,这种解决方案不说效率不高,好像不是在你的眼前放了一块毛玻璃,而是给你了一张PS过得图来”糊弄“你。

iOS8,苹果便加入了UIVisualEffectView类,这个类就相当于一块毛玻璃,你可以将它放在你想放的任何视图上。

下面是该类中提供的方法:

typedef NS_ENUM(NSInteger, UIBlurEffectStyle) {UIBlurEffectStyleExtraLight,UIBlurEffectStyleLight,UIBlurEffectStyleDark
} NS_ENUM_AVAILABLE_IOS(8_0);NS_CLASS_AVAILABLE_IOS(8_0) @interface UIVisualEffect : NSObject <NSCopying, NSSecureCoding> @end/* UIBlurEffect will provide a blur that appears to have been applied to the content layered behind the UIVisualEffectView. Views added to the contentView of a blur visual effect are not blurred themselves. */
NS_CLASS_AVAILABLE_IOS(8_0) @interface UIBlurEffect : UIVisualEffect
+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style;
@end/* UIVibrancyEffect amplifies and adjusts the color of content layered behind the view, allowing content placed inside the contentView to become more vivid. It is intended to be placed over, or as a subview of, a UIVisualEffectView that has been configured with a UIBlurEffect. This effect only affects content added to the contentView. Because the vibrancy effect is color dependent, subviews added to the contentView need to be tintColorDidChange aware and must be prepared to update themselves accordingly. UIImageView will need its image to have a rendering mode of UIImageRenderingModeAlwaysTemplate to receive the proper effect.*/
NS_CLASS_AVAILABLE_IOS(8_0) @interface UIVibrancyEffect : UIVisualEffect
+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect;
@endNS_CLASS_AVAILABLE_IOS(8_0) @interface UIVisualEffectView : UIView <NSSecureCoding>
@property (nonatomic, retain, readonly) UIView *contentView; // Do not add subviews directly to UIVisualEffectView, use this view instead.
@property (nonatomic, copy, readonly) UIVisualEffect *effect;
- (instancetype)initWithEffect:(UIVisualEffect *)effect NS_DESIGNATED_INITIALIZER;

创建一块"毛玻璃"?

你可以在Storyboard上选取Visual Effect View With Blur拖放在你想要放到视图上即可

运行结果:

我在其中加入了UISlider来控制毛玻璃的透明度Alpha(0.0~1.0)。奇妙的效果出现了。

打开Degub->View Debugging->Capture View Hierarchy

可以清楚地看到UIVisualEffectView 这块毛玻璃的正是_UIVisualEffectFilterView

那么,在QQ空间侧边栏跟随手指划出,背景模糊度变化是如何实现的呢？

于是我也就小小的实践了一下。模仿出来QQ空间的这一动态过程。

可以将这个模糊度可以变化的"层"加在TabBarController的View上:

首先你可以在自定义的TabBarController.h文件中加入这两个属性

//背景
@property(nonatomic,retain)UIVisualEffectView * backgroundView;
//侧边栏
@property(nonatomic,retain)UIVisualEffectView * sideBar;

TabBarController.m中实现主要代码如下:

    _backgroundView=[[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];_backgroundView.frame=CGRectMake(0, 0, ScreenSize.width, ScreenSize.height);_backgroundView.alpha=0;_isShow=NO;[self.view addSubview:_backgroundView];_sideBar = [[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];_sideBar.frame=CGRectMake(-ScreenSize.width*3.0/4.0, 0, ScreenSize.width*3.0/4.0, ScreenSize.height);[self.view addSubview:_sideBar];

在touchesMoved中改变_sideBar的x坐标,_sideBar的x坐标和透明度成线性关系,不难计算出相应的透明度!

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{//只关注毛玻璃效果的改变,其他省略//详情可以去我的GitHub: <span style="color: rgb(112, 61, 170); font-family: Menlo; font-size: 11px;">https://github.com/ly918/-   </span>下载Demo float alphaValue = (_sideBar.frame.size.width+_sideBar.frame.origin.x)/_sideBar.frame.size.width;_backgroundView.alpha=alphaValue;}

运行效果如下:

我的Github地址:

https://github.com/ly918/-

欢迎纠错指正。

【不求甚解之UI篇】毛玻璃效果相关推荐

UI妹子说我用CSS实现毛玻璃效果的样子很帅
前言 UI小姐姐问我,能不能做出透明加模糊的背景,而我当然是二话不说就说可以.因为我觉得没有什么是css实现不了的.更何况我要在她面前展现得我很厉害的样子. 开发起来果不其然,在我打开蓝湖后,发现属 ...
cesium 效果篇—毛玻璃
前言项目上有个需求,需要弄一个毛玻璃效果,效果大概如下.图有点糊,见谅-思考了下怎么做,首先做到完全一模一样肯定是不太简单,毕竟咱也是新手村的菜鸟,只能按照场景的思路,一步步想了下,最后看了下sha ...
Android毛玻璃效果的实现（本文系转载一种快速毛玻璃虚化效果实现）
看到这篇文章感觉不错转载一下,且自己做了一个小demo:链接在iOS设备上我们随处可见毛玻璃效果,而且最近越来越多的场合应用到了这种美观的虚化效果,包括本人的一个开源项目BlureImageView ...
iOS开发UI篇—transframe属性（形变）
iOS开发UI篇-transframe属性(形变) 1. transform属性在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度常用的创建transform结构体方法分两 ...
android点击展开textview,《Android APP可能有的东西》之UI篇：展开TextView全文
前言就像朋友圈里面那样的点击查看全文效果,很有可能是在项目中也会遇到.这里给出不实用自定义控件的方法,原理很简单,代码量也不大,可以直接复制粘贴到自己的项目...... 上效果图我是图看起来十分 ...
iOS开发UI篇—多控制器和导航控制器简单介绍
iOS开发UI篇-多控制器和导航控制器简单介绍一.多控制器一个iOS的app很少只由一个控制器组成,除非这个app极其简单.当app中有多个控制器的时候,我们就需要对这些控制器进行管理有多个vi ...
iOS开发UI篇—UIWindow简单介绍
iOS开发UI篇-UIWindow简单介绍一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWi ...
［分享］iOS开发－UI篇：CAlayer层的属性
iOS开发UI篇-CAlayer层的属性一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property ...
iOS开发UI篇—简单介绍静态单元格的使用
iOS开发UI篇-简单介绍静态单元格的使用一.实现效果与说明说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...

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

【不求甚解之UI篇】毛玻璃效果相关推荐

最新文章

热门文章