Core Animation Swift Tutorial – Animierbare Eigenschaften.

Dieses Tutorial setzt ein grundlegendes Verständnis der UIView-Hierarchie voraus. Wenn Sie sich neu in der iOS-Entwicklung sind, sollten Sie sich zunächst mit der Entwicklung von iOS-Anwendungen mit Swift beschäftigen.

Wenn Sie zum ersten Mal von Core Animation hören, denken Sie vielleicht, dass es um Animation geht. Die Animation ist jedoch nur ein Teil dieses Frameworks. Core Animation ist eine Infrastruktur für die Zusammenstellung und Bearbeitung visueller Inhalte auf dem Bildschirm. Es nutzt die GPU, um das Rendern von On-Screen-Objekten zu beschleunigen. Er unterteilt den Inhalt auf dem Bildschirm in einzelne Objekte, die als Layer bezeichnet werden und ordnet sie in einer Baumhierarchie an. Sie kennen die UIView-Baumhierarchie, die auf dem Ebenenbaum aufbaut. Mit anderen Worten, Core Animation berücksichtigt alles, was Sie auf dem Bildschirm sehen.

In diesem Beitrag lernen Sie die Grundlagen von CALayer, wie man mit seinen Eigenschaften einfach saubere visuelle Effekte erzeugt und am Ende dieses Beitrags lernen Sie die wichtigste Unterklasse von CALayer – CAShapeLayer.

Was ist CALayer?

CALayer sind rechteckige Objekte, die visuelle Inhalte enthalten können. Sie werden in einer Baumhierarchie gespeichert und verwalten jeweils die Position ihrer Unterebenen.

Kommt ihnen das bekannt vor? Es ist ein wenig wie bei UIView.

Das stimmt, aber es ist nicht nur ein Zufall. Jede UIView hat eine Layereigenschaft, die als Backing Layer bezeichnet wird und eine Instanz von CALayer ist. UIView stellt nur sicher, dass die entsprechenden Rückseiten im Layerbaum korrekt verbunden sind, wenn Unteransichten hinzugefügt oder aus der Ansicht entfernt werden. Es ist die Trägerschicht, die für die Darstellung und Animation der Ansicht verantwortlich ist. Das einzige Hauptmerkmal, das die Trägerschicht nicht beherrscht, ist die Benutzerinteraktion.

Um dieses Tutorial zu verstehen, empfehle ich ihnen, eine leere Single-Vire iPhone Applikation zu erstellen.

CALayer erkunden.

Das Anlegen einer CALayer-Instanz ist sehr einfach.

Wir können den Frame und die Hintergrundfarbe festlegen und ihn wie in UIView zu einem Superlayer hinzufügen.

Fügen Sie diesen Code zu einer Funktion namens setup in der Datei ViewController.swift hinzu und rufen Sie die Methode aus viewDidLoad auf. Es sollte so ungefähr wie auf der folgenden Seite aussehen:

Beachten Sie, dass die Eigenschaft backgroundColor von CALayer eine CGColor anstelle von UIColor ist.

Sie können auch ein Bild als Inhalt über die Eingenschaft content festlegen. Content wird auch als Backing Image bezeichnet.

Wir benutzen das Bild eines Schmetterlings:

Beachten Sie, dass Sie ihr Bild mit der Bezeichnung ButterflySmall als JPEG-Datei in ihre Xcode Projekthierarchie ziehen müssen, damit der Befehl UIImage() das Bild findet.

ContentsGravity ist eine Konstante, die angibt, wie der Inhalt der Ebene innerhalb ihrer Grenzen positioniert und skaliert wird.

ContentsScale definiert ein Verhältnis zwischen der Größe der Ebene (gemessen in Punkten) und der Größe der Bitmap, mit der der Inhalt der Ebene dargestellt wird (bekannt als Hintergrundbild, gemessen in Pixeln). Der Standardwert ist 1.0. Normalerweise stellen wir den Wert als Maßstab des Bildes ein, wie oben gezeigt. Wenn Sie jedoch mit Bildern arbeiten, die programmgesteuert erzeugt werden oder mit Bildern, bei denen das Suffix @2x/@3x fehlt, werden Sie daran denken, den Inhalt der Ebene manuell so einzustellen, dass er dem Bildschirmmaßstab entspricht. Andernfalls erhalten Sie ein verpixeltes Bild auf ihrem Gerät.

Ecken und Kanten.

CALayer hat eine Eigenschaft mit der Bezeichnung cornerRadius, die abgerundete Ecken auf den Hintergrund und den Rand der Ebene anwendet. Wenn die Eigenschaft masksToBounds auf true gesetzt ist, werden das Hintergrundbild und die Unterbenen der Ebene auf dieser Kurve zugeschnitten.

Auf unserem redLayer lassen Sie uns einige abgerundete Ecken anbringen und den Rand sichtbar machen.

borderWidth, borderColor definiert die Breite und Farbe des Rahmens eines Layers.

Drop Shadow.

Es gibt vier Eigenschaften, wie Sie den Drop Shadow für eine Ebene konfigurieren können: shadowOpacity, shadowColor, shadowOffset und shadowRadius. ShadowRadius steuert die Unschärfe des Shadows. Ein größerer Wert könnte einen weicheren Schatten erzeugen, der natürlicher aussieht.

Fügen wir auch unserem redLayer einen Schatten hinzu.

Im Gegensatz zum Ebenenrand ergibt sich der Schatten der Ebene aus der exakten Form ihres Inhalts, nicht nur aus den Grenzen und dem Eckradius. Wenn Sie jedoch wissen, wie die Form ihres Schattens im Voraus aussehen würde, können Sie ihn über shadowPath (eine Instanz von CGPath) angeben. Dadurch können Sie die Performance verbessern.

Layer animieren.

Nun, da wir einige der Eigenschaften, die in Core Animation vorhanden sind, behandelt haben, lassen Sie uns schnell durch die Erstellung einiger aktueller Animationen gehen.

Hier erstellen wir eine neue CABasicAnimation für die Eigenschaft cornerRadius. Lass deine App laufen und schau dir das Ergebnis an.

Sie können diese Animation genauso einfach auf jede andere animierbare Eigenschaft von CALayer anwenden. Versuchen Sie, den Wert „cornerRadius“ keyPath im CABasicAnimation() Konstruktor mit dem Wert „borderwidth“ zu vertauschen und warten Sie gespannt auf das Ergebnis.