Wie Sie erweiterte Grafiken mit Core-Animation erstellen.

Animation ist einer der Eckpfeiler der UI-Erfahrung auf iOS und dank der Animations-APIs in UIKit ist es unglaublich einfach. Wenn Sie jedoch auf die Core Animation-Ebene herunterfallen, ist es möglich, noch dynamischere und beeindruckendere Animationen zu erstellen, die dazu beitragen können, ihre Anwendung hervorzuheben. In diesem Beitrag erklären wir ihnen Konzepte, die Core Animation in iOS funktioniert, wie man mit der API arbeitet sowie Beispiele, welche Arten von Animationen und Effekten es in ihrer Anwendung ermöglichen kann.

Es wird hier in einem ersten Schritt über fortgeschrittene Grafiken mit Core Animation gehen.

Bevor wir beginnen, noch ein paar Anmerkungen:

Als Nebenprodukt arbeiten wir an einer DRM-freien Comic-Reader-App für iOS: iComics. Das Ziel ist es, Comics selbst aus dem Internet zu kaufen, sie in ihr iOS-Gerät zu stecken und sie dann überall zu lesen. Es gibt Webseiten, die dazu dienen, alte Comics, die ihren Copyright-Status verloren haben, neu zu veröffentlichen, sowie neue Seiten (z.B. Humble Bundle und Image Comics). Auf der japanischen Seite gibt es Mangatoshokan Z, wo man Comics im DRM-freien Format kaufen kann.

Es ist eine Herausforderung: Wenn Sie eine Anwendung haben, die auf Benutzereingaben basiert, können Sie in der Regel nicht sagen, in welchem Format die eingegebenen Daten vorliegen werden. Manchmal ist es klein, aber oft ist es groß und muss behandelt werden, bevor es effektiv auf einem iOS-Gerät gerendert werden kann. Daher haben wir im Laufe der Jahre viel Zeit damit verbracht, mit verschiedenen Techniken zu spielen: Bildskalierung, Bildwiedergabe und Spielen mit Core Animation, um es zum Laufen zu bringen.

In dem folgenden Beitrag möchten wir ihnen alles zeigen, was wir aus unseren Erfahrungen gelernt haben.

Hinweis: Wir freuen uns, dass wir iComics Realm verwenden konnten. Es ist auf jeden Fall eine Empfehlung wert.

Überblick.

1. Einführung in Core Animation und wie es sich von UIKit unterscheidet. Dazu gehört auch das CA-Layout-Objekt und welche Effekte Sie auf diese Ebenenobjekte anwenden können, um neue Effekte zu erzeugen (mit UIKit nicht möglich).
2. APIs: Welche APIs sind verfügbar und welche Effekte können Sie erzielen?
3. CA-Layer-Unterklassen-APIs und GPU-Level-Effekte.

Was ist Core Animation?

Core Animation ist eines meiner Lieblings-Frameworks in iOS. Die API hat sich zwischen Objective-C und Swift nicht viel verändert, aber es ist die Art von Framework, von der viele Entwickler nichts wissen, da sie bei der Entwicklung von Anwendungen nicht notwendig ist. Aber wenn man erst einmal weiß, wie man damit umgeht, kann man tolle Effekte erzielen.

Core Animation wurde in OS 10 als optionale Komponente eingeführt. Sie können sich entscheiden, wenn Sie diese Leistung für ihre Grafiken wünschen. In iOS hingegen ist es eine Ebene niedriger als UIKit, aber ein integraler Bestandteil des Systems.

Es ist das in iOS verfügbare Grafik-Rendering- und Animationssystem und ist tief in UIKit integriert. Viele Eigenschaften in UIKit, insbesondere in UIView-Objekten, werden direkt auf Eigenschaften in Core Animation abgebildet. Beide sind miteinander verbunden: Der Zugriff auf eine Eigenschaft in der einen würde die Eigenschaft in der Anderen automatisch aktualisieren.

Core Animation wird nicht auf der CPU ausgeführt. Ihre Befehle werden mehr auf den Grafikprozessor übertragen und zur Erstellung der auf dem Bildschirm angezeigten Grafiken verwendet, die von der Grafikprozessor-Hardware unterstützt werden.

