Interfaces mit Core Animation animieren: Teil 3.

Dies ist der dritte Teil unserer Serie, die wir über die Animation von iOS-Schnittstellen mit Core Animation schreiben. Im ersten Beitrag haben wir ein Platenen Orbit mit verschachtelten CALayer-Objekten erstellt.

Der zweite Beitrag zeigt, wie man ein UI durch die Animation eines Bildes verkleiden kann.

Diesmal werde ich zeigen, wie Sie Animationen als Reaktion auf Button-Aktionen auslösen könnte, um den Benutzer zu verdeutlichen, dass eine Aktion stattfindet.

Button Actions Sample.

In unserer nächsten Demo haben wir versucht, ein paar allgemeine Animationen zu zeigen, die Standard iOS-Anwendungen verwenden, um dem Benutzer zu zeigen, dass eine Aktion ausgeführt wird. Wenn Sie sich ansehen, wie sich die Mail-Anwendung auf dem iPad verhält, wenn ein Benutzer mehrere Nachrichten löscht, finden mehrere Animationen gleichzeitig statt.

Im Moment habe ich nur zwei Button-Animationen gezeigt, obwohl ich vorhabe, in Zukunft weitere hinzuzufügen.

Scale Button.

Das erste Beispiel skaliert den Button, wenn er angeklickt wird. Diese kurze Animation skaliert bis zum 1,2-fachen ihrer Größe und verkleinert sich dann wieder auf ihre ursprüngliche Größe. Diese Animation ist wahrscheinlich besser geeignet für einen Button, welches auf einem Bild basiert oder für einen Button, welches einen Glanz- oder Gradienteneffekt hat.

Indem wir zuerst das CABasicAnimation-Objekt mit einem keyPath von „transform“ erstellen, sagen wir, dass wir einen Teil der 3D affinen Transformationen des Objekts animieren werden. Wenn Sie sich vom ersten Beitrag mit dem Orbiting Planets Beispiel erinnern, haben wir den keyPath „transform.rotation“ animiert. Das erlaubte uns, nur die Rotation zu bestehen, die wir als Zahl durchführen wollten. In diesem Beispiel wollte ich zeigen, dass man mehr als nur die Rotation animieren kann. Hier habe ich eine komplette CATransform3D-Struktur übergeben, was bedeutet, dass wir den Maßstab, die Rotation und die Translation der Ebene gleichzeitig animieren können.

Sobald wir unser Objekt haben, stellen wir eine vernünftige Timing-Funktion ein und sagen, wir wollen, dass die Animation sanft ein- und ausgeblendet wird, um ein realistisches Gefühl zu erzeugen.

An dieser Stelle kommt der eigentliche Content der Animation ins Spiel. Wir geben eine kurze Dauer für jede Interation der Schleife an, sagen aber, dass wir die Animation einmal wiederholen wollen. Das bedeutet, dass die Animation zweimal ausgeführt wird, d.h. die Gesamtdauer dieser Animation ist doppelt so lang wieder hier angegebene Wert, also voll 0,25 Sekunden.

Die vielleicht wichtigste Zeile hier ist diejenige, die die Eigenschaft „autoreverses“ auf YES setzt. Das bedeutet, dass jede zweite Schleife durch die Animation den fromValue und toValue umkehrt. Dies ist entscheidend, da sonst die Animation alle 125ms wieder in ihren ursprünglichen Zustand zurückspringt.

Schließlich geben wir den toValue an, den wir animieren wollen. Wir müssen keinen fromValue angeben, da er auf den aktuellen Wert des Objekts voreingestellt ist. Dies ist besonders praktisch, wenn wir nicht wissen, was dieser Wert ist, wenn wir die Animation erstellen. Sie werden auch feststellen, dass wir ein NSValue-Objekt erstellen, anstatt die CATransform3D-Struktur direkt zu übergeben, Werfen Sie einen Blick auf die Konstruktor-Helfer auf NSValue, da es viele verschiedene Arten von Strukturen gibt, die für die Verwendung in Animationen konvertiert werden können.

Schließlich fügen wir die Animation der Ebene unseres Buttons hinzu und sehen uns die Animation an.

Bild animieren.

