用 UIViewPropertyAnimator 實現 Blur 級別的控制

iOS 開發中有時會涉及到模糊效果的處理，UIKit 原生有個 UIVisualEffectView 可以支持對視圖進行模糊效果處理，但設計師有時會以爲原生的 blur 效果過重，想要輕一些，那怎麼處理呢？固然，能夠選擇一些第三方或者本身實現對視圖的模糊處理，若是不能那麼麻煩呢？能夠採用 UIViewPropertyAnimator 達到該要求。

// 如下代碼可直接在`Playground`上運行看到效果
class BlurDemoViewController: UIViewController {
    let imageView = UIImageView()
    
    let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    
    var animator: UIViewPropertyAnimator?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        imageView.frame = view.bounds
        imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        imageView.contentMode = .scaleAspectFill
        view.addSubview(imageView)
        
        effectView.frame = view.bounds
        effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(effectView)
        
	    // 核心代碼，控制 animator 的 fractionComplete 值便可控制 blur 的級別，另外， duration 在這並不重要，由於咱們將手動設置 animator 的完成度
        animator = UIViewPropertyAnimator(duration: 1, curve: .linear) {
            // 這裏是核心，這樣控制 fractionComplete 就能夠控制視圖的模糊效果在系統默認級別和無模糊效果之間過渡了
            self.effectView.effect = nil
        }
        
        // Slider 用於控制模糊效果級別的演示
        let slider = UISlider()
        slider.frame.origin.x = 20
        slider.frame.origin.y = view.frame.size.height - slider.frame.size.height - 20
        slider.frame.size.width = view.frame.size.width - 40
        slider.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
        slider.addTarget(self, action: #selector(sliderValueChanged), for: .valueChanged)
        view.addSubview(slider)
    }
    
    @objc private func sliderValueChanged(sender: UISlider) {
        // 控制 animator 的完成度以達到控制 Blur 級別的效果
        animator?.fractionComplete = CGFloat(sender.value)
    }
}

let vc = BlurDemoViewController()
vc.imageView.image = UIImage(named: "Test")

//vc.effectView.effect = UIBlurEffect(style: .dark)
//vc.effectView.effect = UIBlurEffect(style: .extraLight)

import PlaygroundSupport
PlaygroundPage.current.liveView = vc

複製代碼

一樣的思路，也能夠嘗試着用到其餘視圖屬性效果上。