web-dev-qa-db-de.com

Erstellen einer unscharfen Überlagerungsansicht

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

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

341
kondratyevdev

Sie können UIVisualEffectView verwenden, um diesen Effekt zu erzielen. Dies ist eine native API, die auf Leistung und Akkulaufzeit optimiert wurde und zudem einfach zu implementieren ist.

Swift:

//only apply the blur if the user hasn't disabled transparency effects
if !UIAccessibilityIsReduceTransparencyEnabled() {
    view.backgroundColor = .clear

    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    //always fill the view
    blurEffectView.frame = self.view.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    view.backgroundColor = .black
}

Ziel c:

//only apply the blur if the user hasn't disabled transparency effects
if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    self.view.backgroundColor = [UIColor clearColor];

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    //always fill the view
    blurEffectView.frame = self.view.bounds;
    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.view addSubview:blurEffectView]; //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    self.view.backgroundColor = [UIColor blackColor];
}

Wenn Sie diesen View-Controller modal anzeigen, um den zugrunde liegenden Inhalt zu verwischen, müssen Sie den modalen Präsentationsstil auf Over Current Context setzen und die Hintergrundfarbe auf clear setzen, um sicherzustellen, dass der zugrunde liegende View-Controller sichtbar bleibt, wenn dieser überbelichtet dargestellt wird.

504
Jordan H

Kernbild

Da dieses Bild im Screenshot statisch ist, können Sie CIGaussianBlur aus Core Image verwenden (erfordert iOS 6). Hier ist ein Beispiel: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.m

Dies ist jedoch langsamer als die anderen Optionen auf dieser Seite.

#import <QuartzCore/QuartzCore.h>

- (UIImage*) blur:(UIImage*)theImage
{   
    // ***********If you need re-orienting (e.g. trying to blur a photo taken from the device camera front facing camera in portrait mode)
    // theImage = [self reOrientIfNeeded:theImage];

    // create our blurred image
    CIContext *context = [CIContext contextWithOptions:nil];
    CIImage *inputImage = [CIImage imageWithCGImage:theImage.CGImage];

    // setting up Gaussian Blur (we could use one of many filters offered by Core Image)
    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [filter setValue:inputImage forKey:kCIInputImageKey];
    [filter setValue:[NSNumber numberWithFloat:15.0f] forKey:@"inputRadius"];
    CIImage *result = [filter valueForKey:kCIOutputImageKey];

    // CIGaussianBlur has a tendency to shrink the image a little, 
    // this ensures it matches up exactly to the bounds of our original image
    CGImageRef cgImage = [context createCGImage:result fromRect:[inputImage extent]];

    UIImage *returnImage = [UIImage imageWithCGImage:cgImage];//create a UIImage for this function to "return" so that ARC can manage the memory of the blur... ARC can't manage CGImageRefs so we need to release it before this function "returns" and ends.
    CGImageRelease(cgImage);//release CGImageRef because ARC doesn't manage this on its own.

    return returnImage;

    // *************** if you need scaling
    // return [[self class] scaleIfNeeded:cgImage];
}

+(UIImage*) scaleIfNeeded:(CGImageRef)cgimg {
    bool isRetina = [[[UIDevice currentDevice] systemVersion] intValue] >= 4 && [[UIScreen mainScreen] scale] == 2.0;
    if (isRetina) {
        return [UIImage imageWithCGImage:cgimg scale:2.0 orientation:UIImageOrientationUp];
    } else {
        return [UIImage imageWithCGImage:cgimg];
    }
}

