iOS模糊效果(毛玻璃效果)的实现

摘要:
在iOS 8之后,苹果增加了三个新的类:UIBlurEffect、UIVibrancyEffect和UIVisualEffectView,这些类用于模糊背景颜色,称为“磨玻璃效果”。1.对于UIBlurEffect类,我们首先来看UIBlurEffect类。Apple文档只提供一种方法:+effectWithStyle:style;我们的实现也是如此:/***三种风格的模糊效果**@paramUIBlurEffectStyleUIBlurEffectStyleExtraLight,//额外亮度,UIBlurImpactStyleLight,//浅色风格UIBlurEffects StyleDark//深色风格**//模糊效果UIBlurEffect*blurDiffrct=[UILBlurEffectEffectWithStyle:UIBlurffectStyleLight];2.UIVibrationEffect类文档还提供了一个方法:+effectForBlurEffect:blurEffect;官方解释如下:由于振动影响是独立的,因此添加到内容视图的子视图需要保持“颜色”“更改”,并且必须准备相应地更新它们。UIImageView需要其图像始终保持UIImageRendering模式模板的原始模式,才能获得操作效果。*/UIVibrancyEffect的功能是放大和调整UIVisualEffectView内容视图的内容颜色,使UIVisualEffectView内容视图中的内容看起来更生动。

  前一段时间项目中用到毛玻璃效果,那时对UIBlurEffect类和 UIVisualEffectView这两个类做了一部分了解。但当时并没有去特别的深入研究,直到项目做完后,才静下心来好好研究了一番。记录一下。

  iOS8之后,Apple新添加UIBlurEffect类、UIVibrancyEffect类 和 UIVisualEffectView类这三种类,用途就是对背景色进行模糊化,也就是我们称的 "毛玻璃效果"。接下来就对具体的使用做一下分析吧。

  其实细看下来,Apple对这种特效封装的很好,所以我们使用起来的并不需要什么步骤。不得不佩服Apple的强大啊。

 1、关于UIBlurEffect类

我们首先看UIBlurEffect类,Apple文档中只给出了一个方法:

+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style;

我们实现也是这样:

 /**
     *   模糊效果的三种风格
     *
     *  @param UIBlurEffectStyle
     
       UIBlurEffectStyleExtraLight,//额外亮度,(高亮风格)
       UIBlurEffectStyleLight,//亮风格
       UIBlurEffectStyleDark//暗风格
     *
     */
    //实现模糊效果
    UIBlurEffect *blurEffrct =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

 2、关于UIVibrancyEffect类

文档中给出的也是一个方法:

+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect;

官方给出的解释是这样的

/* 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.

 */

翻译如下:

UIVibrancyEffect的作用是放大和调整UIVisualEffectView内容视图的内容的颜色,让UIVisualEffectView的contentView中的内容看起来更加生动。它作为一个子视图被放置在UIVisualEffectView上面,去连接UIBlurEffect。这种效果只会影响添加到UIVisualEffectView的contentView上的内容。因为活力影响是受颜色依赖的.....

 

我们可以看出:通常UIVibrancyEffect对象是与UIBlurEffect一起使用,主要用于处理在UIBlurEffect特效上的一些显示效果。

下面看看实现代码:

//实现模糊效果
    UIBlurEffect *blurEffrct =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    
    UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffrct];
    
    UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc]initWithEffect:vibrancyEffect];
   // visualEffectView.backgroundColor = [ UIColor grayColor ];

    visualEffectView.contentView.frame = CGRectMake(10, 100, 300, 500);


     [self.view addSubview:visualEffectView];

 

下面我们往 UIVisualEffectView 的contentView上添加个view看看效果

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 300, 280, 90)];
    
    label.text = @"曾经撒次考试了hhhhhhhhhhhhhhh";
    label.textAlignment = NSTextAlignmentLeft;
    label.font = [UIFont systemFontOfSize:30];
    label.tintColor = [UIColor yellowColor];
    label.numberOfLines = 0;
    [visualEffectView.contentView addSubview:label];

 

上面代码中可以看到, 我改变Label中text的颜色是使用的:tintColor ,这也是特别要注意的地方,文档中也有专门提出,并给出了解释: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. 所以我们使用 label.textColor去改变颜色是完全不起作用的。

