使用UIVisualEffectView为视图添加特殊效果

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

使用UIVisualEffectView为视图添加特殊效果

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

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

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

  1. let bgView: UIImageView = UIImageView(image: UIImage(named: "visual")) 
  2. bgView.frame = self.view.bounds 
  3. self.view.addSubview(bgView) 
  4.  
  5. let blurEffect: UIBlurEffect = UIBlurEffect(style: .Light) 
  6. let blurView: UIVisualEffectView = UIVisualEffectView(effect: blurEffect) 
  7. blurView.frame = CGRectMake(50.050.0, self.view.frame.width - 100.0200.0
  8. self.view.addSubview(blurView) 

这段代码是在当前视图控制器上添加了一个UIImageView作为背景图。

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

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

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

  1. init(effect effect: UIVisualEffect) 

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

  1. NSObject 
  2. | -- UIVisualEffect 
  3. | -- UIBlurEffect 
  4. | -- UIVibrancyEffect 

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

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

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

  1. enum UIBlurEffectStyle : Int { 
  2. case ExtraLight 
  3. case Light 
  4. case Dark 

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

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

  1. let vibrancyView: UIVisualEffectView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect)) 
  2. vibrancyView.setTranslatesAutoresizingMaskIntoConstraints(false
  3. blurView.contentView.addSubview(vibrancyView) 
  4.  
  5. var label: UILabel = UILabel() 
  6. label.setTranslatesAutoresizingMaskIntoConstraints(false
  7. label.text = "Vibrancy Effect" 
  8. label.font = UIFont(name: "HelveticaNeue-Bold", size: 30
  9. label.textAlignment = .Center 
  10. label.textColor = UIColor.whiteColor() 
  11. vibrancyView.contentView.addSubview(label)

     

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

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

class func notificationCenterVibrancyEffect() -> UIVibrancyEffect!

这个方法创建一个用于通知中心的Today扩展的vibrancy特效。

参考

UIVisualEffectView Class Reference

UIVisualEffect Class Reference

UIBlurEffect Class Reference

UIVibrancyEffect Class Reference UIVisualEffect – Swift Tutorial iOS 8: UIVisualEffect

Pointer is missing a nullability type specifier (nonnull or nullable)问题的处理 — Nullability Annotations

责任编辑:chenqingxiang
相关推荐

2009-12-29 14:26:04

WPF按钮

2009-12-25 14:25:39

WPF图标

2010-09-10 09:57:27

DIV样式

2010-08-24 14:10:44

div style

2015-07-07 10:15:56

iOSUIVisualEffweak

2010-08-17 10:16:37

DIV样式

2021-01-28 14:13:40

CSS3阴影元素

2013-04-25 09:47:54

unity3D手机游戏引擎

2020-12-20 19:26:20

LVMFedoraLinux

2022-11-14 08:26:40

系统音频API

2013-07-18 16:09:10

自定义iOS状态栏iOS开发iOS学习

2012-05-15 09:49:32

windows8操作系统

2011-08-18 10:32:13

iPhone编程视图

2020-06-19 13:53:47

BokehPython绘图

2010-09-01 13:17:42

CSS样式表

2009-09-22 12:59:58

ibmdwDojo

2010-11-12 11:19:19

SQL Server视

2016-03-04 10:50:02

ios圆角高效添加

2012-09-17 15:15:29

Linux Deepi

2012-07-30 09:41:04

Android搜索功能
点赞
收藏

51CTO技术栈公众号