Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK
Code

Blur-Effekte auf iOS hinzufügen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Einführung

Mit iOS 7 haben wir eine Verschiebung in Apples Design-Paradigma für mobile Geräte gesehen. Sie haben nicht nur das sogenannte flache Design übernommen, Apple hat diesem Muster auch einige Elemente hinzugefügt. Eine dieser Ergänzungen ist die Verwendung von verschwommen-transluzenten Hintergründen, um den Begriff der Tiefe und des Kontextes zu vermitteln. Nehmen Sie Control Center zum Beispiel, es verwischt den Inhalt der Ansicht dahinter, wenn es hochgezogen wird. Dies gibt dem Benutzer das Gefühl, dass er über anderen Inhalten auf dem Bildschirm positioniert ist und Fokus verdient. Dies geschieht, ohne dass der Nutzer den Überblick verliert, wo er in der App ist.

Obwohl Unschärfe und Transluzenz im gesamten Betriebssystem auf iOS 7 verwendet werden, stellt das iOS SDK keine APIs zur Verfügung, um einen ähnlichen Effekt zu erzielen. In diesem Tutorial werde ich Sie durch einige Methoden führen, um unscharfe Ansichten zu erstellen, indem Sie die unten gezeigte Beispiel-App erstellen.

Unsere Beispiel-App hat unten eine Ansicht, die durch Hochziehen angezeigt werden kann. Die Ansicht ist transparent und verwischt den darunter liegenden Inhalt in der Ansichtshierarchie, ähnlich dem Kontrollzentrum auf iOS 7.

1. Projekteinrichtung

Überblick

Die App, die wir erstellen werden, zeigt ein Foto mit dem Namen und dem Autor des Fotos, die in einem weißen Kreis angezeigt werden. Es wird auch eine kleine rechteckige Ansicht am unteren Bildschirmrand geben, die das Foto verwischt und die hochgezogen werden kann, um zusätzliche Informationen über das Foto anzuzeigen.

Ich gehe davon aus, dass Sie bereits mit grundlegenden Elementen der Benutzeroberfläche wie Ansichten, Bildansichten und Bildlaufansichten arbeiten können. In diesem Tutorial konzentrieren wir uns auf die Ansichtshierarchie und die Ansichten, die wir zum Erstellen des Unschärfeeffekts benötigen.

Schauen Sie sich das obige Bild an. Es zieht die Ansichtshierarchie auseinander, um den Unschärfeeffekt zu erzeugen, nach dem wir suchen. Die Schlüsselkomponenten sind:

  • Hintergrundansicht: In dieser Ansicht werden das Foto und die Credits angezeigt. Das ist die Ansicht, die wir verschwimmen lassen.
  • Unscharfes Bild: Diese Ansicht enthält eine unscharfe Version des Inhalts der Hintergrundansicht.
  • Ansichtsmaske: Die Ansichtsmaske ist eine undurchsichtige Ansicht, mit der wir das unscharfe Bild maskieren.
  • Scroll-Ansicht: Die Scroll-Ansicht ist die Ansicht, die zusätzliche Informationen zum Foto enthält. Der Versatz der Bildlaufansicht wird verwendet, um die Höhe der Maskenansicht zu vergrößern oder zu verkleinern. Dies führt dazu, dass das unscharfe Bild sich als Reaktion auf das Scrollen der Bildlaufansicht offenbart.

Ressourcen

Alle für dieses Lernprogramm erforderlichen Bilder, Frameworks und anderen Dateien sind in den Quelldateien dieses Lernprogramms enthalten. Klonen Sie das Repository von GitHub oder laden Sie die Quelldateien herunter.

2. Erstellen der Benutzeroberfläche

1. Übersicht

Öffnen Sie RootViewController.m in Xcode und werfen Sie einen Blick auf die Methode loadView. Sie können die Funktionsweise der Benutzeroberfläche aus der Vogelperspektive betrachten, indem Sie sich die Implementierung dieser Methode ansehen. In unserer Anwendung gibt es drei Hauptteilansichten:

  • Kopfzeilenansicht: Zeigt den Namen der Anwendung an
  • Inhaltsansicht: Zeigt das Foto und die Credits an
  • Scroll-Ansicht: Enthält zusätzliche Informationen zu einer scrollbaren unscharfen Ansicht

Anstatt die loadView - Methode mit der Initialisierung und Konfiguration der Untersichten zu überfrachten, werden Hilfsmethoden verwendet, um das Heavy-Lifting durchzuführen:

2. Erstellen der Kopfzeile

Die Kopfansicht enthält ein transluzentes Rechteck und eine Beschriftung mit dem Namen der Anwendung.

