Wie Sie Interfaces mit Core Animation animieren: Teil 1.

Eines der positivsten Dinge an der iOS-Plattform und den Anwendungen, die man auf ihr sieht, ist die optisch positive Erscheinung. Sanfte Gradienten, konsistente Übergänge und Animationen, die den Übergang von UI-Elementen von einem Zustand zum anderen veranschaulichen.

Animationen sind mehr als nur eine optische Augenweide, sie zeigen dem Benutzer auf, was passiert.

Wenn ein Element gelöscht wird, verschwindet es nicht einfach, sondern slidet aus dem Bildschirm aus. Im Gegensatz zu herkömmlichen Desktop- und Webanwendungen, bei denen eine „2 items deleted“ Statuszeile erforderlich ist, sind diese Animationen in vielen Fällen ausreichend.

Zu wissen, wo man mit Animationen beginnen soll, kann jedoch ein Problem für den Entwickler sein, da es viele verschiedene Schritte gibt. Das gesamte Spektrum werden wir hier nicht abbilden können, da es den Rahmen sprengen würde. Sie sollten sich mit den Videos der WWDC 2010 zum Thema auseinandersetzen. Alles was wir in diesem Beitrag behandeln, wird ein Aufwärmen dieses Materials sein und es besteht kein Sinn darin, eine perfekte Dokumentation unnötig zu reproduzieren. Studieren Sie deshalb vorher das untere Video:

Was ist ein Sample wert?

Wenn ein Bild mehr sagt als tausend Worte, dann muss Beispielcode viel wertvoller sein. Die WWDC-Videos sind ein wunderbarer Ausgangspunkt, um zu verstehen, wie UIViews und CALayers miteinander in Beziehung stehen, wie verschiedene Effekte angewendet werden können und um einige der üblichen Fallstricke zu sehen, denen man als Entwickler begegnen würde. Was sie nicht so gut können, ist, ihnen zu zeigen, wie Sie diese Techniken tatsächlich auf ihre Applikation anwenden können. Manchmal geht es darum, ein wenig herumzufummeln oder man merkt gar nicht, wie viel man mit Core Animation für die Erstellung seiner Anwendung tun kann.

Aus diesen Gründen haben wir eine Reihe von Beispielen zusammengestellt, die verschiedene Teile von Core Animation illustrieren, die wir für nützlich halten.

Orbitierendes Planeten Beispiel.

Dieses Beispiel war der einfachste Weg, um zu veranschaulichen, wie verschachtelte Ebenen in Core Animation beeinflusst werden, wenn Animationen auf ihnen ausgeführt werden. Ich erstelle einen einfachen Satz von Ebenen, der einen einfachen Kreis zeigt, mit einem weiteren kleineren gefüllten Kreis auf seiner Kontur.

Der erste Block erzeugt eine neue 200×200-Ebene mit einem Eckenradius von genau der halben Breite, d.h. wenn der Rahmen aufgetragen wird, erscheint er als perfekter Kreis. Diese wird der Layer-Eigenschaft der aktuellen Ansicht hinzugefügt. Als nächstes wird eine kleinere 20×20-Ebene mit dem gleichen Eckradius-Trick zu einem Kreis hinzugefügt und diesmal wird die Hintergrundfarbe so eingestellt, dass sie als gefüllter Kreis erscheint.

Das Wichtigste im obigen Code-Beispiel ist, dass alle Farbeigenschaften, die auf einem CALayer gesetzt sind, ein CGColorRef-Objekt und nicht ein UIColor-Objekt sein müssen. Es ist am einfachsten, ein UIColor zu verwenden, um ihre Farbobjekte zu erstellen und dann einfach die CGColor-Eigenschaft der UIColor-Klasse zu verwenden, um die richtigen Core Graphics-Referenzen abzuleiten.

Sobald die Layer hinzugefügt wurden, müssen Sie eine Animation erstellen, um die übergeordnete Ebene um ihre Mitte zu drehen.

Gehen wir den Code Zeile für Zeile durch, um genau zu beschreiben, was hier geschieht. Die erste Zeile konstruiert ein CABasicAnimation-Objekt, das im Wesentlichen der einfachste Typ von Animationsobjekt ist, den Sie erstellen können. Für die meisten ihrer Animationen ist das alles, was Sie je brauchen werden. Indem wir das Objekt mit animationWithKeyPath konstruieren, spezifizieren wir die spezifische Eigenschaft auf der Ebene, die wir animieren wollen, in diesem Fall die Rotationskomponente der Transformationseigenschaft der Ebene.

Sobald das Objekt erstellt ist, müssen wir die Timing-Funktion für die Animation anpassen. Dies sagt der Animation, wie man die Werte „krümmt“, was uns erlaubt, unsere Animationen Ease-in oder Ease zu outen, was sie realistischer erscheinen lässt. Für unsere Animationen wollen wir jedoch eine „lineare“ Timing-Funktion verwenden, da wir diese Animation loopen werden.

Als nächstes geben wir die Werte „von“ und „bis“ für diese Animation an. Im Wesentlichen handelt es sich dabei um eine einzelne Schleife unserer Animation von Anfang bis Ende. Da wir es mit Rotationen zu tun haben, verwenden wir Bogenmaß. Da die fromValue- und toValue-Eigenschaften eine Objektreferenz haben, müssen Sie Primitive entweder in eine NSNumber- oder NSValue-Instanz umbrechen.

Wenn Sie möchten, dass ihre Animation wiederholt wird, können Sie entweder die repeatCount-Eigenschaft auf eine bestimmte Zahl setzen oder Sie können den Wert HUGE_VALF verwenden, um festzulegen, dass die Animation unbegrenzt fortgesetzt werden soll.

Sie legen fest, wie lange eine einzelne Schleife ihrer Animation dauern soll. Dieser Wert wird in Sekunden angegeben, daher kann dieser Wert bei kurzen Animationen recht klein sein.

Wenn ihr Animationsobjekt fertig ist, fügen Sie die Animation zu der Ebene hinzu, auf der die Animation ausgeführt werden soll. Diese Beschreibung mag lang erscheinen, aber es ist nur moderater Biolerplate-Code, der ihnen ein hohes Maß an Flexibilität bietet.

Sobald die gleiche Prozedur für die anderen Planetenbahnen wiederholt und jeder Satz von Layern zueinander hinzugefügt wurde, sieht die Animation ungefähr so aus:

Vielen Dank für ihren Besuch.