Wir betrachten es gerne als eine Art Spieleentwicklung. Damals, als wir die Game-Engines modifiziert haben, war die UI auf der gleichen Hierarchie. Sie hatten eine Reihe von GPU-gestützten Quadraten und Quads auf dem Bildschirm. Das heißt, Textur-Bitmap-Polygone und Sie würden sie auf der GPU manipulieren. Wenn Sie bereits mit der Low-Level-Programmierung vertraut sind, werden ihnen viele Eigenschaften in Core Animation sicher vertraut erscheinen. Daher wird es einfacher, mit der Grafikhardware zu arbeiten, wenn man dafür Verständnis mitbringt.

Aber, ist es möglich, ein Spiel auf Core Animation zu entwickeln? Hier kann Disney in die Betrachtung miteinbezogen werden, die bereits mehrere Spiele mit Core Animation realisiert haben. Keine Game Engine, keine Unity und kein Unreal. Wenn Sie den Debugging-Modus einschalten, können Sie sogar die Ebenenformen und -transformationen in Echtzeit sehen.

Warum ist es hilfreich, sich mit Core Animation näher auseinanderzusetzen?

Dies ist kein grundlegendes Framework, auf den Sie bei der Erstellung von Apps achten müssen. Sie können funktionelle und gut gestaltete Anwendungen erstellen, ohne sie zu benötigen. Allerdings hilft es ihnen, die Qualität ihrer Anwendungen zu steigern, da Sie verstehen, was im Backend von Natur aus geschieht und wie Inhalte auf dem Bildschirm gezeichnet werden.

Dies kann von großem Nutzen sein, wenn Sie UI-Layouts erstellen, die möglicherweise komplexer als normal sind. Wenn Sie viele Effekte und Ebenen übereinander gemischt haben, kann die Leistung stark sinken, wenn Sie nicht wissen, was Sie tun oder wo die Engpässe sind. In diesem Fall können Sie, indem Sie mehr über die Funktionsweise des Systems erfahren, ihre Animationen und Grafiken optimieren, um sicherzustellen, dass ihre Anwendungen mit 60 Bildern pro Sekunde (FPS) laufen. Außerdem ist der Umfang der Funktionalität von Core Animation, die UIKit ausgesetzt ist, begrenzt. Sie können mehr tun, wenn Sie auf diese Ebene herunterfallen und selbst auf die APIs zugreifen. Es kann ihnen helfen, eine ausgefeilte Anwendung zu estellen: eine, die reibungslos funktioniert, schön aussieht und mit Effekten ausgestattet ist, die sonst nicht in der nativen Systemimplementierung enthalten wären.

Was ist mit Core Graphics?

Core Animation soll das Grafiksystem des Frameworks sein, aber es gibt auch Core Graphics.

Core Graphics wird vollständig auf der CPU und kann nicht auf der GPU ausgeführt werden. Da es sich um einen vollständig CPU-gebundenen Betrieb handelt, ist er auf älteren Geräten manchmal langsamer. Dies ist etwas, was Sie bei der Verwendung in ihren Anwendungen beachten sollten. Aber das Gute an Core Graphics ist, dass man es mit Core Animation kombinieren kann.

Sie können Core Graphics verwenden, um die eigentlichen Bitmaps zu erstellen und Core Animation verwenden, um Sie anzuzeigen, um einige coole Effekte zu erzeugen. Eine coole und empfehlenswerte Desktop-Anwendung ist PaintCode, mit dem Sie Grafiken importieren oder sogar freihändig in der Anwendung selbst zeichnen können und wird den notwendigen Code erstellen, um diese Inhalte in Core Graphics zu rendern.

Sie besteht aus einer Reihe von Layout-Objekten. Die grundlegende Klasse, die diese Layout-Objekte repräsentiert, ist die CALayer-Klasse. Es sieht ähnlich aus, wie UIViews implementiert sind. Wenn Sie sich den Code unten ansehen und ausführen, erhalten Sie ein rotes Quadrat auf dem Bildschirm. Einde der bekannten Eigenschaften von CALayer ist diese .cornerRadius Eigenschaft, um einen schönen abgerundeten Kanteneffekt zu erzielen.