- (UIImage*) reOrientIfNeeded:(UIImage*)theImage{

    if (theImage.imageOrientation != UIImageOrientationUp) {

        CGAffineTransform reOrient = CGAffineTransformIdentity;
        switch (theImage.imageOrientation) {
            case UIImageOrientationDown:
            case UIImageOrientationDownMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, theImage.size.height);
                reOrient = CGAffineTransformRotate(reOrient, M_PI);
                break;
            case UIImageOrientationLeft:
            case UIImageOrientationLeftMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, 0);
                reOrient = CGAffineTransformRotate(reOrient, M_PI_2);
                break;
            case UIImageOrientationRight:
            case UIImageOrientationRightMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, 0, theImage.size.height);
                reOrient = CGAffineTransformRotate(reOrient, -M_PI_2);
                break;
            case UIImageOrientationUp:
            case UIImageOrientationUpMirrored:
                break;
        }

        switch (theImage.imageOrientation) {
            case UIImageOrientationUpMirrored:
            case UIImageOrientationDownMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, 0);
                reOrient = CGAffineTransformScale(reOrient, -1, 1);
                break;
            case UIImageOrientationLeftMirrored:
            case UIImageOrientationRightMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.height, 0);
                reOrient = CGAffineTransformScale(reOrient, -1, 1);
                break;
            case UIImageOrientationUp:
            case UIImageOrientationDown:
            case UIImageOrientationLeft:
            case UIImageOrientationRight:
                break;
        }

        CGContextRef myContext = CGBitmapContextCreate(NULL, theImage.size.width, theImage.size.height, CGImageGetBitsPerComponent(theImage.CGImage), 0, CGImageGetColorSpace(theImage.CGImage), CGImageGetBitmapInfo(theImage.CGImage));

        CGContextConcatCTM(myContext, reOrient);

        switch (theImage.imageOrientation) {
            case UIImageOrientationLeft:
            case UIImageOrientationLeftMirrored:
            case UIImageOrientationRight:
            case UIImageOrientationRightMirrored:
                CGContextDrawImage(myContext, CGRectMake(0,0,theImage.size.height,theImage.size.width), theImage.CGImage);
                break;

            default:
                CGContextDrawImage(myContext, CGRectMake(0,0,theImage.size.width,theImage.size.height), theImage.CGImage);
                break;
        }

        CGImageRef CGImg = CGBitmapContextCreateImage(myContext);
        theImage = [UIImage imageWithCGImage:CGImg];

        CGImageRelease(CGImg);
        CGContextRelease(myContext);
    }

    return theImage;
}

Stapelunschärfe (Box + Gaussian)

  • StackBlur Dies implementiert eine Mischung aus Box und Gaußscher Unschärfe. 7x schneller als nichtbeschleunigtes Gaußsches, aber nicht so hässlich wie Box-Unschärfe. Eine Demo finden Sie in hier (Java-Plugin-Version) oder hier (JavaScript-Version). Dieser Algorithmus wird in KDE und Camera + und anderen verwendet. Es verwendet nicht das Accelerate Framework, ist aber schnell.

Beschleunigen Sie das Framework

  • In der Sitzung „Implementing Engaging UI unter iOS“ von WWDC 2013 erläutert Apple, wie ein unscharfer Hintergrund erstellt wird (um 14:30 Uhr). Außerdem wird eine Methode applyLightEffect erwähnt, die mit Accelerate.framework im Beispielcode implementiert wird . 

  • GPUImage verwendet OpenGL-Shader, um dynamische Unschärfen zu erzeugen. Es gibt verschiedene Arten von Unschärfe: GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter. Es gibt sogar einen GPUImageiOSBlurFilter, der „den durch das Bedienfeld von iOS 7 bereitgestellten Unschärfe-Effekt vollständig replizieren soll“ ( Tweet , article ). Der Artikel ist ausführlich und informativ.

 - (UIImage *) blurryGPUImage: (UIImage *) Bild mit BlurLevel: (NSInteger) Unschärfe {
 GPUImageFastBlurFilter * blurFilter = [GPUImageFastBlurFilter new]; 
 blurFilter.blurSize = blur; 
 UIImage * result = [blurFilter imageByFilteringImage: image]; 
 Ergebnis zurückgeben; 
 } 
  • Von indieambitions.com: Führen Sie eine Unschärfe mit vImage aus. Der Algorithmus wird auch in iOS-RealTimeBlur verwendet.

  • Von Nick Lockwood: https://github.com/nicklockwood/FXBlurView Das Beispiel zeigt die Unschärfe in einer Bildlaufansicht. Es verwischt mit dispatch_async und synchronisiert dann, um Updates mit UITrackingRunLoopMode aufzurufen, damit die Unschärfe nicht verzögert wird, wenn UIKit dem Bildlauf der UIScrollView Priorität einräumt. Dies wird in Nicks Buch iOS Core Animation erklärt, das übrigens großartig ist.

  • iOS-blur Dies nimmt die Unschärfeschicht der UIToolbar und legt sie an anderer Stelle ab. Apple lehnt Ihre App ab, wenn Sie diese Methode verwenden. Siehe https://github.com/mochidev/MDBlurView/issues/4

  • Aus dem Evadne-Blog: LiveFrost: Schnelles, synchrones UIView-Snapshot-Convolving . Großartiger Code und eine gute Lektüre. Einige Ideen aus diesem Beitrag: 

    • Verwenden Sie eine serielle Warteschlange, um Aktualisierungen von CADisplayLink zu drosseln.
    • Verwenden Sie Bitmap-Kontexte erneut, sofern sich die Grenzen nicht ändern.
    • Zeichnen Sie kleinere Bilder mit - [CALayer renderInContext:] mit einem Skalierfaktor von 0,5f.

