美文网首页
高斯模糊效果,UIVisualEffectView为视图添加特殊

高斯模糊效果,UIVisualEffectView为视图添加特殊

作者: F麦子 | 来源:发表于2021-04-14 17:24 被阅读0次

在iOS 8后,苹果开放了不少创建特效的接口,其中就包括创建毛玻璃(blur)的接口。

通常要想创建一个特殊效果(如blur效果),可以创建一个UIVisualEffectView视图对象,这个对象提供了一种简单的方式来实现复杂的视觉效果。这个可以把这个对象看作是效果的一个容器,实际的效果会影响到该视图对象底下的内容,或者是添加到该视图对象的contentView中的内容。

也就是在需要模糊的UIView上,添加一个UIVisualEffectView对象即可。

我们举个例子来看看如果使用UIVisualEffectView:

这段代码是在当前视图控制器上添加了一个UIImageView作为背景图。然后在视图的一小部分中使用了blur效果。

我们可以看到UIVisualEffectView还是非常简单的。需要注意是的,不应该直接添加子视图到UIVisualEffectView视图中,而是应该添加到UIVisualEffectView对象的contentView中。

另外,尽量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值,因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作。这不但消耗CPU/GPU,也可能会导致许多效果显示不正确或者根本不显示。

我们在上面看到,初始化一个UIVisualEffectView对象的方法是UIVisualEffectView(effect: blurEffect),其定义如下:

这个方法的参数是一个UIVisualEffect对象。我们查看官方文档,可以看到在UIKit中,定义了几个专门用来创建视觉特效的,它们分别是UIVisualEffect、UIBlurEffect和UIVibrancyEffect。它们的继承层次如下所示:

UIVisualEffect是一个继承自NSObject的创建视觉效果的基类,然而这个类除了继承自NSObject的属性和方法外,没有提供任何新的属性和方法。其主要目的是用于初始化UIVisualEffectView,在这个初始化方法中可以传入UIBlurEffect或者UIVibrancyEffect对象。

一个UIBlurEffect对象用于将blur(毛玻璃)效果应用于UIVisualEffectView视图下面的内容。如上面的示例所示。不过,这个对象的效果并不影响UIVisualEffectView对象的contentView中的内容。

UIBlurEffect主要定义了三种效果,这些效果由枚举UIBlurEffectStyle来确定,该枚举的定义如下:

其主要是根据色调(hue)来确定特效视图与底部视图的混合。

与UIBlurEffect不同的是,UIVibrancyEffect主要用于放大和调整UIVisualEffectView视图下面的内容的颜色,同时让UIVisualEffectView的contentView中的内容看起来更加生动。通常UIVibrancyEffect对象是与UIBlurEffect一起使用,主要用于处理在UIBlurEffect特效上的一些显示效果。接上面的代码,我们看看在blur的视图上添加一些新的特效,如下代码所示:

vibrancy特效是取决于颜色值的。所有添加到contentView的子视图都必须实现tintColorDidChange方法并更新自己。需要注意的是,我们使用UIVibrancyEffect(forBlurEffect:)方法创建UIVibrancyEffect时,参数blurEffect必须是我们想加效果的那个blurEffect,否则可能不是我们想要的效果。

另外,UIVibrancyEffect还提供了一个类方法notificationCenterVibrancyEffect,其声明如下:

具体看以下的示例:

1.先建一个背景视图,可以滚动的 来显示效果

UIScrollView *scrollow = [[UIScrollView alloc]initWithFrame:self.view.frame];

scrollow.bounces = NO;

scrollow.contentSize = CGSizeMake(1080, 1920);

UIImageView *imageView =[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 1080, 1920)];

imageView.image = [UIImage imageNamed:@"image14.jpg"]

[scrollow addSubview:imageView];

[self.view addSubview:scrollow];

2.创建UIVisualEffectView对象并且添加到父视图上

UIVisualEffectView *effectView =[[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];

//这里一定要设置frame 不然不会显示效果

effectView.frame = CGRectMake(0, 200, self.view.frame.size.width, 200);

[self.view addSubview:effectView];

尽量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值,因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作。这不但消耗CPU/GPU,也可能会导致许多效果显示不正确或者根本不显示。

注意:这里添加的父视图不是滑动视图,而是self.view

3. 接下来 创建一个显示的label 在视图上

UILabel *label = [[UILabel alloc]initWithFrame:effectView.bounds];

label.text = @"乖妮";

label.textAlignment = NSTextAlignmentCenter;

label.font = [UIFont systemFontOfSize:80];

label.textColor = [UIColor blackColor];

[effectView.contentView addSubview:label];

写到这里,这时你运行以下 会有一个模糊的效果  

4. 或许这种效果还不是非常好看,接下来我们来创建模糊对象的子模糊对象 并添加到模糊上

//注意这里创建子模糊的方法 与上面创建 的模糊对象方法有一点不同

UIVisualEffectView *sub = [[UIVisualEffectView alloc]initWithEffect:[UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)effectView.effect]];

 // 这里注意一定要给子模糊一个frame 这样才会有效果 

 sub.frame = effectView.bounds;

// 这里添加子模糊 是添加到 contentView上 

[effectView.contentView addSubview:sub];

[sub.contentView addSubview:label];

相关文章

网友评论

      本文标题:高斯模糊效果,UIVisualEffectView为视图添加特殊

      本文链接:https://www.haomeiwen.com/subject/srtclltx.html