Nach der Veröffentlichung von iOS 7 (und iOS 8) wurden Animations- und Bewegungseffekte für das Design von Apps von Apple und 3rd-Party-Entwicklern von zentraler Bedeutung. iOS 7 führte ein flaches, minimales Design für Apps ein, was unweigerlich dazu führte, dass einige Apps eine ähnliche Benutzeroberfläche hatten. Um ihre Apps von anderen Apps zu unterscheiden, verwendeten Entwickler Funktionen wie Animationen und Bewegungseffekte, um ihre Apps hervorzuheben.

Animationen werden nicht nur verwendet, um Ihre App hervorzuheben, sondern können auch die allgemeine Benutzererfahrung Ihrer Anwendung verbessern. Für großartige Beispiele, wie Animationen verwendet werden, um UX zu verbessern, sollten Sie sich ansehen, wie Apple Animationen in ihren Apps verwendet. Wenn Sie beispielsweise in der Fotos-App ein Foto aus einer Sammlung auswählen, wird das Foto aus dem ausgewählten Foto herausgeklappt und beim Schließen auf das ausgewählte Foto zurückgeschrumpft. Dies trägt zur Navigation der App bei, da Sie genau wissen, wo Sie waren, wenn Sie viele Bilder durchsuchen.

Das Papier von Facebook verwendet auch Animationen, um die allgemeine Benutzererfahrung der App zu verbessern. Sie wählen einen Artikel zum Lesen aus, indem Sie ihn umdrehen. Diese Aktion, die Tatsache, dass sich der Artikel aus seiner Miniaturansicht ausdehnt, legt nahe, dass das Gegenteil, dh das Umdrehen des Artikels nach unten, ihn wieder auf seine Miniaturansicht verkleinern würde. Hier wird Animation verwendet, um zu vermitteln, wie die App funktioniert, und selbst ein Erstbenutzer der App könnte bald Annahmen über ihre Verwendung treffen und ihre Navigation herausfinden, ohne ein Tutorial zu benötigen.

Animationen tragen nicht nur zur Benutzererfahrung der App bei, sondern könnten auch Ihre Benutzer begeistern und beeindrucken, indem sie die wiederholte Verwendung garantieren, anstatt die App für eine bessere aus dem App Store zu deinstallieren.

Es gibt zahlreiche Möglichkeiten, Animationen in Ihre Apps einzubeziehen, darunter UIKit Dynamics, Layer-Animationen, View Controller-Übergänge oder die Verwendung einer Bibliothek eines Drittanbieters wie der Facebook Pop-Bibliothek oder des JNWSpringAnimation-Frameworks.

In diesem Tutorial werden wir uns einfache Ansichtsanimationen ansehen. Sie können das Starter-Projekt herunterladen, bei dem es sich um eine Einzelansichtsanwendung mit einer Tabellenansicht handelt, in der die im Tutorial-Tutorial vorgestellten Beispiele aufgelistet sind. Ich werde dies verwenden, wenn wir zum Beispielteil des Tutorials gelangen, anstatt von vorne zu beginnen.

Das Tutorial beginnt mit einer Zusammenfassung der APIs, die zum Animieren von Ansichten verwendet werden, und endet mit einigen Beispielen, die die Verwendung einiger der APIs in einer App zeigen.

Grundlegende Ansichtsanimationen

Beim Erstellen von Animationen in Ihren Ansichten müssen die Eigenschaften geändert und von UIKit automatisch animiert werden. Die Eigenschaften, die wir ändern, sind diejenigen, die als animierbar markiert sind.

Die folgende Liste zeigt die animierbaren Eigenschaften.

  • Zentrum
  • alpha
  • Rahmen
  • Grenzen
  • transformieren
  • Hintergrundfarbe
  • Inhaltstretch

Sie finden dass alle Animationen eine Änderung einer oder mehrerer der oben genannten Eigenschaften beinhalten.

Für einfache Ansichtsanimationen bietet UIKit die folgenden APIs, mit denen Ansichten auf dem Bildschirm animiert werden können.

Der erste Parameter enthält zwei Parameter – einen Wert für die Dauer der Animation in Sekunden und einen Abschluss, in dem Sie die Eigenschaften angeben, die geändert werden sollen. UIKit übernimmt den ursprünglichen Zustand der Ansicht und erstellt einen reibungslosen Übergang von diesem Zustand zum Endzustand gemäß den Angaben im Animationsabschluss.