Andere Sachen

Andy Matuschak sagte auf Twitter: "Weißt du, viele der Orte, an denen es so aussieht, als würden wir es in Echtzeit machen, es ist statisch mit cleveren Tricks." 

Auf doubleencore.com sagen sie: "Wir haben festgestellt, dass ein Unschärferadius von 10 pt plus eine Erhöhung der Sättigung um 10 pt den iOS 7-Unschärfeeffekt unter den meisten Umständen am besten nachahmen." 

Ein Blick auf die privaten Header von Apples SBFProceduralWallpaperView .

Letztendlich ist dies keine echte Unschärfe, aber denken Sie daran, Sie können rasterizationScale einstellen, um ein pixeliertes Bild zu erhalten: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/

279
Jano

Ich habe mich entschlossen, eine schriftliche Objective-C-Version aus der akzeptierten Antwort zu veröffentlichen, um mehr Optionen in dieser Frage zu bieten. 

- (UIView *)applyBlurToView:(UIView *)view withEffectStyle:(UIBlurEffectStyle)style andConstraints:(BOOL)addConstraints
{
  //only apply the blur if the user hasn't disabled transparency effects
  if(!UIAccessibilityIsReduceTransparencyEnabled())
  {
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:style];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurEffectView.frame = view.bounds;

    [view addSubview:blurEffectView];

    if(addConstraints)
    {
      //add auto layout constraints so that the blur fills the screen upon rotating device
      [blurEffectView setTranslatesAutoresizingMaskIntoConstraints:NO];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeTop
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeTop
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeBottom
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeBottom
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeLeading
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeLeading
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeTrailing
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeTrailing
                                                      multiplier:1
                                                        constant:0]];
    }
  }
  else
  {
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7];
  }

  return view;
}

Die Einschränkungen können entfernt werden, wenn Sie möchten, wenn Sie nur den Portrait-Modus unterstützen oder ich diese Funktion einfach mit einem Flag versehen, um sie zu verwenden oder nicht.

15
NorthBlast

Ich glaube nicht, dass ich den Code posten darf, aber der obige Beitrag, der den WWDC-Beispielcode erwähnt, ist korrekt. Hier ist der Link: https://developer.Apple.com/downloads/index.action?name=WWDC%202013

Die Datei, nach der Sie suchen, ist die Kategorie auf UIImage. Die Methode ist applyLightEffect.

Wie ich oben in einem Kommentar bemerkt habe, hat der Apple Blur eine Sättigung und andere Dinge, die neben der Unschärfe vor sich gehen. Eine einfache Unschärfe funktioniert nicht ... wenn Sie ihren Stil nachahmen möchten.

13
xtravar

Ich denke, die einfachste Lösung dafür ist, UIToolbar zu überschreiben, was in iOS 7 alles dahinter verwischt. Es ist ziemlich hinterlistig, aber sehr einfach für Sie zu implementieren, und zwar schnell!

Sie können es mit jeder Ansicht machen, machen Sie es einfach zu einer Unterklasse von UIToolbar anstelle von UIView. Sie können dies sogar mit einer UIViewController-Eigenschaft von view tun, zum Beispiel ...

1) Erstellen Sie eine neue Klasse, die eine "Unterklasse von" UIViewController ist, und aktivieren Sie das Kontrollkästchen "Mit XIB für Benutzeroberfläche".

2) Wählen Sie die Ansicht aus, und wechseln Sie zum Identitätsinspektor im rechten Fensterbereich (Alt-Befehl-3). Ändern Sie die "Klasse" in UIToolbar. Gehen Sie jetzt zum Attribut-Inspector (alt-command-4) und ändern Sie die Farbe für "Hintergrund" in "Farbe löschen".

3) Fügen Sie der Hauptansicht eine Unteransicht hinzu und verknüpfen Sie sie mit einem IBOutlet in Ihrer Benutzeroberfläche. Nennen Sie es backgroundColorView. Es wird ungefähr so ​​aussehen, als private Kategorie in der Implementierungsdatei (.m).

@interface BlurExampleViewController ()
@property (weak, nonatomic) IBOutlet UIView *backgroundColorView;
@end