Wo ist es in UIKit?

Alles, was Sie sehen, wenn Sie eine UIView betrachten, wird nicht auf der UIView-Ebene gemacht, sondern durch eine Rückschicht, die an diese Ansicht angehängt ist.

Alles, was Sie sehen, wird von einem CALayer erledigt, während der Layer den visuellen Inhalt liefert, bietet UIView auf der UIKit-Ebene andere Dinge (Bestell-Layout-Funktionalität, Touch-Erkennung, Gast-Erkennung). All das wird durch UIKit über das Layout eingeführt.

Tief integriert mit UIView.#

CALayer und UIView sind eng integriert. Viele Male, wenn Sie mit der UIView interagieren, beeinflussen Sie implizit die Eigenschaften des darunterliegenden Layouts. Wenn Sie beispielsweise die Eigenschaft .frame in einer Ansicht ändern, manipulieren Sie die Grenzen und die Mitteleigenschaften auf der darunter liegenden Ebene, die dann implizit als .frame-Eigenschaft der Ansicht zurückgegeben werden.

Obwohl ich nicht erwarte, dass die eigentliche Implementierung von UIView so aussieht, sind viele der UIView-Level-Eigenschaften einfache Zugriffsoverrides, die die Eigenschaften für die darunter liegende Ebene manipulieren.

Warum ist es keine Oberklasse?

Warum ist UIView keine Unterklasse von CALayer? Warum wird die Ebene stattdessen einer Eigenschaft in UIView ausgesetzt?

Neben CALayer bietet Apple auch Unterklassen (Kachel- und Gradientenebenen) an. Sie können sie in eine UIView-Unterklasse einfügen, indem Sie auslagern, welcher Layertyp durch diese Eigenschaft freigelegt wird. Dies ist ein Modell, das nicht möglich gewesen wäre, wenn UIView nur eine Unterklasse von CALayer wäre. Nehmen wir an, Sie wollten eine UIView-Unterklasse erstellen, die einen dynamischen Farbverlauf anzeigt. Es ist sehr einfach, wenn Sie die -layerClass-Eigenschaft der Ansicht überschreiben und stattdessen einen CAGradientLayer angeben.

Content auf CALayer abbilden.

Es ist sehr einfach, ein rotes Quad auf dem Bildschirm zu erstellen, aber das ist langweilig. Stattdessen ist es möglich, eine Bitmap auf eine Ebene zu mappen, indem man auf die Eigenschaft .contents zugreift (siehe Code-Beispiel):

Dies ist einem UllimageView sehr ähnlich. Wir können den „Versuch!Swift“-Logo, das wir zuvor mit Core Graphics generiert haben, exportieren Sie es als Ullimage, konvertieren Sie es in ein CGImage und wenden Sie es direkt auf die Content-Eigenschaft der Ebene an.

Verwaltung der CALayer-Inhalte.

Eine andere coole Sache ist, dass die Eigenschaft .contents animierbar ist, was einige coole Effekte haben kann. Es ist möglich, eine Ebene zu konfigurieren, um die Darstellung der Bitmap in Abhängigkeit von der Größe des Rahmens der Ebene selbst zu ändern.

Diese Eigenschaft heißt .contentsGravity und verhält sich ähnlich wie der Content-Modus auf der UIView-Ebene. Der Standardwert ist kCAGravityResize: Unabhängig von der Größe des Frames wird das Bild verzerrt und auf genau die gleiche Größe gequetscht. Wenn Sie die Einstellung auf kCAGravityResizeAspectFill ändern, bleibt das Seitenverhältnis des Bildes gleich, aber es wird so skaliert, dass es die gesamte Ebene ausfüllt und alles außerhalb der Region wird einfach ignoriert. Die Umstellung auf kCAGravityResizeAspect stellt sicher, dass das Bild in seinem normalen Seitenverhältnis bleibt und innerhalb des Frames sichtbar ist, unabhängig von der Größe. Bei Einstellung auf center (kCAGravityCenter) wird das Bild nicht in der Größe verändert, sondern in der Mitte des Frames platziert, unabhängig von seiner Größe.