Die anderen beiden APIs ähneln der ersten, benötigen jedoch zusätzliche Parameter, die der Animation mehr Konfiguration hinzufügen. Die zweite benötigt einen Abschlussabschluss, mit dem Sie entweder eine andere Animation angeben können, die Sie nach der ersten ausführen möchten, oder Sie können die Benutzeroberfläche bereinigen, z. B. eine Ansicht aus der Ansichtshierarchie entfernen, sobald eine andere Ansicht in die Szene animiert wurde.

Die dritte API benötigt zwei zusätzliche Parameter – die Verzögerung, dh die Wartezeit vor dem Start der Animation, und options , eine UIViewAnimationOptions Konstante, die angibt, wie Sie die Animationen ausführen möchten. Im Folgenden werden die verfügbaren Optionen angezeigt.

Federanimationen

Federanimationen versuchen, das Verhalten einer echten Feder zu modellieren, indem eine Ansicht, wenn sie von einem Punkt zum anderen bewegt wird, zum Ende hin abprallt / oszilliert, bevor sie sich in Position setzt.

Unten ist der Methodenblock, den wir für Spring-Animationen verwenden.

  • UIView.animateWithDuration(_:, Verzögerung:, usingSpringWithDamping:, initialSpringVelocity:, Optionen:, Animationen:, Abschluss:)

Das Obige ähnelt den Methoden, die wir zuvor betrachtet haben, mit Ausnahme von zwei neuen Parametern – usingSpringWithDamping und initialSpringVelocity. Dämpfung ist ein Wert von 0 bis 1, der bestimmt, wie stark die Ansicht gegen Ende der Animation springt. Je näher der Wert an 1 liegt, desto weniger federnd wird er sein. initialSpringVelocity wie der Name schon sagt, bestimmt die Anfangsgeschwindigkeit der Animation. Dies bestimmt, wie stark die Animation beginnt. Wenn Sie eine flüssige Animation wünschen, können Sie den Wert auf 0 setzen.

Keyframe-Animationen

Mit Keyframe-Animationen können Sie verschiedene Phasen einer Animation festlegen. Sie können verschiedene Animationen gruppieren, die einige gemeinsame Eigenschaften haben, sie aber dennoch separat steuern können.

Anstelle einer Animation, die sich nur entlang eines Pfades bewegt, führt UIKit die verschiedenen Phasen der Animation aus.

Die Keyframe-Animations-APIs sind wie folgt.

Die beiden oben genannten Methoden werden zusammen verwendet, wobei die zweite in der Animationsschließung der ersten verschachtelt wird.

Die erste Methode legt die Gesamtkonfiguration der Animation fest, z. B. wie lange sie dauert, die Verzögerung und ihre Optionen. Sie definieren dann eine oder mehrere der zweiten Methoden (die Frames) innerhalb des Animationsabschlusses, um die verschiedenen Phasen der Animation festzulegen.

Die relative Startzeit und relative Dauer jedes Frames ist ein Wert zwischen 0 und 1, der die prozentuale Zeit innerhalb der Gesamtdauer der Animation ausdrückt.

Ansichtsübergänge

Ansichtsübergänge werden verwendet, wenn Sie Ihrer Ansichtshierarchie eine neue Ansicht hinzufügen oder eine Ansicht aus der Ansichtshierarchie entfernen möchten.

Die APIs, die zum Erstellen von Ansichtsübergängen verwendet werden, sind

Sie verwenden die erste, um eine Ansicht in die Ansichtshierarchie einzuführen. Die Methode verwendet ähnliche Parameter wie in den anderen Animationsmethoden.

Die zweite wird verwendet, um eine Ansicht aus der Ansichtshierarchie zu übernehmen und eine neue Ansicht an ihrer Stelle zu platzieren.

Beispiele

Wir werden uns nun einige Beispiele ansehen, die einige der oben genannten API-Aufrufe verwenden, um Ansichten im angegebenen Starter-Projekt zu animieren.

Beispiel I

Wenn Sie das Projekt ausführen, sehen Sie eine Tabellenansicht, die die Beispiele auflistet, die wir durcharbeiten werden. Wählen Sie Beispiel I in der Liste aus und Sie sollten einen Anmeldebildschirm einer App mit den Feldern Benutzername und Kennwort sowie der Schaltfläche Anmelden sehen.

Wir möchten, dass diese beim Start der App auf dem Bildschirm animiert werden.