4) Wechseln Sie in die View-Controller-Implementierungsdatei (.m) und ändern Sie die -viewDidLoad-Methode wie folgt:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.barStyle = UIBarStyleBlack; // this will give a black blur as in the original post
    self.backgroundColorView.opaque = NO;
    self.backgroundColorView.alpha = 0.5;
    self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
}

Dadurch erhalten Sie eine dunkelgraue Ansicht, die alles dahinter verwischt. Kein witziges Geschäft, kein langsames Verwischen des Kernbildes, alles mit dem OS/SDK, das Ihnen zur Verfügung steht.

Sie können die Ansicht dieses View-Controllers wie folgt einer anderen Ansicht hinzufügen:

[self addChildViewController:self.blurViewController];
[self.view addSubview:self.blurViewController.view];
[self.blurViewController didMoveToParentViewController:self];

// animate the self.blurViewController into view

Lassen Sie mich wissen, wenn etwas unklar ist, ich helfe Ihnen gerne!


Bearbeiten

UIToolbar wurde in 7.0.3 geändert, um bei Verwendung einer farbigen Unschärfe möglicherweise unerwünschten Effekt zu erzielen.

Früher war es uns möglich, die Farbe mithilfe von barTintColor einzustellen. Wenn Sie dies jedoch zuvor getan haben, müssen Sie die Alphakomponente auf weniger als 1 einstellen.

Dies kann wie folgt erreicht werden: (unter Berücksichtigung von self ist eine Unterklasse von UIToolbar)

UIColor *color = [UIColor blueColor]; // for example
self.barTintColor = [color colorWithAlphaComponent:0.5];

Dadurch wird der unscharfen Ansicht ein blauer Farbton verliehen.

9
Sam

Hier ist eine schnelle Implementierung in Swift mit CIGaussianBlur:

func blur(image 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);
    let result = filter?.valueForKey(kCIOutputImageKey) as! CIImage;
    let rect = CGRectMake(radius * 2, radius * 2, image.size.width - radius * 4, image.size.height - radius * 4)
    let cgImage = context.createCGImage(result, fromRect: rect);
    let returnImage = UIImage(CGImage: cgImage);

    return returnImage;
}
8
kev

Die akzeptierte Antwort ist richtig, aber hier fehlt ein wichtiger Schritt, falls diese Ansicht, für die Sie unscharfen Hintergrund wünschen, mit angezeigt wird

[self presentViewController:vc animated:YES completion:nil]

Standardmäßig wird die Unschärfe aufgehoben, da UIKit die Ansicht des Präsentators entfernt, was Sie tatsächlich verwischen. Um dieses Entfernen zu vermeiden, fügen Sie diese Zeile vor der vorherigen ein

vc.modalPresentationStyle = UIModalPresentationOverFullScreen;

Oder verwenden Sie andere Over-Stile.

5

Benutzerdefinierte Unschärfeskala

Sie könnenUIVisualEffectView mit benutzerdefinierten Einstellungen als - versuchen.

class BlurViewController: UIViewController {
    private let blurEffect = (NSClassFromString("_UICustomBlurEffect") as! UIBlurEffect.Type).init()

    override func viewDidLoad() {
        super.viewDidLoad()
        let blurView = UIVisualEffectView(frame: UIScreen.main.bounds)
        blurEffect.setValue(1, forKeyPath: "blurRadius")
        blurView.effect = blurEffect
        view.addSubview(blurView)
    }   
}

Ausgabe: - für blurEffect.setValue(1... & blurEffect.setValue(2.. enter image description here  enter image description here

4
Jack

ZIEL C 

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
visualEffectView.frame = self.accessImageView.bounds;
[self.accessImageView addSubview:visualEffectView];

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)

von: https://stackoverflow.com/a/24083728/4020910

3
BennyTheNerd

 enter image description here

Von Xcode aus können Sie dies problemlos tun. Folgen Sie den Schritten von xcode. Drug-visuelle Effektansicht in Ihrer Ansicht oder in der Bildansicht. 

Glückliche Kodierung :)

3
Mehedi Hasan
func blurBackgroundUsingImage(image: UIImage)
{
    var frame                   = CGRectMake(0, 0, self.view.frame.width, self.view.frame.height)
    var imageView               = UIImageView(frame: frame)
    imageView.image             = image
    imageView.contentMode       = .ScaleAspectFill
    var blurEffect              = UIBlurEffect(style: .Light)
    var blurEffectView          = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame        = frame
    var transparentWhiteView    = UIView(frame: frame)
    transparentWhiteView.backgroundColor = UIColor(white: 1.0, alpha: 0.30)
    var viewsArray              = [imageView, blurEffectView, transparentWhiteView]

    for index in 0..<viewsArray.count {
        if let oldView = self.view.viewWithTag(index + 1) {
            var oldView         = self.view.viewWithTag(index + 1)
            // Must explicitly unwrap oldView to access its removeFromSuperview() method as of Xcode 6 Beta 5
            oldView!.removeFromSuperview()
        }
        var viewToInsert        = viewsArray[index]
        self.view.insertSubview(viewToInsert, atIndex: index + 1)
        viewToInsert.tag        = index + 1
    }
}
2
Durul Dalkanat

Fand ich das durch Zufall, gibt mir wirklich großartige (fast mit Apple vergleichbare) Ergebnisse und verwendet das Acceleration-Framework. - http://Pastebin.com/6cs6hsyQ * Nicht von mir geschrieben

2
Jake

UIImageEffects verwenden

Für Benutzer, die mehr Kontrolle wünschen, können Sie den UIImageEffects-Beispielcode von Apple verwenden. 

Sie können den Code für UIImageEffects aus der Apple Developer Library kopieren: Verwischen und Tönen eines Bildes

Und so wird es angewendet:

#import "UIImageEffects.h"
...

self.originalImageView.image = [UIImageEffects imageByApplyingLightEffectToImage:[UIImage imageNamed:@"yourImage.png"]];
1
Zakaria Braksa

Eine wichtige Ergänzung zur Antwort von @ Joey

Dies gilt für eine Situation, in der Sie einen unscharfen Hintergrund UIViewController mit UINavigationController präsentieren möchten.

// suppose you've done blur effect with your presented view controller
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController];

// this is very important, if you don't do this, the blur effect will darken after view did appeared
// the reason is that you actually present navigation controller, not presented controller
// please note it's "OverFullScreen", not "OverCurrentContext"
nav.modalPresentationStyle = UIModalPresentationOverFullScreen;

UIViewController *presentedViewController = [[UIViewController alloc] init]; 
// the presented view controller's modalPresentationStyle is "OverCurrentContext"
presentedViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[presentingViewController presentViewController:nav animated:YES completion:nil];

Genießen!

1
steveluoxin

Diese Antwort basiert auf Mitja Semolics hervorragender früherer Antwort . Ich habe es in Swift 3 konvertiert, eine Erklärung zu den Ereignissen in Kommentaren hinzugefügt, es als Erweiterung eines UIViewControllers definiert, sodass jeder VC es nach Belieben aufrufen kann, eine unscharfe Ansicht hinzugefügt, um die selektive Anwendung anzuzeigen, und eine Completion-Block, damit der aufrufende View-Controller nach Beendigung der Unschärfe alles tun kann, was er will.

    import UIKit
//This extension implements a blur to the entire screen, puts up a HUD and then waits and dismisses the view.
    extension UIViewController {
        func blurAndShowHUD(duration: Double, message: String, completion: @escaping () -> Void) { //with completion block
            //1. Create the blur effect & the view it will occupy
            let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
            let blurEffectView = UIVisualEffectView()//(effect: blurEffect)
            blurEffectView.frame = self.view.bounds
            blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        //2. Add the effect view to the main view
            self.view.addSubview(blurEffectView)
        //3. Create the hud and add it to the main view
        let hud = HudView.getHUD(view: self.view, withMessage: message)
        self.view.addSubview(hud)
        //4. Begin applying the blur effect to the effect view
        UIView.animate(withDuration: 0.01, animations: {
            blurEffectView.effect = blurEffect
        })
        //5. Halt the blur effects application to achieve the desired blur radius
        self.view.pauseAnimationsInThisView(delay: 0.004)
        //6. Remove the view (& the HUD) after the completion of the duration
        DispatchQueue.main.asyncAfter(deadline: .now() + duration) {
            blurEffectView.removeFromSuperview()
            hud.removeFromSuperview()
            self.view.resumeAnimationsInThisView()
            completion()
        }
    }
}

extension UIView {
    public func pauseAnimationsInThisView(delay: Double) {
        let time = delay + CFAbsoluteTimeGetCurrent()
        let timer = CFRunLoopTimerCreateWithHandler(kCFAllocatorDefault, time, 0, 0, 0, { timer in
            let layer = self.layer
            let pausedTime = layer.convertTime(CACurrentMediaTime(), from: nil)
            layer.speed = 0.0
            layer.timeOffset = pausedTime
        })
        CFRunLoopAddTimer(CFRunLoopGetCurrent(), timer, CFRunLoopMode.commonModes)
    }
    public func resumeAnimationsInThisView() {
        let pausedTime  = layer.timeOffset

        layer.speed = 1.0
        layer.timeOffset = 0.0
        layer.beginTime = layer.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
    }
}

Ich habe bestätigt, dass es sowohl mit iOS 10.3.1 als auch mit iOS 11 funktioniert

1

Hier ist eine einfache Möglichkeit, benutzerdefinierte Weichzeichnungen hinzuzufügen, ohne mit privaten APIs mit UIViewPropertyAnimator zu feilschen:

Deklarieren Sie zunächst die Klasseneigenschaft:

var blurAnimator: UIViewPropertyAnimator!

Stellen Sie dann Ihre Unschärfeansicht in viewDidLoad() ein:

let blurEffectView = UIVisualEffectView()
blurEffectView.backgroundColor = .clear
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

blurAnimator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [blurEffectView] in
    blurEffectView.effect = UIBlurEffect(style: .light)
}

blurAnimator.fractionComplete = 0.15 // set the blur intensity.    

Hinweis: Diese Lösung ist nicht für UICollectionView/UITableView Zellen geeignet

1
Adam Bardon

Apple hat eine Erweiterung für die UIImage-Klasse mit der Bezeichnung UIImage + ImageEffects.h bereitgestellt. In dieser Klasse haben Sie die gewünschten Methoden, um Ihre Ansicht zu verwischen

1
Preet

Swift 3 Version von Kevs Antwort auf unscharfes Bild -

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;
    }
0
Pramod

Hier ist der Swift 2.0-Code für die in akzeptierte Antwort bereitgestellte Lösung:

    //only apply the blur if the user hasn't disabled transparency effects
    if !UIAccessibilityIsReduceTransparencyEnabled() {
        self.view.backgroundColor = UIColor.clearColor()

        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        //always fill the view
        blurEffectView.frame = self.view.bounds
        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]

        self.view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed
    } else {
        self.view.backgroundColor = UIColor.blackColor()
    }
0
RaptoX

Wenn eine dunkle Unschärfeansicht für tableView hinzugefügt wird, wird dies auf folgende Weise möglich:

tableView.backgroundColor = .clear
let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = tableView.bounds
blurEffectView.autoresizingMask = [.flexibleHeight, .flexibleWidth]


// Assigning blurEffectView to backgroundView instead of addSubview to tableView makes tableView cell not blocked by blurEffectView 
tableView.backgroundView = blurEffectView
0
Ciao

Swift 4.2:

Einfachste Möglichkeit, den Unschärfeeffekt auf einem Video oder Bild anzuzeigen.

1) Verwenden Sie UICustomBlurEffect, um den benutzerdefinierten Wert für den Weichzeichnungsradius wie unten gezeigt festzulegen.

2) Denken Sie daran, den Unschärfewert einzustellen, bevor Sie ihn zu UIVisualEffectView hinzufügen. Andernfalls wird Ihr Unschärfewert nicht für die Ansicht festgelegt.

3) Sie können es auch für das Abbild oder die Live-Unschärfe von PlayerLayer verwenden.

Ich hoffe es hilft :)

    let blurEffect = (NSClassFromString("_UICustomBlurEffect") as! UIBlurEffect.Type).init()
 //Don't Forget to set blurValue before adding it to View
    blurEffect.setValue(15, forKey: "blurRadius")

    let blurView = UIVisualEffectView(effect: blurEffect)

//Add blur View on top of any view you want to blur
    view.insertSubview(blurView!, at: 1)
0
Him bhatt

Sie können Ihre Hintergrundunschärfe direkt mit "Visuelle Effektansicht mit Unschärfe" und "Visuelle Effektansicht mit Unschärfe und Lebendigkeit" erzeugen.

Alles, was Sie tun müssen, um Blur Background in iOS Application zu erstellen, ist ...

  1. Suchen Sie in der Objektbibliothek nach "Visual Effect View with Blur"

Schritt 1 Bild

  1. Ziehe die "Visual Effect View with Blur" in dein Storyboard und richte sie ein ...

Schritt 2 Bild

  1. Endlich ... Sie verwischen Ihren App-Hintergrund!

Anwendungslayout vor dem Klicken auf einen Button!

Anwendungsansicht nach dem Klicken auf die Schaltfläche, die die gesamte Anwendung Hintergrundunschärfe macht!

0
Meet Patel