Làm cách nào để làm mờ UIVisualEffectView và / hoặc UIBlurEffect vào và ra?

Tôi muốn làm mờ UIVisualEffectsView bằng UIBlurEffect vào và ra:

var blurEffectView = UIVisualEffectView()
blurEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))

Tôi sử dụng một hoạt ảnh bình thường trong một hàm được gọi bởi a UIButtonđể làm mờ nó trong, tương tự để làm mờ dần nhưng .alpha = 0& hidden = true:

blurEffectView.hidden = false
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut) {
    self.blurEffectView.alpha = 1
}

Bây giờ, mờ dần theo cả hai chiều không làm việc nhưng nó mang lại cho tôi một lỗi khi mờ dần ra :

<UIVisualEffectView 0x7fdf5bcb6e80>đang được yêu cầu làm hoạt hình độ mờ của nó. Điều này sẽ làm cho hiệu ứng có vẻ bị hỏng cho đến khi độ mờ trở về 1.

Câu hỏi

Làm cách nào để tôi làm mờ thành công đoạn UIVisualEffectViewtrong và ngoài mà không bị vỡ và có quá trình chuyển đổi mờ dần?

Ghi chú

• Tôi đã cố gắng đưa UIVisualEffectViewvào một UIViewvà làm mờ đi cái đó, không thành công

Tôi nghĩ điều này là mới trong iOS9, nhưng bây giờ bạn có thể đặt hiệu ứng của một UIVisualEffectViewkhối hoạt hình bên trong:

let overlay = UIVisualEffectView()
// Put it somewhere, give it a frame...
UIView.animate(withDuration: 0.5) {
    overlay.effect = UIBlurEffect(style: .light)
}

Đặt nó nilđể loại bỏ.

RẤT QUAN TRỌNG - Khi kiểm tra điều này trên trình mô phỏng, hãy đảm bảo đặt Ghi đè chất lượng đồ họa của trình mô phỏng thành Chất lượng cao để tính năng này hoạt động.

Các tài liệu hướng dẫn của Apple (hiện tại) khẳng định ...

Khi sử dụng lớp UIVisualEffectView, hãy tránh các giá trị alpha nhỏ hơn 1.

và

Đặt alpha thành nhỏ hơn 1 trên chế độ xem hiệu ứng hình ảnh hoặc bất kỳ chế độ xem siêu cấp nào của nó khiến nhiều hiệu ứng trông không chính xác hoặc hoàn toàn không hiển thị.

Tôi tin rằng một số bối cảnh quan trọng bị thiếu ở đây ...

Tôi đề nghị rằng mục đích là tránh các giá trị alpha nhỏ hơn 1 để có chế độ xem liên tục. Theo ý kiến ​​khiêm tốn của tôi, điều này không áp dụng cho hoạt ảnh của một chế độ xem.

Quan điểm của tôi - Tôi đề nghị rằng các giá trị alpha nhỏ hơn 1 có thể chấp nhận được cho các hoạt ảnh.

Thông báo đầu cuối cho biết:

UIVisualEffectView đang được yêu cầu để tạo hiệu ứng cho độ mờ của nó. Điều này sẽ làm cho hiệu ứng có vẻ bị hỏng cho đến khi độ mờ trở về 1.

Đọc kỹ điều này, hiệu ứng sẽ có vẻ bị phá vỡ. Quan điểm của tôi về vấn đề này:

• sự phá vỡ rõ ràng chỉ thực sự quan trọng đối với một quan điểm tồn tại - không thay đổi;
• một UIVisualEffectchế độ xem liên tục / không thay đổi với giá trị alpha nhỏ hơn 1 sẽ không hiển thị như dự kiến ​​/ thiết kế của Apple; và
• thông báo trong thiết bị đầu cuối không phải là lỗi, chỉ là một cảnh báo.

Để mở rộng câu trả lời của @ jrturton ở trên đã giúp tôi giải quyết vấn đề của mình, tôi muốn thêm ...