Welche Art von Effekten sind in iOS mit diesem Skill möglich?

• Eine der besten Apps, Tweetbot, nutzt diese Funktionalität auf eine coole Art und Weise: Wenn der Inhalt nach unten scrollt, wird das Bild im Hintergrund größer. Die Breite des Frames ändert sich nicht, nur die Höhe. Wenn der Frame größer wird, wird das Bild durch die Füllung der Ebene so vergrößert, dass es in das gleiche Seitenverhältnis passt.
• Wir haben einen guten Weg gefunden, dieses Skill von CALayers in der App, iComics, zu nutzen. Als iOS 7 herauskam, gab es eine Verschiebung im Design der iOS-Apps, um minimal zu sein. Wir wollten also, dass die Slider-Grafiken in unserer eigenen App transparent sind und der Hintergrund immer noch von hinten durchschaut wird. Zwei Elemente mussten zusammen arbeiten: die Hintergrundebene mit den Seitenzahlen und ein transparenter Handle-Button, den der Benutzer manipuliert hat. Aber wie schneidet man den Teil der Zahlenebene direkt hinter de Schiebekopf heraus? Die Lösung erwies sich als sehr einfach: Sie rendern eine Instanz der Zahlengrafik und wenden sie dann auf zwei getrennte Ebenen auf beiden Seiten des Buttons an. Wenn Sie die Inhaltsgravitation der linken Ebene nach links (kCAGravityLeft) und der rechten Ebene nach rechts (kCAGravityRight) setzen,, wenn Sie ihre Frames um die Schiebetaste herum manipulieren, entsteht die Illusion, dass sie keine Position verändern.

Da diese Methode die GPU nutzt, ist sie unglaublich performant. Es gibt andere Möglichkeiten, wie Sie das hätten tun können. Zum Beispiel mit einer Maskierungsebene oder in Core Graphics. Aber, weil beide die COU gehebelt hätten, wäre es langsamer gewesen.

Bitmap-Sampling in CALayer.

Core Animation zeigt auch Einstellungen an, mit denen Sie konfigurieren können, welche Resampling-Algorithmen der Grafikprozessor verwendet. Immer wenn Sie die Größe einer Ebene ändern und die Größe nicht mehr mit der Originalgröße der zugeordneten Bitmap übereinstimmt, muss ein Resampling durchgeführt werden, um sicherzustellen, dasssie nicht gezackt oder verzerrt aussieht.

Standardmäßig wird der von Core Animation verwendete Sampling-Modus als bilineares Filtern (kCAFilterLinear) bezeichnet, eine einfache lineare Interpolation zwischen zwei Pixeln. Manchmal ist sogar die bilineare Filterung zu langsam. Wenn Sie die Größe eines Frames während der Animation schnell ändern, kann es zu Problemen kommen.

In Fällen, in denen Sie ein Frame schnell ändern, ist es am besten, ihn wieder auf den nächstgelegenen zu setzen (kCAFilterNearest). Der nächstgelegene Modus deaktiviert das Pixelsampling vollständig. In den Fällen, in denen Sie einen Layer sehr groß oder sehr klein gemacht haben, wird kein Sampling angewendet und so erreichen Sie nur ein mäßiges Ergebnis. In manchen Fällen läuft die Animation derart schnell ab, dass man häufig gar nicht die Notwendigkeit erkennt, dass eine bessere Leistung angebracht wäre.

Der letzte Modus heißt trilineares Filtern (kCAFilterTrilinear), wobei der Grafikprozessor unterschiedlich große Versionen derselben Bitmap erzeugt und diese zusammenfügt, um die Größe der betreffenden Textur zu ändern. Dies kann zu Verlangsamungen führen, da ein CPU-Element involviert ist – es hängt von den Bedürfnissen ab, aber Sie können auf diese Weise eine bessere Resamplingqualität erzielen.