3. Erstellen der Inhaltsansicht

In der Inhaltsansicht wird das Foto angezeigt. Außerdem enthält es die Bildnachweise in einem weißen Kreis.

4. Erstellen der Bildlaufansicht

Die Bildlaufansicht enthält zusätzliche Informationen zum Foto und eine unscharfe Version des Fotos. Die Bildlaufansicht ist ungefähr doppelt so lang wie der Bildschirm, wobei die untere Hälfte die Textansicht und die Bildansicht enthält. Wenn Sie den Bildlauf in der Bildlaufansicht aktivieren, wird der Inhalt der Bildlaufansicht je nach dem Versatz der Bildlaufansicht am oberen oder unteren Rand der Ansicht ausgerichtet.

3. Einen Schnappschuss machen

Um eine Ansicht zu verwischen, müssen wir zuerst einen Schnappschuss des Inhalts machen und ihn in Form eines Bildes bereithalten. Wir können dann das Bild verwischen und es als Hintergrund einer anderen Ansicht verwenden. Sehen wir uns zunächst an, wie wir eine Momentaufnahme des Inhalts eines UIView - Objekts erstellen können.

In iOS 7 hat Apple UIView eine neue Methode hinzugefügt, um Snapshots des Inhalts einer Ansicht zu erstellen: drawViewHierarchyInRect:afterScreenUpdates:. Diese Methode erstellt eine Momentaufnahme des Inhalts der Ansicht, einschließlich aller darin enthaltenen Unteransichten.

Definieren wir eine Methode in der ViewController - Klasse, die ein UIView - Objekt akzeptiert und einen UIImage, einen Snapshot des Inhalts der Ansicht, zurückgibt.

Schritt 1: Beginnen Sie einen neuen Bildkontext

Ein Bildkontext ist ein Bitmap-basierter Grafikkontext, mit dem Sie Bilder zeichnen und bearbeiten können. Die neue Methode von UIView drawViewHierarchyInRect:afterScreenUpdates: rasterisiert die UIView und zeichnet ihre Inhalte in den aktuellen Bildkontext.

Das bedeutet, dass wir vor dem Aufruf dieser Methode zuerst einen neuen Bildkontext erstellen müssen, indem wir UIGraphicsBeginImageContext aufrufen und die erforderliche Größe für den Bildkontext übergeben.

Schritt 2: Schnappschuss machen

Wenn der Bildkontext eingerichtet ist, können wir die Methode drawViewHierarchyInRect:afterScreenUpdates: der Ansicht aufrufen. Das zweite Argument gibt an, ob der Snapshot den aktuellen Inhalt der Ansicht enthalten oder vor dem Erstellen des Snapshots alle letzten Änderungen enthalten muss.

Schritt 3: Bild aus Bildkontext erstellen

Wir können den Inhalt des Bildkontextes, den Schnappschuss der Ansicht, durch Aufruf von UIGraphicsGetImageFromCurrentImageContext abrufen. Diese Funktion gibt ein UIImage - Objekt zurück.

Schritt 4: Bildkontext beenden

Nach dem Erstellen des Snapshots entfernen wir den Grafikkontext vom Stapel, indem Sie UIGraphicsEndImageContext aufrufen.

4. Unschärfe des Schnappschusses

Sobald Sie den Schnappschuss haben, können wir ihn mit einer Reihe von Techniken verwischen. In diesem Tutorial werde ich drei Techniken behandeln:

  • Verwischen mit dem Core Image Framework
  • Verwischen mit Brad Larson GPUImage Framework
  • Verwischen mit Apples UIImage+ImageEffects - Kategorie

Option 1: Kernbild

Core Image ist ein von Apple entwickeltes und gewartetes Bildverarbeitungs - Framework. Es verwendet einen GPU oder CPU-Rendering-Pfad, um Bilder nahezu in Echtzeit zu verarbeiten.

Core Image bietet uns eine Vielzahl von Filtern, mit denen Sie Vorgänge ausführen können, die vom Ändern des Farbtons oder der Sättigung eines Bildes bis zur Gesichtserkennung reichen.

CIGaussianBlur ist einer der Filter im Core Image-Framework und kann verwendet werden, um Bilder zu verwischen. Ein Bild mit Core Image zu verwischen ist ziemlich einfach, wie Sie unten sehen können.

