Erstellen einer verschwommenen Überlagerungsansicht

Question

In der Musik-App des neuen iOS sehen wir ein Albumcover hinter einer Ansicht, die es verwischt.

Wie kann so etwas erreicht werden? Ich habe die Dokumentation gelesen, aber dort nichts gefunden.

Answer 1

Swift 3 Version von Kev's Antwort, um ein verschwommenes Bild zurückzugeben -

func blurBgImage(image: UIImage) -> UIImage? {
        let radius: CGFloat = 20;
        let context = CIContext(options: nil);
        let inputImage = CIImage(cgImage: image.cgImage!);
        let filter = CIFilter(name: "CIGaussianBlur");
        filter?.setValue(inputImage, forKey: kCIInputImageKey);
        filter?.setValue("\(radius)", forKey:kCIInputRadiusKey);

        if let result = filter?.value(forKey: kCIOutputImageKey) as? CIImage{

            let rect = CGRect(origin: CGPoint(x: radius * 2,y :radius * 2), size: CGSize(width: image.size.width - radius * 4, height: image.size.height - radius * 4))

            if let cgImage = context.createCGImage(result, from: rect){
                return UIImage(cgImage: cgImage);
                }
        }
        return nil;
    }

Answer 2

2019-Code

Hier ist ein vollständigeres Beispiel, das die erstaunliche @AdamBardon-Technik verwendet.

@IBDesignable Klasse ButtonOderEtwasMitUnschärfe: UIButton {

    var ba: UIViewPropertyAnimator?
    private lazy var verschwommen: BlurryBall = { return BlurryBall() }()

    override func didMoveToSuperview() {
        super.didMoveToSuperview()

        // Richte den verschwommenen Ball ein. Achten Sie darauf, ihn abzubauen.
        // Verwenden Sie den großartigen Trick, um auf den internen Gauß-Grad des Apple-
        // Standard-GPU-Verwischungseffekts zuzugreifen, siehe stackoverflow.com/a/55378168/294884

        superview?.insertSubview(verschwommen, belowSubview: self)
        ba = UIViewPropertyAnimator(duration:1, curve:.linear) {[weak self] in
            // beachten Sie, dass diese Dauer/Kurve-Werte einfach ungenutzt sind
            self?.verschwommen.effect = UIBlurEffect(style: .extraLight)
        }
        ba?.fractionComplete = live.largeplaybutton_blurfactor
    }

    override func willMove(toSuperview newSuperview: UIView?) {

        // Abbruch für den verschwommenen Ball - kritisch

        if newSuperview == nil { print("sicherer Abbau")
            ba?.stopAnimation(true)
            ba?.finishAnimation(at: .current)
        }
    }

    override func layoutSubviews() { super.layoutSubviews()
        verschwommen.frame = bounds, dein Zeichenrahmen oder was auch immer
    }

{Hinweis: als allgemeine iOS-Entwicklungssache ist möglicherweise didMoveToWindow für Sie geeigneter als didMoveToSuperview. Zweitens können Sie auf andere Weise den Abbau durchführen, jedoch besteht der Abbau aus den beiden dort gezeigten Codezeilen.}

BlurryBall ist einfach eine UIVisualEffectView. Beachten Sie die Initialisierungen für eine visuelle Effektansicht. Wenn Sie zufällig abgerundete Ecken oder Ähnliches benötigen, machen Sie es in dieser Klasse.

Klasse BlurryBall: UIVisualEffectView {

    override init(effect: UIVisualEffect?) { super.init(effect: effect)
        commonInit() }

    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder)
        commonInit() }

    private func commonInit() {
        clipsToBounds = true
        backgroundColor = .clear
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.width / 2
    }
}

Answer 3

Ich habe das zufällig entdeckt, liefert mir wirklich großartige (fast identische mit Apples) Ergebnisse und verwendet das Acceleration-Framework. -- http://pastebin.com/6cs6hsyQ *Nicht von mir geschrieben

Answer 4

Hier ist der Swift 2.0-Code für die Lösung, die in der akzeptierten Antwort bereitgestellt wurde:

    //wenden Sie den Blur nur an, wenn der Benutzer die Transparenzeffekte nicht deaktiviert hat
    if !UIAccessibilityIsReduceTransparencyEnabled() {
        self.view.backgroundColor = UIColor.clearColor()

        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        //fülle immer die Ansicht
        blurEffectView.frame = self.view.bounds
        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]

        self.view.addSubview(blurEffectView) //Wenn Sie mehr UIViews haben, verwenden Sie eine insertSubview-API, um sie bei Bedarf zu platzieren
    } else {
        self.view.backgroundColor = UIColor.blackColor()
    }

Answer 5

Sie können Ihren Hintergrund direkt mit "Visual Effect View with Blur" und "Visual Effect View with Blur and Vibrancy" verwischen.

Alles, was Sie tun müssen, um den Hintergrund in der iOS-Anwendung zu verwischen, ist...

1. Gehen Sie in die Objektbibliothek und suchen Sie nach "Visual Effect View with Blur"

Bild Schritt 1

2. Ziehen Sie "Visual Effect View with Blur" auf Ihr Storyboard und richten Sie es ein...

Bild Schritt 2

3. Zum Schluss... machen Sie Ihren App-Hintergrund verwischt!

Anwendungslayout vor dem Klicken auf eine Schaltfläche!

Anwendungssicht nach dem Klicken auf die Schaltfläche, die den gesamten Anwendungshintergrund verwischt!