Das zweite Button-Beispiel, das ich erstellt habe, imitiert die Animation, die die iPad Mail App ausführt, wenn Sie mehrere Nachrichten löschen. Dies zeigt ein Symbol, das verkleinert und ausgeblendet wird, während es einer Kurve in den Button Löschen folgt. In der Mail-Anwendung folgt jedoch der Button Löschen, die nach außen pulsiert und die gelöschten Nachrichten zu verschlingen erscheint. Indem Sie diesen Effekt mit dem oben beschriebenen kombinieren, können Sie etwas sehr Ähnliches wie mit Apples Mail-Programm erzeugen.

Da mehrere Animationen durchgeführt werden, beschreibe ich jede Animation zuerst selbst. Wenn Sie Schwierigkeiten haben, mitzugehen, gehen Sie zum Ende und sehen Sie sich das Video an, um zu sehen, wovon ich spreche.

Die erste Animation, die wir durchführen wollen, ist, das Symbol auf eine kleinere Größe zu verkleinern. Wie zuvor erstellen wir ein CABasicAnimation-Objekt, das an der Eigenschaft „transform“ arbeitet. In diesem Fall setzen wir den fromValue explizit auf CATransform3DIdentity, eine Core Animation Konstante, die eine Transformation beschreibt, die keine Rotation, Skalierung und Übersetzung hat.

Von dort aus animieren wir auf eine kleine, aber nicht auf Null skalierte Größe und geben dann an, dass das Animationsobjekt automatisch entfernt werden soll, sobald es fertig ist.

Die zweite Animation manipuliert die Opazität des Bildes, da wir wollen, dass es sanft ausblendet, wenn es animiert wird. Es ist wichtig zu beachten, dass wir unser CABasicAnimation-Objekt auf der Eigenschaft „Alpha“ erstellen und nicht auf der Eigenschaft „Opacity“, an den Sie gewöhnt sind.

Da Core Animation auf Ebenen und nicht auf UIView-Objekten arbeitet, sind die Eigenschaften, die es manipuliert, CALayer-Eigenschaften. So ziemlich jede Eigenschaft eines CALayers kann animiert werden, aber es gibt einige feine Unterschiede zwischen CALayer- und UIView-Instanzen, über die Sie sich informieren sollten.

Die kompliziertere Animation ist derjenige, die das Symbol in den Button Löschen verschiebt. Wir wollen nicht, dass das Icon in einer linearen Linie zum Button hin animiert wird, da das nicht realistisch aussieht. Stattdessen wollen wir, dass er einer Kurve oder einem Pfad zum Button folgt.

Dazu erstellen wir ein UIBezierPath-Objekt und beschreiben eine quadratische Kurve zur gewünschten Position. Es klingt komplizierter als es ist. Wenn Sie jemals Photoshop oder andere Bildbearbeitungsprogramme verwendet haben, mit denen Sie Pfade bearbeiten können, wird ihnen dies vertraut sein.

Mit der quadratischen Kurve können Sie einfach eine Linie mit drei Punkten beschreiben: dem Startpunkt, dem Endpunkt und einem Kontrollpunkt, wie die beiden Enden der Linie verlaufen soll.

Nachdem der UIBezierPath erstellt wurde, beginnend mit dem Mittelpunkt des Icons und endend mit dem Mittelpunkt des Buttons, erstellen wir eine CAKeyframeAnimation auf der Eigenschaft „position“ CALayer. Das Schöne an CAKeyframeAnimation ist, dass Sie ein Objekt entlang eines Pfades animieren können und Core Animation interpoliert jeden Frame entlang dieses Pfades.

Da wir wollen, dass alle diese Animationen gleichzeitig stattfinden, müssen wir ein letztes Animationsobjekt erstellen. Mit dem CAAnimationGroup-Objekt können Sie mehrere CAAnimation-Objekte zu einer einzigen Aggregat-Animation zusammenfassen. Die hier angegebene Dauer übersteuert die auf den Unteranimationen beschriebenen Einzeldauern und ermöglicht einen sauberen und reibungslosen Übergang.

Wenn wir fertig sind, fügen wir die Animation zum CALayer des Icons hinzu und sehen Sie laufen.

Vielen Dank für ihren Besuch.