Swift 之模糊效果(毛玻璃效果,虛化效果)的實現


前言:

之前項目中有用到過Objective-C的的模糊效果,感覺很是不錯,而且iOS8之后官方SDK也直接提供了可以實現毛玻璃效果的三個類:UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView。通過這三個類可以很容易的去實現毛玻璃效果。

最近在熟悉Swift,所以今天說的是使用Swift去實現這種效果。

前提:

我們去實現的模糊效果有個前提,就是需要背景有一個色調,這樣才能使毛玻璃有一個明顯的效果,這里我直接在底部添加一個背景圖片吧

背景圖片

我們就在這張背景圖片上去實現模糊效果。

 //MARK: ******* 創建背景圖片 *************
 func createBackgroundImageView() { self.imageView1 = UIImageView(frame: self.view.bounds) imageView1.layer.borderColor = UIColor.black.cgColor imageView1.layer.borderWidth = 2 imageView1.layer.cornerRadius = 5 imageView1.clipsToBounds = true imageView1.image = UIImage(named: "05") self.view.addSubview(imageView1) }

 

1、UIBlurEffect類(用作創建一個模糊效果)

SDK中提供的模糊效果有5種,其中兩種是iOS10之后添加的,我們來看一下:

 /** public enum UIBlurEffectStyle : Int { case extraLight case light case dark @available(iOS 10.0, *) case regular // Adapts to user interface style @available(iOS 10.0, *) case prominent // Adapts to user interface style } */

 

我們就直接創建好了,代碼如下:

//創建一個模糊效果
  let blurEffect = UIBlurEffect(style: .light)

 

上面使用的是普通的亮色。

2、UIVibrancyEffect類

UIVibrancyEffect 主要用於放大和調整 UIVisualEffectView 視圖下面的內容的顏色,同時讓 UIVisualEffectView 的 contentView 中的內容看起來更加生動。

 //創建並添加vibrancy視圖
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)

 

3、UIVisualEffectView類

UIVisualEffectView:模糊視圖。將前面創建的 UIBlurEffect 類的實例應用到這個模糊視圖上。將 UIVisualEffectView 類的實例(模糊視圖)置於待毛玻璃化的視圖之上即可。在其下方的所有視圖都會有模糊效果。值得一提的是:不要直接添加子視圖去UIVisualEffectView,而是要添加到contentView上。

//創建一個承載模糊效果的視圖
   let blurView = UIVisualEffectView(effect: blurEffect)

 

 

4、整體的代碼實現

下面我們直接看整體的代碼實現:

這部分分為兩種,效果也是不一樣的:

先看一下效果圖:

毛玻璃效果圖

4.1   UIBlurEffect和 UIVisualEffectView兩者配合使用

 func showBlurEffect() { //創建一個模糊效果
        let blurEffect = UIBlurEffect(style: .light) //創建一個承載模糊效果的視圖
        let blurView = UIVisualEffectView(effect: blurEffect) blurView.frame = CGRect(x: 0, y: 64, width: viewWidth+2*space, height: Double(viewHeight)) let label = UILabel(frame: CGRect(x: 10, y: 100, width: viewWidth - 20, height: 100)) label.text = "bfjnecsjdkcmslc,samosacmsacdfvneaui" label.font = UIFont.boldSystemFont(ofSize: 30) label.numberOfLines = 0 label.textAlignment = .center label.textColor = UIColor.white blurView.contentView.addSubview(label) self.view.addSubview(blurView) }

4.2  UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView

 func showBlurEffectWithUIVibrancyEffect() { //創建一個模糊效果
        let blurEffect = UIBlurEffect(style: .light) //創建一個承載模糊效果的視圖
        let blurView = UIVisualEffectView(effect: blurEffect) blurView.frame = CGRect(x: 0, y: Double(viewHeight+64), width: viewWidth+2*space, height: Double(viewHeight)) self.view.addSubview(blurView) //創建並添加vibrancy視圖
        let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect) let vibrancyView = UIVisualEffectView(effect:vibrancyEffect) vibrancyView.frame = self.view.bounds let label = UILabel(frame: CGRect(x: 10, y: viewY, width: viewWidth - 20, height: 100)) label.text = "bfjnecsjdkcmslc,samosacmsacdfvneaui" label.font = UIFont.boldSystemFont(ofSize: 30) label.numberOfLines = 0 label.textAlignment = .center label.textColor = UIColor.white vibrancyView.contentView.addSubview(label) blurView.contentView.addSubview(vibrancyView) self.view.addSubview(blurView) }

 

 圖片的前者是:UIBlurEffect和 UIVisualEffectView兩者配合使用

后者:UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM