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, dort aber nichts gefunden.
ios
objective-c
graphics
filtering
core-image
kondratyevdev
quelle
quelle
Antworten:
Mit
UIVisualEffectView
diesem Effekt können Sie diesen Effekt erzielen. Dies ist eine native API, die hinsichtlich Leistung und hervorragender Akkulaufzeit optimiert wurde. Außerdem ist sie einfach zu implementieren.Schnell:
Ziel c:
Wenn Sie diesen Ansichts-Controller modal präsentieren, um den zugrunde liegenden Inhalt zu verwischen, müssen Sie den modalen Präsentationsstil auf Über aktuellen Kontext setzen und die Hintergrundfarbe auf Löschen setzen, um sicherzustellen, dass der zugrunde liegende Ansichts-Controller sichtbar bleibt, sobald dieser über dem Bildschirm angezeigt wird.
quelle
insertSubView:belowSubView:
Kommentars in diesem Code habe ich Folgendes verwendet, um die Unschärfe als Hintergrund für die Ansichtview.insertSubview(blurEffectView, atIndex: 0)
UIAccessibilityIsReduceTransparencyEnabled()
.Kernbild
Da das Bild im Screenshot statisch ist, können Sie es
CIGaussianBlur
von Core Image aus verwenden (erfordert iOS 6). Hier ist ein Beispiel: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.mWohlgemerkt, dies ist langsamer als die anderen Optionen auf dieser Seite.
Stapelunschärfe (Box + Gauß)
Framework beschleunigen
In der Sitzung „Implementieren der Benutzeroberfläche unter iOS“ von WWDC 2013 erklärt Apple, wie ein unscharfer Hintergrund erstellt wird (um 14:30 Uhr), und erwähnt eine Methode,
applyLightEffect
die im Beispielcode mithilfe von Accelerate.framework implementiert ist.GPUImage verwendet OpenGL-Shader, um dynamische Unschärfen zu erstellen. Es gibt verschiedene Arten von Unschärfen: GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter. Es gibt sogar einen GPUImageiOSBlurFilter, der „den vom iOS 7-Kontrollfeld bereitgestellten Unschärfeeffekt vollständig replizieren sollte“ ( Tweet , Artikel ). Der Artikel ist detailliert und informativ.
Von indieambitions.com: Führen Sie mit vImage eine Unschärfe durch . Der Algorithmus wird auch in iOS-RealTimeBlur verwendet .
Von Nick Lockwood: https://github.com/nicklockwood/FXBlurView Das Beispiel zeigt die Unschärfe über einer Bildlaufansicht. Es verwischt mit dispatch_async und wird dann synchronisiert, um Aktualisierungen mit UITrackingRunLoopMode aufzurufen, damit die Unschärfe nicht verzögert wird, wenn UIKit dem Bildlauf in UIScrollView mehr Priorität einräumt. Dies wird in Nicks Buch iOS Core Animation erklärt , das übrigens großartig ist.
iOS-Unschärfe Hiermit wird die Unschärfeebene der UIToolbar an eine andere Stelle verschoben. 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 . Toller Code und eine tolle Lektüre. Einige Ideen aus diesem Beitrag:
Andere Sachen
Andy Matuschak sagte auf Twitter: "Wissen Sie, viele Orte, an denen es so aussieht, als würden wir es in Echtzeit tun, sind statisch mit cleveren Tricks."
Auf doubleencore.com heißt es: „Wir haben festgestellt, dass ein Unschärferadius von 10 pt plus eine Erhöhung der Sättigung um 10 pt den Unschärfeeffekt von iOS 7 unter den meisten Umständen am besten nachahmt.“
Ein Blick auf die privaten Header von Apples SBFProceduralWallpaperView .
Schließlich ist dies keine echte Unschärfe, aber denken Sie daran, dass Sie rasterizationScale festlegen können, um ein pixeliges Bild zu erhalten: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/
quelle
UIImage
sonst wird es auf einem Retina-Gerät viel zu groß aussehen ...Ich habe beschlossen, eine schriftliche Objective-C-Version aus der akzeptierten Antwort zu veröffentlichen, um mehr Optionen in dieser Frage bereitzustellen.
Die Einschränkungen können entfernt werden, wenn Sie Incase möchten, wenn Sie nur den Hochformatmodus unterstützen, oder wenn ich dieser Funktion einfach ein Flag hinzufüge, um sie zu verwenden oder nicht.
quelle
Ich glaube nicht, dass ich den Code posten darf, aber der obige Beitrag, in dem der WWDC-Beispielcode erwähnt wird, ist korrekt. Hier ist der Link: https://developer.apple.com/downloads/index.action?name=WWDC%202013
Die gesuchte Datei ist die Kategorie in UIImage und die Methode ist applyLightEffect.
Wie ich oben in einem Kommentar erwähnt habe, hat der Apple Blur eine Sättigung und andere Dinge außer Unschärfe. Eine einfache Unschärfe reicht nicht aus ... wenn Sie ihren Stil emulieren möchten.
quelle
Ich denke, die einfachste Lösung hierfür ist das Überschreiben der UIToolbar, die in iOS 7 alles dahinter verwischt. Es ist ziemlich hinterhältig, aber für Sie sehr einfach zu implementieren und schnell!
Sie können es mit jeder Ansicht tun, machen Sie es einfach zu einer Unterklasse von
UIToolbar
stattUIView
. Sie können dies sogar mitUIViewController
derview
Eigenschaft eines tun , zum Beispiel ...1) Erstellen Sie eine neue Klasse, die eine "Unterklasse von" ist,
UIViewController
und aktivieren Sie das Kontrollkästchen für "Mit XIB für Benutzeroberfläche".2) Wählen Sie die Ansicht und gehen Sie zum Identitätsinspektor im rechten Bereich (Alt-Befehl-3). Ändern Sie die "Klasse" in
UIToolbar
. Gehen Sie nun zum Attributinspektor (Alt-Befehl-4) und ändern Sie die Farbe "Hintergrund" in "Farbe löschen".3) Fügen Sie der Hauptansicht eine Unteransicht hinzu und verbinden 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
).4) Gehen Sie zur View Controller Implementation (
.m
) - Datei und ändern Sie die-viewDidLoad
Methode wie folgt:Dadurch erhalten Sie eine dunkelgraue Ansicht, die alles dahinter verwischt. Kein lustiges Geschäft, keine langsame Unschärfe des Kernbilds, mit allem, was Ihnen vom OS / SDK zur Verfügung gestellt wird.
Sie können die Ansicht dieses Ansichtscontrollers wie folgt zu einer anderen Ansicht hinzufügen:
Lassen Sie mich wissen, wenn etwas unklar ist, ich helfe Ihnen gerne weiter!
Bearbeiten
Die UIToolbar wurde in 7.0.3 geändert, um bei Verwendung einer farbigen Unschärfe einen möglicherweise unerwünschten Effekt zu erzielen.
Früher konnten wir die Farbe mit einstellen
barTintColor
, aber wenn Sie dies zuvor getan haben, müssen Sie die Alpha-Komponente auf weniger als 1 einstellen. Andernfalls hat Ihre UIToolbar eine vollständig undurchsichtige Farbe - ohne Unschärfe.Dies kann wie folgt erreicht werden: (unter Berücksichtigung
self
einer Unterklasse vonUIToolbar
)Dies verleiht der unscharfen Ansicht einen bläulichen Farbton.
quelle
self.backgroundColorView.opaque = NO;
self.backgroundColorView.alpha = 0.5;
self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
Aber der Hintergrund ist nicht unscharf, machen Sie einfach einen schönen Übereffekt. Trotzdem danke!Hier ist eine schnelle Implementierung in Swift mit CIGaussianBlur:
quelle
Benutzerdefinierte Unschärfeskala
Sie können
UIVisualEffectView
mit benutzerdefinierten Einstellungen versuchen , wie -Ausgabe: - für
blurEffect.setValue(1...
&blurEffect.setValue(2..
quelle
(NSClassFromString("_UICustomVibrancyEffect") as! UIVibrancyEffect.Type).init()
Würde mich sehr über Hilfe freuen!Mit UIViewPropertyAnimator können Sie auf einfache Weise benutzerdefinierte Unschärfen hinzufügen, ohne mit privaten APIs zu feilschen :
Deklarieren Sie zunächst die Klasseneigenschaft:
Stellen Sie dann Ihre Unschärfeansicht ein in
viewDidLoad()
:Hinweis: Diese Lösung ist nicht für
UICollectionView
/UITableView
Zellen geeignetquelle
Mit Xcode können Sie es einfach tun. Befolgen Sie die Schritte von xcode. Drage visuelle Effektansicht auf Ihrer uiview oder Bildansicht.
Viel Spaß beim Codieren :)
quelle
Die akzeptierte Antwort ist korrekt, aber hier fehlt ein wichtiger Schritt, falls diese Ansicht - für die Sie einen unscharfen Hintergrund wünschen - mit dargestellt wird
[self presentViewController:vc animated:YES completion:nil]
Standardmäßig wird dadurch die Unschärfe aufgehoben, da UIKit die Ansicht des Präsentators entfernt, die Sie tatsächlich verwischen. Um dieses Entfernen zu vermeiden, fügen Sie diese Zeile vor der vorherigen hinzu
vc.modalPresentationStyle = UIModalPresentationOverFullScreen;
Oder verwenden Sie andere
Over
Stile.quelle
ZIEL C
SWIFT 3.0
von: https://stackoverflow.com/a/24083728/4020910
quelle
Verwenden von UIImageEffects
Für Leute, 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 Abtönen eines BildesUnd so wenden Sie es an:
quelle
quelle
Ich habe dies zufällig gefunden, habe wirklich großartige (fast doppelte Ergebnisse mit Apples) erzielt und verwende das Acceleration-Framework. - http://pastebin.com/6cs6hsyQ * Nicht von mir geschrieben
quelle
Diese Antwort basiert auf der hervorragenden früheren Antwort von Mitja Semolic . Ich habe es in Swift 3 konvertiert, eine Erklärung zu den Ereignissen in Kommentaren hinzugefügt, es zu einer Erweiterung eines UIViewControllers gemacht, damit jeder VC es nach Belieben aufrufen kann, eine unscharfe Ansicht hinzugefügt, um eine selektive Anwendung anzuzeigen, und einen Abschlussblock hinzugefügt, damit Der aufrufende Ansichts-Controller kann nach Abschluss der Unschärfe tun, was er will.
Ich habe bestätigt, dass es sowohl mit iOS 10.3.1 als auch mit iOS 11 funktioniert
quelle
Eine wichtige Ergänzung zu @ Joeys Antwort
Dies gilt für eine Situation , in der Sie einen verschwommenen-Hintergrund präsentieren mögen
UIViewController
mitUINavigationController
.Genießen!
quelle
Swift 3 Version von Kevs Antwort auf die Rückgabe eines unscharfen Bildes -
quelle
Code 2019
Hier ist ein ausführlicheres Beispiel mit der erstaunlichen @ AdamBardon-Technik.
{Nebenbei: Als allgemeine technische Angelegenheit für iOS ist sie
didMoveToWindow
möglicherweise besser für Sie geeignet alsdidMoveToSuperview
. Zweitens können Sie den Teardown auf eine andere Weise ausführen, aber der Teardown besteht aus den beiden dort gezeigten Codezeilen.}BlurryBall
ist nur einUIVisualEffectView
. Beachten Sie die Eingaben für eine visuelle Effektansicht. Wenn Sie abgerundete Ecken oder was auch immer benötigen, tun Sie dies in dieser Klasse.quelle
Apple hat eine Erweiterung für die UIImage-Klasse namens UIImage + ImageEffects.h bereitgestellt. In dieser Klasse haben Sie die gewünschten Methoden, um Ihre Ansicht zu verwischen
quelle
Hier ist der Swift 2.0-Code für die Lösung, die in der akzeptierten Antwort bereitgestellt wurde :
quelle
Wenn Sie eine dunkle Unschärfeansicht für tableView hinzufügen, wird dies auf wunderbare Weise Folgendes bewirken:
quelle
Sie können Ihre Hintergrundunschärfe direkt mit "Visuelle Effektansicht mit Unschärfe" und "Visuelle Effektansicht mit Unschärfe und Lebendigkeit" erstellen.
Alles, was Sie tun müssen, um Blur Background in der iOS-Anwendung zu erstellen, ist ...
Schritt 1 Bild
Schritt 2 Bild
Anwendungslayout vor dem Klicken auf eine Schaltfläche!
Anwendungsansicht Nach dem Klicken auf die Schaltfläche wird der gesamte Anwendungshintergrund unscharf!
quelle
Falls dies jemandem hilft, hier ist eine schnelle Erweiterung, die ich basierend auf der Antwort von Jordan H erstellt habe. Sie ist in Swift 5 geschrieben und kann aus Ziel C verwendet werden.
HINWEIS: Wenn Sie den Hintergrund eines UILabels verwischen möchten, ohne den Text zu beeinflussen, sollten Sie eine Container-UIView erstellen, das UILabel als Unteransicht zur Container-UIView hinzufügen, die Hintergrundfarbe des UILabels auf UIColor.clear setzen und dann blurBackground (Stil) aufrufen : UIBlurEffect.Style, fallbackColor: UIColor) auf dem Container UIView. Hier ist ein kurzes Beispiel dafür in Swift 5:
quelle
Swift 4:
So fügen Sie ein Overlay oder die Popup-Ansicht hinzu Sie können auch die Container-Ansicht verwenden, mit der Sie einen kostenlosen View Controller erhalten (Sie erhalten die Container-Ansicht aus der üblichen Objektpalette / Bibliothek).
Schritte:
Haben Sie eine Ansicht (ViewForContainer im Bild), die diese Containeransicht enthält, um sie zu dimmen, wenn der Inhalt der Containeransicht angezeigt wird. Schließen Sie die Steckdose im ersten View Controller an
Blenden Sie diese Ansicht aus, wenn 1st VC geladen wird
Beim Klicken auf die Schaltfläche einblenden, geben Sie hier die Bildbeschreibung ein
Um diese Ansicht zu verkleinern, wenn der Inhalt der Containeransicht angezeigt wird, setzen Sie den Hintergrund der Ansichten auf Schwarz und die Deckkraft auf 30%
Ich habe eine Antwort auf die Erstellung der Popview-Ansicht in einer anderen Stackoverflow-Frage hinzugefügt: https://stackoverflow.com/a/49729431/5438240
quelle
Die einfache Antwort lautet: Unteransicht hinzufügen und Alpha ändern.
quelle