การเพิ่มเอฟเฟกต์เบลอพื้นหลังอย่างรวดเร็ว


119

ฉันกำลังตั้งค่าภาพพื้นหลังเพื่อดูคอนโทรลเลอร์ แต่ฉันต้องการเพิ่มเอฟเฟกต์เบลอให้กับพื้นหลังนี้ด้วย ฉันจะทำเช่นนี้ได้อย่างไร?

ฉันกำลังตั้งค่าพื้นหลังด้วยรหัสต่อไปนี้:

self.view.backgroundColor = UIColor(patternImage: UIImage(named: "testBg")!)

ฉันพบบนอินเทอร์เน็ตเพื่อดูภาพเบลอฉันจะนำสิ่งนี้ไปใช้กับพื้นหลังของฉันได้อย่างไร

var darkBlur = UIBlurEffect(style: UIBlurEffectStyle.Dark)
// 2
var blurView = UIVisualEffectView(effect: darkBlur)
blurView.frame = imageView.bounds
// 3
imageView.addSubview(blurView)

โปรดดูที่นี่สำหรับสเกลการเบลอที่กำหนดเองstackoverflow.com/a/51406290/7576100
แจ็ค

คำตอบ:


337

ฉันได้ทดสอบรหัสนี้แล้วและใช้งานได้ดี:

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

สำหรับ Swift 3.0:

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

สำหรับ Swift 4.0:

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

คุณสามารถดูผลลัพธ์ได้ที่นี่:

มุมมองเบลอ

หรือคุณสามารถใช้ lib นี้เพื่อ:

https://github.com/FlexMonkey/Blurable


5
มีวิธีเปลี่ยนขนาดเบลอหรือไม่? มันพร่ามัวเกินไป
Tolgay Toklar

2
เพียงแค่เปลี่ยนUIBlurEffectStyle.Light
Dharmesh Kheni

11
หรือคุณสามารถตั้งค่าอัลฟาบน UIVisualEffectView ให้น้อยกว่า 1.0 ลอง 0.8 หรือ 0.7
Duncan C

31
Apple ไม่แนะนำให้เปลี่ยน alpha ของvisualEffectVİew
Tolgay Toklar

4
การควบคุมทั้งหมดซ่อนอยู่ภายใต้ความเบลอนี้ addSubview แทน - ใช้ self.view.insertSubview (เบลอEffectViewที่: 0)
Leonif

45

คุณสามารถสร้างส่วนขยายของ UIImageView

Swift 2.0

import Foundation
import UIKit

extension UIImageView
{
    func makeBlurImage(targetImageView:UIImageView?)
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = targetImageView!.bounds

        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation
        targetImageView?.addSubview(blurEffectView)
    }
}

การใช้งาน:

override func viewDidLoad()
{
    super.viewDidLoad()

    let sampleImageView = UIImageView(frame: CGRectMake(0, 200, 300, 325))
    let sampleImage:UIImage = UIImage(named: "ic_120x120")!
    sampleImageView.image =  sampleImage

    //Convert To Blur Image Here
    sampleImageView.makeBlurImage(sampleImageView)

    self.view.addSubview(sampleImageView)
}

ส่วนขยาย Swift 3

import Foundation
import UIKit

extension UIImageView
{
    func addBlurEffect()
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = self.bounds

        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation
        self.addSubview(blurEffectView)
    }
}

การใช้งาน:

yourImageView.addBlurEffect()

ภาคผนวก:

extension UIView {

  /// Remove UIBlurEffect from UIView
  func removeBlurEffect() {
    let blurredEffectViews = self.subviews.filter{$0 is UIVisualEffectView}
    blurredEffectViews.forEach{ blurView in
      blurView.removeFromSuperview()
    }
  }

7
ความคิดดี! มันเป็นแค่ makeBlurImage () แล้วใช้ self แทน targetImageView ไม่ได้เหรอ?
Emanuele Fumagalli

1
ฉันไม่แน่ใจ แต่รหัสนี้อาจผิดพลาดหากไม่มีการส่งผ่านอาร์กิวเมนต์ใช่ไหม สิ่งนี้ควรมีคำสั่ง "if let tmpTargetImageView = targetImageView {}"
RomOne

@RomOne คุณจะได้รับข้อผิดพลาดในการคอมไพล์ / บิลด์ที่ล้มเหลวหากคุณไม่ระบุอาร์กิวเมนต์ นอกจากนี้ยังใช้งานได้โดยไม่มีภาพดังนั้นไม่จำเป็นต้องแกะออก และการทดสอบจะแสดงให้คุณเห็นว่าคุณลืมใส่รูปภาพหรือไม่
Josh

ชี้จะผิดพลาดหรือไม่หากไม่มีการส่ง ImageView อุดมคติคือความคิดของ @EmanueleFumagalli ในการใช้ self แทน targetImageView แต่ยังสามารถใช้คำสั่ง guard และส่งคืนในกรณีที่มีอาร์กิวเมนต์เป็นศูนย์
Uzaak

เป็นการดีกว่าที่จะให้คำอธิบายภาพเบลอเกินไป ขอบคุณมาก
MRizwan33

13

@AlvinGeorgeควรใช้:

extension UIImageView{        
    func blurImage()
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = self.bounds

        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation
        self.addSubview(blurEffectView)
    }
}