Um zu beginnen, blenden wir die Ansichten aus, wenn sie zum ersten Mal angezeigt werden. Vor dem automatischen Layout wäre dies eine einfache Sache gewesen, die Position der spezifischen Ansicht im Code zu ändern, aber da wir Auto-Layout-Einschränkungen für die Ansichten in der Storyboard-Datei festlegen, müssen wir die Einschränkungen im Code ändern, wodurch sich die Position der Ansicht ändert.

Zuerst müssen wir eine Referenz der Einschränkungen erhalten, die wir ändern werden. Öffnen Sie die Storyboard-Datei. Suchen Sie die folgenden Einschränkungen im Beispiel I Szene.

Öffnen Sie den Assistenten-Editor und stellen Sie sicher, dass es sich um den ExampleIViewController .swift, das neben dem Storyboard auf dem geteilten Bildschirm angezeigt wird. Ziehen Sie aus der Center X Alignment – View – Username-Einschränkung in die ExampleIViewController-Klasse. Erstellen Sie eine Steckdose mit dem Namen centerAlignUsername. Machen Sie dasselbe für das Center X Alignment – View – Password und setzen Sie seinen Namen auf centerAlignPassword . Erstellen Sie außerdem einen Ausgang für die Anmeldeschaltfläche mit dem Namen LoginButton und eine Aktion für dieselbe Schaltfläche und nennen Sie sie login. Stellen Sie sicher, dass Sie den Typ der Aktion auf UIButton . Sie sollten Folgendes im Code haben.

1
2
3
4
5
6
7

@ IBOutlet schwach var centerAlignUsername: NSLayoutConstraint!
@IBOutlet schwach var centerAlignPassword: NSLayoutConstraint!
@IBOutlet schwach var LoginButton: UIButton!
@ IBAction func login(Absender: UIButton) {
}

Im ExampleIViewController.swift fügt die folgende Methode hinzu, die aufgerufen wird, bevor die Ansicht auf dem Bildschirm angezeigt wird.

Dies verschiebt die Felder Benutzername und Passwort einfach aus der Sicht und setzt den Alpha-Wert der Schaltfläche auf 0, wodurch sie unsichtbar wird.

Fügen Sie die folgende Methode hinzu, die direkt aufgerufen wird, wenn die Ansicht angezeigt wird.

Hier verwenden wir die UIView .animateWithDuration() -Methode, die wir zuvor gesehen haben. Wir fügen die UIViewAnimationOptions .CurveEaseOut-Option, mit der die Animation schnell startet und am Ende langsamer wird. Hier können Sie mit verschiedenen Optionen experimentieren. Klicken Sie bei gedrückter UIViewAnimationOptions auf UIViewAnimationOptions , um alle verfügbaren Optionen anzuzeigen.

Die Animation dauert 0,5 Sekunden und startet sofort. Sie haben die Kontrolle über die Dauer, sollten jedoch keine so große Anzahl festlegen, dass Ihre Benutzer verärgert werden, wenn Animationen in Ihrer App zu lange zu dauern scheinen. Normalerweise liegt die Dauer zwischen 0,5 und 0,7 Sekunden, aber wie gesagt, das ist nicht in Stein gemeißelt und Sie haben die Freiheit, es auf das zu setzen, was sich für Sie richtig anfühlt.

Die Animation macht genau das Gegenteil von dem, was wir in viewWillAppear() . layoutIfNeeded() wird verwendet, um die Ansichten zu layoutIfNeeded() , sobald sie geändert werden. Wenn Sie es nicht einschließen, werden sie nicht sehen, wie sie auf dem Bildschirm animiert werden, sondern sie werden nur in ihrer endgültigen Position angezeigt. Führen Sie die App aus, und Sie sollten Folgendes sehen.

Das Obige sieht interessanter aus als eine statische Präsentation, aber die Ansichten, die gleichzeitig animiert werden, erzeugen keinen so großen Effekt. Ändern Sie die Methode wie unten gezeigt.

Führen Sie die App aus und in der resultierenden Animation werden die Ansichten zu unterschiedlichen Zeiten auf dem Bildschirm animiert. Wenn Sie sich den Code ansehen, können Sie sehen, dass wir nach dem ersten Animationsblock eine Verzögerung für nachfolgende festlegen.

