返回 导航

Swift

hangge.com

Swift - 实现毛玻璃效果（Blur、模糊、虚化背景元素）

作者：hangge | 2016-06-03 09:20
苹果从 iOS 7 起，大量使用了毛玻璃效果。比如上拉的控制中心就使用了毛玻璃效果。但当时还未向开发者公开提供毛玻璃效果的API，因此开发者只能去自己实现毛玻璃效果或者找第三方类库解决。
后来到了 iOS 8，SDK中直接提供了 UIBlurEffect 类与 UIVisualEffectView 类，配合使用这两个类可以轻松实现毛玻璃效果。

1，准备工作
假设我们在页面视图上放置了一个 imageView。下面演示如何在其之上添加毛玻璃效果。

2，使用UIBlurEffect、UIVisualEffectView实现毛玻璃效果
（1）创建一个 UIBlurEffect 类的实例，并指定某一种毛玻璃效果样式。
（2）创建 UIVisualEffectView 类的实例，这个可以称它为模糊视图。将前面创建的 UIBlurEffect 类的实例应用到这个模糊视图上。
（3）将 UIVisualEffectView 类的实例（模糊视图）置于待毛玻璃化的视图之上即可。在其下方的所有视图都会有模糊效果。
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //首先创建一个模糊效果
        let blurEffect = UIBlurEffect(style: .Light)
        //接着创建一个承载模糊效果的视图
        let blurView = UIVisualEffectView(effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        //添加模糊视图到页面view上（模糊视图下方都会有模糊效果）
        self.view.addSubview(blurView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

3，三种模糊效果
除了上面使用的 Light 样式。UIBlurEffect 一共定义了三种效果，这些效果由枚举 UIBlurEffectStyle 来确定，
分别是：ExtraLight、Light、Dark。
我们可以根据色调（hue）来确定特效视图与底部视图的混合样式，使其更符合我们的页面风格。
            

4，添加Vibrancy
通过模糊背景，我们可以让前景文字或其它视图元素显得更加突出。

而苹果在其之上又引入了 UIVibrancyEffect。UIVibrancyEffect 主要用于放大和调整 UIVisualEffectView 视图下面的内容的颜色，同时让 UIVisualEffectView 的 contentView 中的内容看起来更加生动。
通常 UIVibrancyEffect 对象是与 UIBlurEffect 一起使用，下面对页面上的文本标签做 Vibrancy 效果，可以看到文本标签在屏幕上显得更为舒适。
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //首先创建一个模糊效果
        let blurEffect = UIBlurEffect(style: .Light)
        //接着创建一个承载模糊效果的视图
        let blurView = UIVisualEffectView(effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        
        //创建并添加vibrancy视图
        let vibrancyView = UIVisualEffectView(effect:
            UIVibrancyEffect(forBlurEffect: blurEffect))
        vibrancyView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        blurView.contentView.addSubview(vibrancyView)
        
        //将文本标签添加到vibrancy视图中
        let label=UILabel(frame:CGRectMake(10,20, 300, 100))
        label.text = "hangge.com"
        label.font = UIFont(name: "HelveticaNeue-Bold", size: 40)
        label.textAlignment = .Center
        label.textColor = UIColor.whiteColor()
        vibrancyView.contentView.addSubview(label)
        
        self.view.addSubview(blurView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

将 blurEffect 的样式设为 .Dark 的效果：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //首先创建一个模糊效果
        let blurEffect = UIBlurEffect(style: .Dark)
        //接着创建一个承载模糊效果的视图
        let blurView = UIVisualEffectView(effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        
        //创建并添加vibrancy视图
        let vibrancyView = UIVisualEffectView(effect:
            UIVibrancyEffect(forBlurEffect: blurEffect))
        vibrancyView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        blurView.contentView.addSubview(vibrancyView)
        
        //将文本标签添加到vibrancy视图中
        let label=UILabel(frame:CGRectMake(10,20, 300, 100))
        label.text = "hangge.com"
        label.font = UIFont(name: "HelveticaNeue-Bold", size: 40)
        label.textAlignment = .Center
        label.textColor = UIColor.whiteColor()
        vibrancyView.contentView.addSubview(label)
        
        self.view.addSubview(blurView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

5，源码下载：hangge_1135.zip
评论

全部评论（5）

回到顶部