Ein gutes Beispiel dafür, wo die nächste Filterung in iOS nützlich sein kann, ist das Öffnen und Schließen von Animationen für Anwendungen. Wird eine Anwendung geschlossen, wird sie nicht nur sehr schnell neu skaliert, sondern auch wieder auf das Originalsystem überblendet. Diese Kombination kann bei älteren Geräten zu FPS-Stuttering führen. Das heißt, während die Animation schnell abläuft, können Sie die nächste Filterung verwenden und sie ist für den Benutzer nicht sonderlich gut sichtbar.

CALayer-Objekte maskieren.

CALayer-Objekte maskieren: eine Ebene nehmen und als Masken-Eigenschaft einer anderen Ebene festlegen.

Eine Ebene wird von dieser Maske abgeschnitten, ist aber trotzdem funktional, interaktiv und animierbar. Bei iComics wollten wir eine Tutorial-Ansicht erstellen, die erklärt, was eine Einstellung in App bewirkt. Wir verwendeten PaintCode, um eine Reihe von Bildern zu erzeugen und eine Alphakanalmaske, um diese Bilder zusammenzufügen. Das Coole am endgültigen Effekt ist, dass es keine Rolle spielt, welche Farbe oder welches Muster der Hintergrund hat. Es funktioniert auf jedem Hintergrund, auch beim Scrollen. Es ist ein dynamsicher und nützlicher Effekt.

Hinzufügen von Shadows zu CALayer.

Ein weiterer häufiger Effekt in iOS, stellt die Vewendung von Shadows dar. Was ein langer und anstrengender Prozess wäre, macht Core Animation es einfach, dynamische Shadows zu erzeugen und sie an jede beliebige Form anzuhängen.

Der folgende Code wird in der Tat einen Schatten darstellen. Da das System jedoch einen Pro-Pixel-Vergleich durchführen muss, um die Größe des Shadows zu ermitteln, wird es in Bezug auf Rendering und Animation unglaublich langsam sein.

Daher sollten Sie immer dann, wenn Sie mit Shadows in Core Animation arbeiten, die Eigenschaft -shadowPath setzen. Diese Eigenschaft teilt die Core Animation im Voraus die Form des Shadows mit, wodurch die Renderzeit reduziert wird.

CALayer transformieren.

Core Animation bietet auch eine Transform-Eigenschaft auf CALayer. Im Gegensatz zur Transform-Eigenschaft in UIView, die rein 2D ist, bietet die in CALayer 3D-Transformationen.

Während das Design-Paradigma für iOS 7 scheinbar flach und minimal ist, gibt es im System Fälle, in denen 3D-Transformationen verwendet werden. Das bekannteste Beispiel für eine Anwendung von Drittanbietern, die diesen Effekt nutzt, ist die App Flipboard. Flipboard verwendet 3D-Transformationen, um einen Zurückblättern-Effekt zu erzeugen, wenn Sie zwischen Artikeln in seiner Anwendung wechseln. Während dies in der UIView-Ebene nicht möglicht ist, ist es in der Core-Animation-Ebene einfach.

Mischmodi mit CALayer.

Die Möglichkeit, CALayers Mischmodi hinzuzufügen, ist eine coole Sache in Core Animation, verwendet aber einige private System-APIs. Obwohl ich das offiziell nicht empfehlen kann, ist es immer noch cool, sich das anzuschauen. Allerdings wäre es sehr einfach, es zu verschleiern. Wenn Sie es für eine offizielle Anwendung in Betracht ziehen wollen, ist es eine Möglichkeit.

Wenn Sie z.B. zwei Ebenen haben und die oberste Ebene als Bildschirmmischmodus festlegen, erhalten Sie diesen Effekt, wenn die oberste Ebene additiv auf die untere Ebene gemischt wird.

Eines Tages wurde ich neugierig und beschloss, das „slide to unlock“ UIView innerhalb von iOS zurückzuentwickeln. Es ist kein einfaches Gefälle, wie die meisten Leute annehmen würden. Es gibt einen subtilen fraktalen Schimmereffekt. Ich fragte mich, wie viele Schichten es hatte. Fünf Schichten, wie sich herausstellt.