Wenn die Anmeldung in Anmeldebildschirmen fehlschlägt, gibt es normalerweise eine Animation, die dem Benutzer anzeigt, dass die Anmeldung fehlgeschlagen ist. Dies geschieht manchmal als Ergebnis der Textfelder oder der Anmeldeschaltfläche und einer Meldung, die den Benutzer darüber informiert, dass die Anmeldung fehlgeschlagen ist. Wir fügen einen solchen Effekt mithilfe von Federn auf die Anmeldeschaltfläche hinzu. Ändern Sie die login() -Funktion wie gezeigt.

Das Obige ändert die Größe der Anmeldeschaltfläche, wenn sie gedrückt wird, und animiert die Aktion mit einer Federanimation, die dazu führt, dass sich die Breite der Schaltfläche ausdehnt und am Ende ein wenig springt, bevor sie sich absetzt.

Spielen Sie mit dem Dämpfungswert herum. Wenn Sie es auf 1 setzen, wird die Schaltfläche erweitert, ohne am Ende zu springen. Sie können dieselbe Methode auch für die Felder Benutzername und Kennwort verwenden. Anstatt sie auf den Bildschirm kommen zu lassen und am Ende einfach anzuhalten, lassen Sie sie federnd sein und ein wenig hüpfen, bevor Sie sich niederlassen.

Beispiel II

In Ihrer App müssen Sie möglicherweise das Hintergrundbild einer Ansicht automatisch ersetzen, wenn eine Aktion ausgeführt wird. Sie können dies so tun, dass ein Bild sofort ein anderes in der Ansicht ersetzt, oder Sie können es langsam einblenden, um einen schönen Übergang zu erzielen. Wir werden diesen Effekt hier erstellen. Öffnen Sie ExampleIIViewController.swift und fügen Sie Folgendes hinzu.

Hier erstellen wir eine Bildansicht und fügen sie der Hauptansicht hinzu. Wir rufen dann imageFadeIn() auf, wodurch eine zweite Ansicht mit einem anderen Bild erstellt wird. Wir fügen diese Ansicht über der ersten Bildansicht hinzu und setzen ihr Alpha auf 0. Im Animationsblock animieren wir seinen Alpha-Wert und machen ihn sichtbar. Wir verwenden dann einen Abschlussabschluss, um das Bild der Bildansicht auf das zweite Bild zu setzen, und entfernen die zweite Bildansicht aus der Ansichtshierarchie, da sie nicht mehr benötigt wird. Ich habe eine lange Verzögerung hinzugefügt, damit die Animation nicht sofort ausgeführt wird, wenn wir Beispiel II aus der Tabellenansicht auswählen. Die Dauer ist auch etwas lang, damit wir sehen können, was in der Demo vor sich geht.

Das Folgende ist der Effekt.

Beispiel III

Als nächstes betrachten wir Keyframe-Animationen. Öffnen Sie Exampleiiiiviewcontroller.swift und fügen Sie der Datei die folgenden Variablen und Funktionen hinzu. Ich habe den Code kommentiert, um jeden Schritt zu erklären.

Rufen Sie in viewDidLoad() die Funktion CreateView() auf. Fügen Sie unten in viewDidLoad () Folgendes hinzu.

1
CreateView()

Wenn Sie die App ausführen und Beispiel III aus der Tabellenansicht auswählen, sollten Sie eine rote Ansicht mit einer Bildansicht oben und einer Schaltfläche in der Mitte sehen.

Wir möchten, dass die Ansicht (die ich von nun an als alertView bezeichnen werde) verkleinert wird und nach unten aus der Sicht fällt.

Als wir die Schaltfläche erstellt haben, haben wir ihr einen Listener hinzugefügt. Wenn Sie auf die Schaltfläche tippen, wird dismissAlert () aufgerufen. Ändern Sie die Funktion wie gezeigt.

Im obigen Code erstellen wir Frames, die darstellen, was wir für die beiden Phasen der Animation der Ansicht möchten. smallFrame schrumpft auf die Hälfte der Größe von alertView, wobei der Mittelpunkt beibehalten wird und finalFrame eine Position am unteren Bildschirmrand hat, die nicht sichtbar ist.

Wir verwenden eine Keyframe-Animation mit zwei Keyframes. Der erste setzt den Frame von alertView auf smallFrame und den zweiten auf finalFrame . Das Ergebnis ist, dass die alertView auf die Hälfte ihrer Größe schrumpft und dann außer Sichtweite gerät. Beachten Sie, ich habe eine so große Zahl für die Dauer setzen – 4 Sekunden. Sie können dies ändern, ich wollte nur, dass die Animation für die Demo in Zeitlupe läuft. Führen Sie die App aus und wählen Sie Beispiel III.