运行效果图如下:(只剪切出效果部分)

iOS模糊效果(毛玻璃效果)的实现第1张

至于颜色不是设置的yellowColor,我想不需要多说了吧,这就是UIVibrancyEffect的功能。

3、UIVisualEffectView类

老规矩先看文档:也是寥寥的四种,其中值得一提的是:contentView。这里明确告诉我们:不要直接添加子视图去UIVisualEffectView,而是要添加到contentView上。

@property (nonatomic, strong, readonly) UIView *contentView; // Do not add subviews directly to UIVisualEffectView, use this view instead.

@property (nonatomic, copy, nullable) UIVisualEffect *effect;

- (instancetype)initWithEffect:(nullable UIVisualEffect *)effect NS_DESIGNATED_INITIALIZER;

- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder NS_DESIGNATED_INITIALIZER;

 

这里我就给出一个比较完整的代码(我们看一看UIBlurEffect类 和 UIVisualEffectView类 的效果):

    
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"6.jpg"]];
    /**
     *   模糊效果的三种风格
     *
     *  @param UIBlurEffectStyle
     
       UIBlurEffectStyleExtraLight,//额外亮度,(高亮风格)
       UIBlurEffectStyleLight,//亮风格
       UIBlurEffectStyleDark//暗风格
     *
     */
    //实现模糊效果
    UIBlurEffect *blurEffrct =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    
    //毛玻璃视图
    UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc]initWithEffect:blurEffrct];
    
    visualEffectView.frame = CGRectMake(60, 100, 300, 500);
    
    visualEffectView.alpha = 0.9;

    [self.view addSubview:visualEffectView];

 

看看效果图是不是你想要的:

iOS模糊效果(毛玻璃效果)的实现第2张

关于iOS8之前的实现,可以去github上看看一些封装库。有很多不错的三方库不错,这里就不列出了。

免责声明:文章转载自《iOS模糊效果(毛玻璃效果)的实现》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇js 和后台交互Git 分支管理最佳实践下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

jsPlumb 基本概念

jsPlumb 基本概念 一、默认属性 Anchor:锚点(连接点位置),可以设置在任何没有锚点的目标上(endPoint) Anchors:设置在connect的源和目标点的连接点位置,默认是 BottomCenter Connector:连接线(比如:["Bezier", {curviness: 63}]为贝塞尔曲线) Connec...

UIlabel 富文本

UILabel(富文本) 字数397 阅读516 评论0 喜欢3 富文本 NSString *str = @"人生若只如初见,何事秋风悲画扇。 等闲变却故人心,却道故人心易变。 骊山语罢清宵半,泪雨霖铃终不怨。 何如薄幸锦衣郎,比翼连枝当日愿。"; NSMutableAttributedString *attrStr = [[NSMutableAtt...

el-select+el-tree仿TreeSelect组件

<!--el-select+el-tree --> <template>   <el-select     ref="select"     popper-class="TREE_SELECT_POPPER"     :value="showLabel"     :size="size"     :placeholder="p...

uboot的relocation原理详细分析

转自:http://blog.csdn.net/skyflying2012/article/details/37660265 最近在一直在做uboot的移植工作,uboot中有很多值得学习的东西,之前总结过uboot的启动流程,但uboot一个非常核心的功能没有仔细研究,就是uboot的relocation功能。 这几天研究下uboot的reloca...

Jxl操作Excel设置背景、字体颜色、对齐方式、列的宽度(转)

原文出处:http://zhouhaitao.iteye.com/blog/1842769 最近项目中需要用到导出Excel文件,以下是我写了一个通过jxl操作Excel的例子,熟悉Jxl的使用。 有一个比较难以处理的问题就是自动适应文本宽度的问题。 以下我也在网上找了一下 :有如下的方式处理: CellView cellView = new CellVi...

ios 设置label的高度随着内容的变化而变化

好吧  步骤1:创建label _GeRenJianJie = [[UILabel alloc]init]; 步骤2:设置label _GeRenJianJie.textColor = RGBAColor(95, 104, 115, 1); _GeRenJianJie.numberOfLines = 0; // 需要把显示行数设置成无限制...