Die oberste Ebene ist eine Masken-Mischebene, die alles auf ihren Alphakanal klemmt. Die nächste Ebene ist eine flache Grundfarbe, die als Hintergrund für den Effekt dient. Die nächsten drei Schichten sind Gradientenschichten, die einen Keilform-Highlight-Glanz und eine Highlight-Farbe erzeugen. Die letzte Schicht ist die komplizierteste. Es ist ein Umriss des Textes, gestrichelt, verschwommen, überlagert, um diesen schimmernden Effekt zu erzeugen, wenn er mit den Farbverläufen gemischt wird.

Wenn Sie sich die offizielle „slide to unlock“-Ansicht ansehen, werden Sie mit Reveal ein sehr nützliches Werkzeug kennenlernen. Reveal ist ein Debugging-Tool, mit dem Sie die Ansichten ihrer Anwendung vom Gerät auf ihrem Mac während der Ausführung überprüfen können. Dies ist besonders wertvoll, wenn Sie eine Anwendung mit einer komplexen Benutzeroberfläche entwickeln und diese in Echtzeit debuggen müssen. Ich hätte diese Selbstbeobachtung nicht ohne sie durchführen können.

Animieren mit Core Animation.

Wie implementiert man Animationen in Core Animation und wie vergleicht man sie mit den UIView-Animations-APIs in der UIKit-Ebene? Ich beginne mit der Implementierung von Animationen auf der UIKit-Ebene und zeige ihnen dann, wie Sie auf die Core Animation Ebene herunterfallen.

Vergleichen mit UIKit.

Auf der UIKit-Ebene ist es einfach, eine Animation zu erstellen. Es genügt ein Methodenaufruf und Sie liefern einen Abschluss, der die zu animierenden Eigenschaften modifiziert; optional liefern Sie einen zweiten Abschluss, der ausgeführt wird, sobald die Animation beendet ist. Core Animation ist kniffliger und erfordert mehr Code und Management.

CABasicAnimation.

Im Vergleich zum vorherigen UIKit-Beispiel müssen Sie ein CABasicAnimation-Objekt erstellen und dieses mit allen notwendigen Parametern füllen, um einen ähnlichen Effekt in Core Animation zu erzeugen. Sobald das Objekt erstellt ist, fügen Sie es dem Ebenenobjekt zu, um die Animation zu starten.

Wenn Sie eine Animation in UIKit erstellen, geschieht dies im Hintergrund. Sie können auf diese Animationen über die Eigenschaft .animationsKeys der Ebene zugreifen.

Timing-Funktion.

Einer der Hauptvorteile der Erstellung von Animationen auf der Ebene der Core Animation besteht darin, dass Sie benutzerdefinierte Timing-Funktionen erstellen können, um den zeitlichen Verlauf einer Animation zu steuern. Eine gute Quelle dafür ist die Website CubicBezier.com. Auf dieser Website können Sie eine Animations-Timing-Funktion direkt manipulieren und erhalten die Fließkommazahlen, die Sie direkt in Core Animation kopieren können.

So können Sie die Geschwindigkeit über die Zeit manipulieren, in der eine Animation mit extrem hoher Präzision abläuft.

CALayer-Inhalte animieren.

So können Sie die Content-Eigenschaft eines CALayers animieren.

Wenn Sie ein Bild hatten und es zu einem anderen Bild überblenden wollten, würden Sie zwei Ansichten erstellen und das jeweilige Überblenden animieren; eine von 100% Alpha bis 0%, die andere von 0% Alpha bis 100%. Wenn jedoch beide Ebenen eine Opazität von 50% erreichen, gibt es einen kurzen Moment, in dem Sie beide durchschauen können. So entsteht ein Dimm-Effekt, der für das menschliche Auge leicht zu erfassen ist. Wenn Sie anschließend die Content-Eigenschaft eines CALayers animieren, erhalten Sie einen Überblendeffekt ohne dieses dimmbare Artefakt. Dies ist nützlich für Animationen, bei denen beide Bilder transparent sind, da der Dimmeffekt in diesem Fall stärker ausgeprägt ist. Dieser visuelle Stil ist mehr als iOS 7 – er hat sich in iOS 8 geändert.

CAKeyframeAnimation.

