Share
Das neue Betriebssystem für die Apple Watch, watchOS 2, wurde vor einigen Wochen auf der WWDC 2015 vorgestellt. Es bringt viele Verbesserungen, vor allem für Entwickler, die eine Apple Watch-App erstellen möchten. Dies sind die Dinge, die für Entwickler am wichtigsten sind:
Bevor wir zu den Details kommen, möchte ich eine Minute damit verbringen, den Zweck von Animationen in Apple Watch-Apps zu besprechen.
Der offensichtliche Grund ist, dass sie die Benutzeroberfläche angenehmer machen, wenn sie entsprechend verwendet wird. Und wenn es um Apple Watch geht, ist das groß ob. Da die meisten App-Interaktionen nur wenige Sekunden dauern, möchten Sie die Animationen wirklich nicht übertreiben.
Der zweite und meiner Meinung nach wichtigere Grund ist, dass sie benutzerdefinierte Navigationshierarchien in Apple Watch-Apps zulassen. Angenommen, Sie müssen einen Bildschirm anzeigen, den der Benutzer nur durch eine bestimmte Aktion verlassen kann. Normalerweise haben Apple Watch-Apps immer eine Schaltfläche zum Abbrechen in der oberen linken Ecke, wenn ein modaler Schnittstellencontroller angezeigt wird. Mit Animationen und cleveren Layout-Manipulationen können Sie eine eigene Routine "Present View Controller" erstellen, die den Inhalt Ihrer App im Vollbildmodus anzeigt und durch diese bestimmte Aktion abbricht. Das ist eines der Dinge, die Sie in diesem Tutorial lernen werden.
Bevor Sie in dieses Tutorial eintauchen, sollten Sie über grundlegende Kenntnisse der Funktionsweise des Layout-Systems von WatchKit verfügen. Selbst wenn Sie ein erfahrener iOS-Entwickler sind, unterscheidet sich das gruppenbasierte Layout von WatchKit erheblich von dem, das Sie unter iOS gewohnt sind. Sie müssen auf eine ganz andere Art und Weise über das Layout nachdenken. Wenn Sie sich erst einmal daran gewöhnt haben, können Sie die meisten Layouts ohne großen Aufwand erstellen.
Wenn Sie das Layout von WatchKit noch nicht kennen, gibt es ein tolles Tutorial zu Tuts + von meinem Freund Patrick Balestra: Das Verständnis des WatchKit Layout-Systems. Anhand einer Beispiel-App erklärt er alles, was Sie wissen müssen, um sich auf den neuesten Stand zu bringen.
Es gibt auch viele WWDC-Sitzungen, die dieses Thema berühren. Die Session, die ich am besten empfehle und die WatchKit-Animationen abdeckt, heißt Layout- und Animationstechniken für WatchKit.
Das Prinzip der Animationen in watchOS 2 ist einfach: Sie können eine oder mehrere der animierbaren Eigenschaften innerhalb eines Animationsblocks festlegen. Das folgende Beispiel zeigt, wie das funktioniert.
[self animateWithDuration: 0.5 Animationen: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ];
Diese Methode bewirkt das Kreisgruppe rechts ausgerichtet sein, mit einer Animation von 0,5 Sekunden Dauer. Wie Sie sehen können, rufen wir an animateWithDuration: Animationen: auf selbst, Das ist ein Beispiel von WKInterfaceController. Dies unterscheidet sich von iOS, wo die Animationsmethoden Klassenmethoden sind UIView.
Die folgende Liste zeigt, welche Eigenschaften animierbar sind:
Beachten Sie, dass es auf watchOS 2 immer noch nicht möglich ist, Benutzeroberflächenelemente zur Laufzeit zu erstellen. Da Sie sie jedoch ausblenden oder ihren Alpha-Wert im Storyboard auf 0 setzen können, sollte dies kein so großes Problem sein.
Das ist es. Mit Ihrem Wissen über das WatchKit-Layoutsystem können Sie jetzt mit native Animationen auf watchOS arbeiten. Beginnen wir mit der Erstellung einer Beispiel-App, damit ich Ihnen einige Beispiele zeigen kann, wie dies alles zusammenpasst.
Wir werden eine einfache watchOS 2-App erstellen, in der einige dieser Animationskonzepte vorgestellt werden. Es wird keinesfalls versucht, einen vollständigen Überblick über alle möglichen Dinge zu geben. Stattdessen zeigt es die Grundidee, die es Ihnen hoffentlich ermöglicht, Lösungen für das zu finden, was Sie brauchen.
Zum Zeitpunkt des Schreibens befindet sich Xcode 7 noch in der Beta-Phase. Um eine watchOS 2-App zu erstellen, müssen Sie Xcode 7 verwenden. Das ist es, was ich verwenden werde.
Öffnen Interface.storyboard in dem WatchApp Gruppe wie unten gezeigt.
Fügen Sie der Benutzeroberfläche eine Gruppe hinzu, indem Sie sie aus dem Ordner ziehen Objektbibliothek zur Rechten. In dem Attribute-Inspektor ändern Sie rechts das Layout in Vertikale und stellen Sie die Höhe auf Relativ zu Container.
Fügen Sie der gerade hinzugefügten Gruppe eine zweite Gruppe hinzu. In dem Attribute-Inspektor, Setzen Sie die vertikale Position auf Unterseite.
Fügen Sie der zweiten Gruppe vier Schaltflächen hinzu. Legen Sie für jede Schaltfläche fest Größe zu Relativ zu Container mit einem Wert von 0,25. Stellen Sie die Titel der Tasten auf ←, →, ↑ und ↓. Nach diesem Schritt sollte die Benutzeroberfläche folgendermaßen aussehen:
Um den ersten Teil der Benutzeroberfläche abzuschließen, fügen Sie der Hauptgruppe eine weitere Gruppe hinzu und konfigurieren Sie sie wie folgt:
Der folgende Screenshot zeigt, wie der Kreis konfiguriert werden sollte.
In dem Projektnavigator, erweitere die WatchApp-Erweiterung gruppieren und auswählen InterfaceController.m. Ersetzen Sie die Implementierung von InterfaceController Klasse mit folgendem:
#import "InterfaceController.h" @interface InterfaceController () @property (nicht atomar, schwach) IBOutlet WKInterfaceGroup * circleGroup; @end @implementation InterfaceController // Schaltflächen für die Kreisrichtung - (IBAction) leftButtonPressed [self animateWithDuration: 0.5 Animationen: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentLeft]; ]; - (IBAction) rightButtonPressed [self animateWithDuration: 0.5 Animationen: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ]; - (IBAction) upButtonPressed [self animateWithDuration: 0.5 Animationen: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentTop]; ]; - (IBAction) downButtonPressed [self animateWithDuration: 0.5 Animationen: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; ]; @Ende
Durch diese Aktionen wird der rote Kreis in eine bestimmte Richtung verschoben. Und wie Sie sehen, erreichen wir dies, indem Sie die vertikale und / oder horizontale Ausrichtung in einem Animationsblock einstellen.
Öffnen Interface.storyboard und verbinden Sie die Steckdosen wie unten gezeigt.
Das sollte es tun. Führen Sie das Projekt aus. Wenn Sie die obigen Schritte ausgeführt haben, sollten Sie in der Lage sein, den roten Kreis mithilfe der Pfeiltasten auf dem Bildschirm zu verschieben.
Im zweiten Teil dieses Tutorials erstellen wir eine Push-Animation. Da die meisten Schritte ähnlich sind, werde ich mich diesmal etwas schneller bewegen.
Öffnen InterfaceController.m und erstellen Sie eine neue Steckdose, firstScreenGroup, vom Typ WKInterfaceGroup in der Klassenerweiterung der InterfaceController Klasse.
@interface InterfaceController () @ property (nicht atomar, schwach) IBOutlet WKInterfaceGroup * circleGroup; @ property (nichtatomisch, schwach) IBOutlet WKInterfaceGroup * firstScreenGroup; @Ende
Als nächstes implementieren Sie die folgenden Aktionen in der InterfaceController Klasse.
- (IBAction) pushButtonPressed [self animateWithDuration: 0.1 Animationen: ^ [self.firstScreenGroup setAlpha: 0]; ]; [self animateWithDuration: 0.3 Animationen: ^ [self.firstScreenGroup setWidth: 0]; ]; - (IBAction) popButtonPressed [self animateWithDuration: 0.3 Animationen: ^ [self.firstScreenGroup setRelativeWidth: 1 withAdjustment: 0]; ]; dispatch_after (dispatch_time (DISPATCH_TIME_NOW, (int64_t) (0,2 * NSEC_PER_SEC)), dispatch_get_main_queue (), ^ [self animateWithDuration: 0,1 Animationen: ^ [self.firstScreenGroup setAlpha: 1];];;
Im pushButtonPressed, Wir verkleinern die erste Bildschirmgruppe (wir erstellen sie im nächsten Schritt) und in popButtonPressed Wir erweitern diese Gruppe erneut. Wir animieren auch das Alpha der ersten Bildschirmgruppe, um die Animation etwas ansprechender zu gestalten.
Öffnen Interface.storyboard und fügen Sie der Benutzeroberfläche eine neue Gruppe hinzu. Setzen Sie die Gruppe, die bereits dort war, in die Gruppe Kreis und die Gruppe mit Schaltflächen in dieser neuen Gruppe. Set seine Layout zu Horizontal und benennen Sie die enthaltene Gruppe in um Erster Bildschirm. Dies wird später nützlich sein. Das Ergebnis sollte so aussehen:
Fügen Sie als Nächstes eine zweite Gruppe hinzu, die sich auf derselben Ebene wie die Gruppe befindet Erster Bildschirm Gruppe. Set seine Layout zu Vertikale. Fügen Sie der Gruppe ein Bild und eine Schaltfläche hinzu. Sie können buchstäblich jedes Bild hinzufügen. Stellen Sie einfach sicher, dass Sie etwas dort einfügen, da die Animation sonst etwas trocken aussieht. Stellen Sie den Titel der Schaltfläche auf "< Pop". Connect the button to the popButtonPressed Aktion, die wir zuvor erstellt haben. Die Benutzeroberfläche sollte jetzt so aussehen:
Fügen Sie der Schaltfläche eine Schaltfläche hinzu Erster Bildschirm Gruppe. Stellen Sie den Titel auf "Push>" und die vertikale Position auf Unterseite. Verbinden Sie den Button mit dem pushButtonPressed Aktion. Die Benutzeroberfläche sollte jetzt so aussehen:
Es gibt eine Sache, die wir tun müssen, um das zu verbinden firstScreenGroup Ausgang zu der von uns genannten Gruppe Erster Bildschirm.
Wenn Sie die App erstellen und ausführen, sollten Sie in der Lage sein, den zweiten Bildschirm anzuzeigen, indem Sie auf die Schaltfläche mit dem Titel tippen "Push>" unten. Sie können den zweiten Bildschirm schließen, indem Sie auf die Schaltfläche mit Titel tippen. "< Pop". It should look like this:
In diesem Tutorial haben wir uns native Animationen auf watchOS 2 angesehen. Ich hoffe, Sie haben einen Eindruck davon bekommen, was Sie mit Animationen auf watchOS erreichen können. Wenn Sie Fragen haben, können Sie einen Kommentar posten oder mich auf Twitter kontaktieren.
Accentsconagua