Để xóa mờ việc UIVisualEffectsử dụng mã (Objective-C) sau:

UIView.animateWithDuration(1.0, animations: {
//  EITHER...
    self.blurEffectView.effect = UIBlurEffect(nil)
//  OR...
    self.blurEffectView.alpha = 0
}, completion: { (finished: Bool) -> Void in
    self.blurEffectView.removeFromSuperview()
} )

Tôi sử dụng thành công cả hai phương pháp: đặt thuộc effecttính thành nilvà đặt thuộc alphatính thành 0.

Lưu ý rằng cài đặt effectđể niltạo ra "đèn flash đẹp" (vì muốn có mô tả tốt hơn) ở cuối hoạt ảnh, trong khi cài đặt alphađể 0tạo chuyển tiếp mượt mà.

(Hãy cho tôi biết bất kỳ lỗi cú pháp nào ... Tôi viết bằng obj-c.)

Đây là giải pháp mà tôi đã kết thúc, hoạt động trên cả iOS10 và các phiên bản trước đó bằng Swift 3

extension UIVisualEffectView {

    func fadeInEffect(_ style:UIBlurEffectStyle = .light, withDuration duration: TimeInterval = 1.0) {
        if #available(iOS 10.0, *) {
            let animator = UIViewPropertyAnimator(duration: duration, curve: .easeIn) {
                self.effect = UIBlurEffect(style: style)
            }

            animator.startAnimation()
        }else {
            // Fallback on earlier versions
            UIView.animate(withDuration: duration) {
                self.effect = UIBlurEffect(style: style)
            }
        }
    }

    func fadeOutEffect(withDuration duration: TimeInterval = 1.0) {
        if #available(iOS 10.0, *) {
            let animator = UIViewPropertyAnimator(duration: duration, curve: .linear) {
                self.effect = nil
            }

            animator.startAnimation()
            animator.fractionComplete = 1
        }else {
            // Fallback on earlier versions
            UIView.animate(withDuration: duration) {
                self.effect = nil
            }
        }
    }

}

Bạn cũng có thể kiểm tra ý chính này để tìm cách sử dụng ví dụ.

Chỉ là một cách giải quyết - đưa UIVisualEffectViewvào chế độ xem vùng chứa và thay đổi thuộc alphatính cho vùng chứa đó. Cách tiếp cận đó hoạt động hoàn hảo đối với tôi trên iOS 9. Có vẻ như nó không còn hoạt động trong iOS 10 nữa.

Bạn có thể thay đổi alpha của chế độ xem hiệu ứng hình ảnh mà không gặp bất kỳ sự cố nào, ngoài cảnh báo trong bảng điều khiển. Chế độ xem có thể chỉ đơn giản là trong suốt một phần thay vì bị mờ. Nhưng điều này thường không thành vấn đề nếu bạn chỉ thay đổi alpha trong hoạt ảnh.

Ứng dụng của bạn sẽ không gặp sự cố hoặc bị từ chối vì điều này. Kiểm tra nó trên một thiết bị thực (hoặc tám). Nếu bạn hài lòng với cách nó trông và hoạt động, thì tốt thôi. Apple vừa cảnh báo bạn rằng nó có thể không có giao diện hoặc hoạt động tốt như chế độ xem hiệu ứng hình ảnh với giá trị alpha là 1.

Bạn có thể chụp nhanh một chế độ xem bên dưới tĩnh và làm mờ dần nó ra mà không cần chạm vào độ mờ của chế độ xem mờ. Giả sử một ivar của blurView:

func addBlur() {
    guard let blurEffectView = blurEffectView else { return }

    //snapShot = UIScreen.mainScreen().snapshotViewAfterScreenUpdates(false)
    let snapShot = self.view.snapshotViewAfterScreenUpdates(false)
    view.addSubview(blurEffectView)
    view.addSubview(snapShot)

    UIView.animateWithDuration(0.25, animations: {
        snapShot.alpha = 0.0
    }, completion: { (finished: Bool) -> Void in
        snapShot.removeFromSuperview()
    } )
}