CAKeyframeAnimation ist eine leistungsfähige Klasse – Sie können mehrere Animationspunkte innerhalb eines Objekts verketten. Aber nicht nur das: Jedem Keyframe-Punkt kann ein CG-Pfad-Objekt zugewiesen werden, mit dem Sie Animationen erstellen können, die nicht nur lineare Punkt-zu-Punkt-Übergänge, sondern auch Kurven sind.

CAAnimationGroup.

Während Sie in der UIKit-Ebene mehrere Animationen innerhalb eines Objekts hinzufügen können, müssen Sie in Core Animation mehrere CABasicAnimation-Objekte erstellen. Wenn das der Fall ist, können Sie ihre Animationsobjekte erstellen und sie zu einem CA-Animationsgruppenobjekt hinzufügen, die das Timing steuert (und somit die Steuerung der Animation effizienter macht).

Handhabung der Animationsvervollständigung.

Ähnlich wie bei den UIKit-Animationen wird auch hier ein Abschluss in Betracht gezogen, der nach Beendigung der Animation ausgeführt wird.

Wie Sie sehen können, gibt es Code, der geschrieben werden muss, wenn Sie Animationen auf der Ebene Core Animation schreiben möchten. Ähnlich wie bei PaintCode gibt es eine weitere Anwendung, Core Animator: Sie erstellen die Animationen in der Anwendung selbst und erzeugen den entsprechenden Core Animation Code, den Sie dann ihre Anwendung kopieren können. Es wird ihnen wahrscheinlich auf lange Sicht eine Zeitersparnis bringen.

Merkmale der Core Animation Unterklassen.

In iOS bietet Apple eine Vielzahl von CLS-Unterklassen mit vielen verschiedenen Funktionen.

Einige dieser Unterklassen verlassen sich auf die CPU für die Operationen, die Sie ausführen. Es kann notwendig sein, diese auf bestimmten Geräten zu testen, um sicherzustellen, dass sie ihre spezifischen Anforderungen erfüllen.

Um eine CLS-Unterklasse in eine UIView einzufügen, müssen Sie lediglich die Unterklasse UIView einfügen und dann deren Layerklassen-Eigenschaft überschreiben.

CATileLayer.

Tile Layers sind ein elementarer Bestandteil der vektorbasierten Zeichnung auf iOS. Sie verwalten automatisch ein Raster von Kachelregionen und verwalten das asynchrone Zeichnen von Inhalten zu diesen Regionen über Core Graphics. Wenn Sie in einer Zoom-Scroll-Ansicht platziert werden, können sie so konfiguriert werden, dass sie den Inhalt mi einer viel größeren Auflösung neu zeichnen, wenn sie herangezoomt werden. Dies ist sehr nützlich für die Darstellung von Inhalten, die in jeder Auflösung dynamisch gerendert werden können. Zum Beispiel Text in einer PDF-Datei oder Topologie-Informationen in einer Mapping-Anwendung.

CAGradientLayer.

CAGradientLayer ist eine einfache Ebene in der Tatsache, dass es nur eine Reihe von Punkten und Farben braucht, um einen dynamischen Gradienteneffekt zu erzeugen. Der Gradient wird auf der GPU erzeugt – er ist unglaublich schnell. Es wird oft auf anderen Ebenen verwendet, die in 3D transformiert wurden, um die Tiefenwahrnehmung zu erhöhen.

CAReplicaterLayer.

Die nächste CLS-Unterklasse ist eine, die an einen Thumbnail-Tiling-Effekt in der iOS 7 Musik-App erinnert. Mit CAReplicaterLayer können Sie eine Schicht angeben und die eine mehrfach auf dem Grafikprozessor duplizieren lassen. Die Kopien können dann angepasst werden. Zum Beispiel, ihre Farbe oder ihre Position zu ändern, um erstaunliche Effekte zu erzeugen. Da alles auf dem Grafikprozessor gemacht wird, ist es viel schneller, als wenn Sie versucht hätten, dieses System manuell zu starten.

CAShapeLayer.