Lassen Sie uns den obigen Codeblock durchbrechen:

  • Wir erstellen zuerst ein CImage - Objekt aus dem UIImage - Objekt. Beim Arbeiten mit dem Core Image Framework werden Bilder durch CIImage - Objekte dargestellt.
  • Je nach Weichzeichnerradius wird das Bild durch Anwendung einer Gaußschen Unschärfe auf ein Bild leicht verkleinert. Um dieses Problem zu umgehen, dehnen wir das Bild ein wenig aus, indem wir einen anderen filter, CIAffineClamp, anwenden, bevor wir den Gaußschen Unschärfefilter anwenden.
  • Dann nehmen wir die Ausgabe und übergeben sie zusammen mit einem Weichzeichner-Radius von 30 an den Filter CIGaussianBlur.
  • Wir könnten die Ausgabe nehmen, sie in ein CGImage konvertieren und in unserer Anwendung verwenden. Allerdings fügen wir dem Bild einen weißen Farbton hinzu, um sicherzustellen, dass die Beschreibung des Fotos deutlich lesbar ist. Um einen weißen Farbton hinzuzufügen, fügen wir eine halbtransparente weiße Füllung über dem Bild hinzu. Dazu erstellen wir einen neuen Bildkontext und füllen ihn mit einer weißen Farbe mit einem Alpha-Wert von 0.2.
  • Wie wir bereits gesehen haben, erhalten wir dann ein UIImage - Objekt aus dem Bildkontext und verfügen über den Bildkontext.

Option 2: GPUImage

GPUImage ist ein Open-Source-iOS-Framework für die Bild- und Videoverarbeitung, das von Brad Larson erstellt und gewartet wird. Es enthält eine Sammlung von GPU-beschleunigten Filtern, die auf Bilder, Live-Kamera-Videos und Filme angewendet werden können.

Das GPUImage-Framework ist in den Quelldateien dieses Tutorials enthalten, aber das Hinzufügen des Frameworks zu Ihren eigenen Projekten ist sehr einfach:

  1. Beginnen Sie mit dem Herunterladen des Frameworks oder klonen Sie das Repository von GitHub.
  2. Öffnen Sie ein Terminalfenster, navigieren Sie zum Ordner GPUImage und führen Sie das Buildskript build.sh aus, um das Framework zu kompilieren.
  3. Kopieren Sie das GPUImage.framework aus dem build - Ordner in den Projektordner und ziehen Sie es dann in den Projektnavigator.
  4. Sie können dann das GPUImage-Framework in Ihrem Projekt verwenden, indem Sie die Frameworks-Header #import<GPUImage/GPUImage.h>.

Das GPUImage-Framework enthält ähnliche Filter wie im Core Image-Framework. Für unsere Beispielanwendung interessieren uns zwei Filter, GPUImageGaussianBlurFilter und GPUImageiosBlurFilter.

Wie Sie sehen, sind GPUImage-Filter einfacher zu verwenden als die des Core Image-Frameworks. Nach der Initialisierung des Filterobjekts müssen Sie lediglich den Filter konfigurieren und mit einem Bild versehen, auf das der Filter angewendet werden soll. Die imageByFilteringImage: Methode gibt ein UIImage - Objekt zurück.

Anstelle der GPUImageGaussianblur - Klasse können Sie auch die GPUImageiOSblur - Klasse wie folgt verwenden:

Die GPUImageiOSblur - Klasse repliziert den Unschärfeeffekt, den Sie in Control Center unter iOS 7 sehen können. Anders als bei der Core-Image-Methode müssen Sie also keinen zusätzlichen Code schreiben, um das verschwommene Bild zu tönen.

Option 3: UIImage+ImageEffects

Während der letztjährigen WWDC hat Apple einen Vortrag über Core Image-Effekte und - Techniken gehalten, in denen sie eine Kategorie namens ImageEffects auf UIImage eingeführt haben. Die Kategorie ImageEffects verwendet Apples leistungsstarkes vImage - Bildverarbeitungs-Framework, das Teil des Accelerate - Frameworks ist, um die erforderlichen Berechnungen durchzuführen. Dies macht es eine schnelle und einfache Möglichkeit, Unschärfe auf iOS durchzuführen.

Die Kategorie fügt die folgenden Methoden der UIImage - Klasse hinzu:

  • applyLightEffect
  • applyExtraLightEffec
  • applyDarkEffect
  • applyTintEffectWithColor:
  • applyBlurWithRadius:tintColor:saturationDeltaFactor:maskImage:

Diese Methoden können direkt auf einem Bild aufgerufen werden, um den gewünschten Unschärfeeffekt zu erzielen. Die Methode applyBlurWithRadius:tintColor:saturationDeltaFactor:maskImage:akzeptiert eine Reihe von Argumenten, mit denen Sie die Unschärfeoperation optimieren können.

Sie können Apples ImageEffects - Beispielprojekt von der Apple-Entwickler-Website herunterladen und in Ihren Projekten verwenden.

5. Maskierung des unscharfen Bildes