func removeBlur() {
    guard let blurEffectView = blurEffectView else { return }

    let snapShot = self.view.snapshotViewAfterScreenUpdates(false)
    snapShot.alpha = 0.0
    view.addSubview(snapShot)

    UIView.animateWithDuration(0.25, animations: {
        snapShot.alpha = 1.0
    }, completion: { (finished: Bool) -> Void in
        blurEffectView.removeFromSuperview()
        snapShot.removeFromSuperview()
    } )
}

Nếu bạn muốn mờ dần trong UIVisualEffectView - đối với ios10, hãy sử dụng UIViewPropertyAnimator

    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:nil];
    blurEffectView.frame = self.view.frame;
    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    UIView *blackUIView = [[UIView alloc]initWithFrame:self.view.frame];
    [bacgroundImageView addSubview:blackUIView];
    [blackUIView addSubview:blurEffectView];
    UIViewPropertyAnimator *animator  = [[UIViewPropertyAnimator alloc] initWithDuration:4.f curve:UIViewAnimationCurveLinear animations:^{
        [blurEffectView setEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
    }];

sau đó bạn có thể đặt phần trăm

[animator setFractionComplete:percent];

đối với ios9, bạn có thể sử dụng thành phần alpha

Alpha của UIVisualEffectView luôn phải là 1. Tôi nghĩ bạn có thể đạt được hiệu ứng bằng cách đặt alpha của màu nền.

Nguồn: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIVisualEffectView/index.html

Tôi tạo một uiview mà alpha là 0 và thêm dimview làm chế độ xem phụ của cái đó. Vì vậy, tôi có thể ẩn / hiện hoặc làm tròn các góc của nó bằng hoạt ảnh.

Tôi đã kết thúc với giải pháp sau, sử dụng các hình ảnh động riêng biệt cho UIVisualEffectViewnội dung và nội dung. Tôi đã sử dụng viewWithTag()phương thức này để lấy tham chiếu đến UIViewbên trong UIVisualEffectView.

let blurEffectView = UIVisualEffectView()
// Fade in
UIView.animateWithDuration(1) { self.blurEffectView.effect = UIBlurEffect(style: .Light) }    
UIView.animateWithDuration(1) { self.blurEffectView.viewWithTag(1)?.alpha = 1 }
// Fade out
UIView.animateWithDuration(1) { self.blurEffectView.effect = nil }    
UIView.animateWithDuration(1) { self.blurEffectView.viewWithTag(1)?.alpha = 0 }

Tôi muốn hoạt ảnh đơn lẻ thay đổi alpha, nhưng điều này tránh được lỗi và dường như hoạt động tốt.

Tôi vừa gặp sự cố này và cách tôi giải quyết nó là đặt UIVisualEffectsView trong một UIView và tạo hiệu ứng cho alpha của UIView đó.

Điều này hoạt động tốt, ngoại trừ việc ngay sau khi alpha thay đổi dưới 1.0, nó chuyển sang màu trắng đặc và trông rất chói tai. Để giải quyết vấn đề này, bạn phải đặt thuộc tính lớp của UIView containerView.layer.allowsGroupOpacity = falsevà điều này sẽ ngăn nó nhấp nháy màu trắng.

Giờ đây, bạn có thể tạo hoạt ảnh trong / làm mờ UIView chứa chế độ xem hiệu ứng hình ảnh và bất kỳ chế độ xem phụ nào khác bằng cách sử dụng thuộc tính alpha của nó và không phải lo lắng về bất kỳ trục trặc đồ họa nào hoặc nó ghi lại thông báo cảnh báo.

_visualEffectView.contentView.alpha = 0;

Để thay đổi alpha của UIVisualEffectView, bạn nên thay đổi contentView của _visualEffectView. Nếu bạn thay đổi alpha của _visualEffectView, bạn sẽ nhận được điều này

<UIVisualEffectView 0x7ff7bb54b490> is being asked to animate its opacity. This will cause the effect to appear broken until opacity returns to 1.

Thông thường, tôi chỉ muốn tạo hiệu ứng mờ khi tôi đang trình bày bộ điều khiển chế độ xem trên màn hình và muốn làm mờ bộ điều khiển chế độ xem trình bày. Đây là một tiện ích mở rộng thêm làm mờ () và bỏ làm mờ () vào bộ điều khiển chế độ xem để tạo điều kiện:

extension UIViewController {

   func blur() {
       //   Blur out the current view
       let blurView = UIVisualEffectView(frame: self.view.frame)
       self.view.addSubview(blurView)
       UIView.animate(withDuration:0.25) {
           blurView.effect = UIBlurEffect(style: .light)
       }
   }

   func unblur() {
       for childView in view.subviews {
           guard let effectView = childView as? UIVisualEffectView else { continue }
           UIView.animate(withDuration: 0.25, animations: {
                effectView.effect = nil
           }) {
               didFinish in
               effectView.removeFromSuperview()
           }
       }
   }
}

Tất nhiên, bạn có thể làm cho điều này mạnh mẽ hơn bằng cách cho phép người dùng chọn kiểu hiệu ứng, sửa đổi thời lượng, gọi một cái gì đó khi hoạt ảnh hoàn thành, gắn thẻ chế độ xem hiệu ứng hình ảnh được thêm vào ở chế độ mờ () để đảm bảo đó là chế độ duy nhất bị xóa khi bạn bỏ làm mờ ( ), v.v., nhưng cho đến nay tôi vẫn chưa thấy cần thiết phải làm những việc này, vì đây có xu hướng là kiểu hoạt động "cháy và quên".

dựa trên câu trả lời của @ cc, tôi đã sửa đổi phần mở rộng của anh ấy để làm mờ một chế độ xem

tiện ích mở rộng UIView {

    func mờ () {
        // Làm mờ chế độ xem hiện tại
        let fadeView = UIVisualEffectView (frame: self.bounds)
        self.addSubview (dimView)
        UIView.animate (với Độ bão hòa: 0,25) {
            mờView.effect = UIBlurEffect (kiểu: .dark)
        }
    }

    func unblur () {
        cho childView trong lượt xem phụ {
            bảo vệ let effectView = childView as? UIVisualEffectView khác {tiếp tục}
            UIView.animate (withDuration: 2.5, hoạt ảnh: {
                effectView.effect = nil
            }) {
                didFinish trong
                effectView.removeFromSuperview ()
            }
        }
    }
}

Cải thiện phản hồi @ Tel4tel và @cc, đây là phần mở rộng với các tham số và giải thích ngắn gọn.

extension UIView {

    // Perform a blur animation in the whole view
    // Effect tone can be .light, .dark, .regular...
    func blur(duration inSeconds: Double, effect tone: UIBlurEffectStyle) {
        let blurView = UIVisualEffectView(frame: self.bounds)
        self.addSubview(blurView)
        UIView.animate(withDuration: inSeconds) {
            blurView.effect = UIBlurEffect(style: tone)
        }
    }

    // Perform an unblur animation in the whole view
    func unblur(duration inSeconds: Double) {
        for childView in subviews {
            guard let effectView = childView as? UIVisualEffectView else { continue 
        }
            UIView.animate(withDuration: inSeconds, animations: {
                effectView.effect = nil
            }){
                didFinish in effectView.removeFromSuperview()
            }
        }
    }
}

Sau đó, bạn có thể sử dụng nó như: view.blur(duration: 5.0, effect: .light) hoặc view.unblur(duration: 3.0)

Hãy nhớ KHÔNG sử dụng nó trong viewDidLoad()vì nó sẽ ghi đè hoạt ảnh. Ngoài ra, khi chạy trên Trình mô phỏng, hãy chuyển đồ họa lên Mức cao hơn để có thể xem hoạt ảnh (Gỡ lỗi> Ghi đè chất lượng đồ họa> Chất lượng cao).