Ds nächste Beispiel ist eines, das im Beispiel „slide to unlock“ hervorgehoben wurde. Mit CAShapeLayer können Sie eine CG-Pfad-Eigenschaft einfügen und visuell anpassen. Zum Beispiel ist es sehr einfach, einen Kreis zu erstellen, den Sie entweder vollständig ausfüllen oder mit einem Strich versehen können. Diese Ebene ist nützlich, um dynamische Effekte zu erzeugen, die dem Designstil des iOS 7 entsprechen. Es ist empfehlenswert, es auszuprobieren und auch einige der Bibliothek, die die Leute bereits auf GitHub gebaut haben, z.B. UAProgressView.

CAEmitterLayer.

Wie bereits in der Disney-App gesehen, dient diese Ebene als Partikel-Emitter, der andere Ebenen aussendet, die so konfiguriert sind, dass sie auf eine bestimmte Weise animiert werden. Es ist nicht ganz klar, warum es diesen Effekt gibt, aber ich habe das Gefühl, dass es wahrscheinlich für OS 10 war, wo es bestimmte Partikeleffekte gibt, wenn man Aktionen im Dock durchführt, wie das Herausziehen eines Icons.

Sie können diese Effekte natürlich ihrer eignen Anwendung hinzufügen, wenn Sie eine magische Note oder Übergänge wünschen. Wenn Sie mit einer CA-Mittelschicht arbeiten möchten, kann die Anwendung Particle Playground empfohlen werden. Im App Store von Mac verfügbar, können Sie ihre Partikel-Einstellungen mit einer visuellen Vorschau konfigurieren und das Los als Klasse exportieren, die Sie dann direkt in ihre Anwendung kopieren können.

Andere Layer-Unterklassen.

Es gibt noch ein paar andere Klassen, die verfügbar sind, aber diese haben wir noch nicht getestet und man kann schnell das Gefühl bekommen, dass die meisten von ihnen nicht für iOS geeignet sind, da sie mehr auf OS 10-Fähigkeiten ausgerichtet sind:

CATextLayer, das sich ähnlich wie UILabel verhält, nur dass es den Text am oberen Rand des Frames statt in der Mitte rendert. Allerdings, denn wir haben UILabels in iOS und sie haben Dinge wie Auftragslayout. Es ist empfehlenswert, sie zu benutzen, wann immer Sie können.

CSScrollLayer ist wahrscheinlich mehr auf OS 10 ausgerichtet, weil wir UIScrollView auf iOS haben, aber es ist die gleiche Funktionalität, mit der Sie große Mengen an Inhalten scrollen können.

Im Gegensatz zu der bereits erwähnten Transform-Eigenschaft haben wir eine Ebene im 2D-Raum manipuliert, mit CATransformLayer können Sie eine Ebene vollständig im 3D-Raum manipulieren und Effekte, wie z.B. drehende Würfel, erzeugen. Ein gutes Beispiel dafür ist die alte iBooks Store-Animation in iOS 5.

Zwei Arten von Layern, die Low-Level-GPU-Layer sind: CAEAGLayer und CGAMetallLayer. Mit beiden können Sie einen Renderingkontext einrichten, indem Sie Low-Level-Grafik-Rendering durchführen können. Dies ist die Ebene, die sie verwenden, wenn Sie ein Spiel erstellen und einen direkten Zugriff auf den Grafikprozessor wünschen, um ihren eigenen Rendering-Code zu schreiben und Core Animation zu umgehen.

Schlussfolgerungen.

Versuchen Sie, zuerst auf der UIView-Ebne zu arbeiten und wenn Sie eine Instanz treffen, in der Sie das gewünschte Steuerelement nicht erhalten können, dann fallen Sie auf die Core-Animation-Ebene herunter. Solange Sie verstehen, wie UIView und Core Animation funktionieren, selbst wenn Sie Kompromisse eingehen müssen, sollte es einige Male vorkommen, dass Sie 60 Bilder pro Sekunde für die gewünschte Animation opfern.

Während Core Animation mehr Kontrolle und Funktionalität bietet, ist es auch mehr Code, der geschrieben und gepflegt werden muss. Ich empfehle ihnen immer, zuerst zu versuchen, den gewünschten Effekt in UIKit zu erzielen.

Vielen Dank für ihren Besuch.