การใช้งาน :

 blurredBackground.frame = self.view.bounds
 blurredBackground.blurImage()
 self.view.addSubview(self.blurredBackground)

11

สำหรับ Swift 3 (iOS 10.0 และ 8.0)

var darkBlur:UIBlurEffect = UIBlurEffect()

if #available(iOS 10.0, *) { //iOS 10.0 and above
    darkBlur = UIBlurEffect(style: UIBlurEffectStyle.prominent)//prominent,regular,extraLight, light, dark
} else { //iOS 8.0 and above
  darkBlur = UIBlurEffect(style: UIBlurEffectStyle.dark) //extraLight, light, dark
}
let blurView = UIVisualEffectView(effect: darkBlur)
blurView.frame = self.view.frame //your view that have any objects
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurView)

10

คุณยังสามารถใช้ CoreImage เพื่อสร้างภาพเบลอด้วยเอฟเฟกต์มืด

  1. สร้างสแนปชอตสำหรับรูปภาพ

    func snapShotImage() -> UIImage {
        UIGraphicsBeginImageContext(self.frame.size)
        if let context = UIGraphicsGetCurrentContext() {
            self.layer.renderInContext(context)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
    
        return UIImage()
    }
    
  2. ใช้ตัวกรอง CoreImage ตามที่คุณต้องการด้วย

    private func bluredImage(view:UIView, radius:CGFloat = 1) -> UIImage {
    let image = view.snapShotImage()
    
    if let source = image.CGImage {
        let context = CIContext(options: nil)
        let inputImage = CIImage(CGImage: source)
    
        let clampFilter = CIFilter(name: "CIAffineClamp")
        clampFilter?.setDefaults()
        clampFilter?.setValue(inputImage, forKey: kCIInputImageKey)
    
        if let clampedImage = clampFilter?.valueForKey(kCIOutputImageKey) as? CIImage {
            let explosureFilter = CIFilter(name: "CIExposureAdjust")
            explosureFilter?.setValue(clampedImage, forKey: kCIInputImageKey)
            explosureFilter?.setValue(-1.0, forKey: kCIInputEVKey)
    
            if let explosureImage = explosureFilter?.valueForKey(kCIOutputImageKey) as? CIImage {
                let filter = CIFilter(name: "CIGaussianBlur")
                filter?.setValue(explosureImage, forKey: kCIInputImageKey)
                filter?.setValue("\(radius)", forKey:kCIInputRadiusKey)
    
                if let result = filter?.valueForKey(kCIOutputImageKey) as? CIImage {
                    let bounds = UIScreen.mainScreen().bounds
                    let cgImage = context.createCGImage(result, fromRect: bounds)
                    let returnImage = UIImage(CGImage: cgImage)
                    return returnImage
                }
            }
        }
    }
    return UIImage()
    }
    

8

สิ่งนี้ใช้ได้ผลกับฉันในSwift 5

let blurredView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
blurredView.frame = self.view.bounds
backgroundimage.addSubview(blurredView)

1
สวัสดี @Marta คุณรู้วิธีลดความจุของภาพเบลอหรือไม่?
ท้องฟ้า

5

อันนี้ทำให้กรอบด้านขวาเสมอ:

public extension UIView {

    @discardableResult
    public func addBlur(style: UIBlurEffect.Style = .extraLight) -> UIVisualEffectView {
        let blurEffect = UIBlurEffect(style: style)
        let blurBackground = UIVisualEffectView(effect: blurEffect)
        addSubview(blurBackground)
        blurBackground.translatesAutoresizingMaskIntoConstraints = false
        blurBackground.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        blurBackground.topAnchor.constraint(equalTo: topAnchor).isActive = true
        blurBackground.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        blurBackground.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        return blurBackground
    }
}


1

รหัสนี้ใช้ได้ผลดีสำหรับฉัน! สำหรับ Swift 4.x

let blurEffect = UIBlurEffect(style: .ExtraLight)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.frame
self.view.insertSubview(blurEffectView, atIndex: 0)

1

ในส่วนขยาย UIView:

func addBlurredBackground(style: UIBlurEffect.Style) {
    let blurEffect = UIBlurEffect(style: style)
    let blurView = UIVisualEffectView(effect: blurEffect)
    blurView.frame = self.frame
    blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.addSubview(blurView)
    self.sendSubviewToBack(blurView)
}

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.