Die Animation ist nicht ganz das, was wir erwartet hatten. Sie können sehen, wie die rote alertView wie erwartet animiert wird, aber der Maßstab ihrer untergeordneten Elemente ändert sich nicht. Wenn Sie den Rahmen des Elternteils ändern, werden die Rahmen der Kinder nicht automatisch geändert.

Wir verwenden eine in iOS 7 eingeführte Funktion namens UIView snapshots, um die Animation zu beheben. Auf diese Weise können Sie einen Schnappschuss einer UIView zusammen mit ihrer Hierarchie erstellen und in eine neue UIView rendern.

Fügen Sie in dismissAlert() direkt vor dem Keyframe-Animationscode Folgendes hinzu.

1
2
3
4

lassen Sie snapshot = alertView.snapshotViewAfterScreenUpdates(false)
Schnappschuss.rahmen = alertView.rahmen
Ansicht.addSubview(Schnappschuss)
alertView.removeFromSuperview()

Hier erstellen wir eine Snapshot-Ansicht und fügen sie der Hauptansicht hinzu. Wir entfernen dann die alertView aus der Ansicht, da der Snapshot sie ersetzt.

Ersetzen Sie die Keyframe-Animation durch die folgende.

Führen Sie die Anwendung aus und wenn Sie auf Schließen tippen, sollte die Ansicht (Snapshot, wirklich) wie erwartet animiert werden.

Beispiel IV

Wir haben uns angesehen, wie Sie einfache Ansichten animieren können. In diesem Beispiel sehen wir uns an, wie Sie eine Tabellenansicht animieren können.

Wenn Sie Beispiel IV aus der Tabellenansicht auswählen, finden Sie eine andere Tabellenansicht mit einer Liste von Elementen darin. Wenn die Tabellenansicht angezeigt wird, sind die Listenelemente bereits in der Tabelle positioniert. Wir möchten sie in der Ansicht animieren, um einen interessanteren Effekt zu erzielen.

Öffnen Sie ExampleIVViewController.swift und fügen Sie die folgenden Methoden hinzu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

überschreiben Sie func viewWillAppear (animiert: Bool) {
animateTable()
}
func animateTable() {
Tabellenansicht.Daten neu laden()
lassen Sie cells = tableView .visibleCells()
lassen Sie tableHeight: CGFloat = tableView.sprunghaft.Größe.höhe
für i in Zellen {
sei cell: UITableViewCell = i als UITableViewCell
Zelle.transform = CGAffineTransformMakeTranslation(0, Tabellenhöhe)
}
var-Index = 0
für a in Zellen {
sei Zelle: UITableViewCell = a als UITableViewCell
UIView .animateWithDuration(1.5, Verzögerung: 0.05 * Double(index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, Optionen: nil, Animationen: {
}.transform = CGAffineTransformMakeTranslation(0, 0);
}, fertigstellung: nil)
inhaltsverzeichnis += 1
}
}

Wenn hier die Ansicht angezeigt wird, wird die Funktion animateTable() aufgerufen. Wir laden die Tabellenansichtsdaten neu und durchlaufen die Zellen, die derzeit auf dem Bildschirm sichtbar sind, und verschieben sie jeweils an den unteren Bildschirmrand. Wir durchlaufen dann alle Zellen, die wir an den unteren Bildschirmrand verschoben haben, und animieren sie mit einer Federanimation wieder an ihre Position.

Führen Sie die App aus und Sie sollten Folgendes sehen.

Fazit

Wir haben uns verschiedene APIs angesehen, mit denen Sie den Ansichten Ihrer App Animationen hinzufügen können. Dies ist keine erschöpfende Anleitung zur Animation in iOS, aber mit den einfachen APIs, die wir uns angesehen haben, können Sie verschiedene Animationen in Ihren Apps erstellen. Um weiter in iOS-Animationen einzutauchen, können Sie sich UIKit Dynamics, Layer-Animationen, View Controller-Übergänge und sogar Bewegungseffekte ansehen. Sie können sich auch Bibliotheken von Drittanbietern wie Facebook Pop und JNWSpringAnimation Framework ansehen, mit denen Sie komplizierte Animationen einfacher erstellen können.

Das fertige Projekt können Sie hier herunterladen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.