In der Beispiel-App scheint es, als würden wir das Foto dynamisch verwischen, aber das ist nicht der Fall. Wir benutzen einen kleinen Trick namens Maskierung. Anstatt ständig Schnappschüsse zu machen und sie zu verschwimmen, um den gewünschten Effekt zu erzielen, nehmen wir nur einen Schnappschuss auf, verwischen ihn und verwenden ihn in Kombination mit einer Maske.

Wie in der Abbildung zu Beginn dieses Tutorials gezeigt, richten wir die unscharfe Ansicht auf die darunter liegende Hintergrundansicht aus. Wir erstellen dann eine weitere Ansicht mit einer Höhe von 50 Punkten und einem undurchsichtigen Hintergrund und platzieren sie am unteren Bildschirmrand. Wir verwenden diese Ansicht, um das unscharfe Bild zu maskieren.

Wir aktualisieren dann den Rahmen der Maskenansicht, während die Bildlaufansicht gescrollt wird. Dazu implementieren wir eine der Delegate-Methoden des UIScrollViewDelegate Protokolls, scrollViewDidScroll:, und aktualisieren den Maskenrahmen in Bezug auf den vertikalen Inhaltsoffset der Bildlaufansicht.

Durch das Aktualisieren der Maske scheint es, als würden wir das Foto unterhalb der Bildlaufansicht dynamisch verwischen. Das ist es. Sie haben jetzt einen schönen Unschärfeeffekt, ähnlich dem, den Sie im Kontrollzentrum von iOS sehen.

6. Leistung

Unter Berücksichtigung der oben genannten Techniken fragen Sie sich vielleicht, welcher in Bezug auf die Leistung der Beste ist. Um Ihnen bei der Entscheidung zu helfen, habe ich einige Tests mit einem iPhone 5S und 5C durchgeführt. Schauen Sie sich die folgenden Grafiken an.

Diese Graphen sagen uns folgendes:

  • Das GPUImage-Framework ist aufgrund seiner langsameren GPU am langsamsten auf dem iPhone 5C. Dies ist nicht überraschend, da das Framework stark von der GPU abhängt.
  • Die Kategorie "ImageEffects" schneidet auf beiden Geräten am besten ab. Es ist auch interessant zu sehen, dass die für die Unschärfe eines Bildes benötigte Zeit mit dem Unschärfe-Radius zunimmt.

Während das Verwischen von Bildern auf dem iPhone 5S nie länger als 220 ms dauerte, benötigte das iPhone 5C bis zu 1,3 Sekunden, um die gleiche Aufgabe auszuführen. Dies zeigt deutlich, dass Blur-Effekte sinnvoll und sparsam eingesetzt werden sollten.

Um die Zeit zu verringern, die zum Weichzeichnen eines Bildes benötigt wird, können Sie die Größe des Schnappschusses, auf den der Weichzeichnungsfilter angewendet wird, verringern. Da wir eine Unschärfe machen und die feineren Details des Bildes sowieso nicht sichtbar sind, können wir das Bild verkleinern, ohne Probleme zu bekommen. Um einen kleineren Schnappschuss zu machen, aktualisieren wir die Implementierung der takeSnapshotOfView: Methode wie folgt:

Um die Zeit, die zum Verwischen des Schnappschusses benötigt wird, weiter zu reduzieren, können wir alternative Techniken zur Unschärfe verwenden, z. B. eine Box-Unschärfe. Auch wenn das Ergebnis anders ist als bei einer Gauß'schen Unschärfe, dauert es weniger Zeit, um ein Bild mit einer Unschärfe zu verwischen.

Fazit

Blur ist definitiv eine großartige Ergänzung für das User Interface Design auf iOS. Unabhängig davon, wie großartig die Benutzeroberfläche Ihrer Anwendung aussieht, werden Blur-Effekte Ihre Anwendung jedoch nicht verbessern, wenn sie nicht gut funktioniert.

Basierend auf den oben genannten Leistungsmetriken sehen wir, dass Unschärfe in der Tat ein kostspieliger Effekt ist. Durch die Optimierung der Parameter wie Weichzeichnerradius und Bildgröße, Auswahl der richtigen Unschärfetechnik und Verwendung einiger Tricks können wir jedoch sehr interessante Effekte erzielen, ohne die Leistung der Anwendung zu beeinträchtigen.

In iOS 8 hat Apple UIVisualEffectView eingeführt, mit dem Entwickler Blur und Vibrationseffekte sehr einfach auf Ansichten anwenden können. Wenn Sie nicht warten können, bis iOS 8 offiziell veröffentlicht wird, können Sie diese Effekte testen, indem Sie die Beta von Xcode 6 herunterladen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.