Wie Sie erweiterte iOS-Animationen mit automatischem Layout erstellen.

Von Savvy Apps wurde eine neue Animationstechnik entwickelt, die Old-School-Animationen mit Auto-Layout kombiniert. Die Technik umgeht die Einschränkungen, die Entwicklern auferlegt werden, wenn Sie versuchen, mit Auto-Layout zu animieren.

Die meisten Auto-Layout-Animationsanleitungen sagen im Grunde das Gleiche aus: Update-Beschränkungen und Animationen.

Für fortgeschrittene Animationen wäre es jedoch fast unmöglich, nur die Einschränkungen zu aktualisieren.

Indem Sie sich nur auf Einschränkungen verlassen, beschränken Sie sich auf die Arten von Animationen, die Sie in ihrer Anwendung erreichen können. Dieser Artikel geht der Frage nach, wie man die Grenzen der Einschränkungen umgehen kann, indem man Auto-Layout auf neue Art und Weise verwendet.

Auto Layout und Animation.

Auto-Layout ist ein leistungsfähiges Tool, das alle Ansichtslayouts in iOS steuert. Selbst wenn Sie es nicht direkt verwenden, wandelt das Betriebssystem die Eigenschaften der Ansicht, wie ein Frame, automatisch in Einschränkungen um, bevor es die Ansichten auslegt.

In der Praxis ist Auto-Layout von Projekten weit verbreitet, weil es aufgrund seiner visuellen Beschaffenheit leicht zu verstehen ist, wenn man an einer Ansicht arbeitet, insbesondere an einer, die man nicht erstellt hat. Eine der Nachteile von Auto Layout ist jedoch, dass es sehr starr ist. Da Animationen in iOS wichtig sind, müssen verschiedene Wege gefunden werden, um verschiedene Arten von Animationen mit Auto Layout umzusetzen.

Animieren mit Einschränkungen.

Die Verwendung von Constraints ist die einfachste Art der Animation mit Auto-Layout. Da es bereits viele Tutorials zu diesem Thema gibt, werden wir hier nicht allzu ausführlich darauf eingehen. Das Wesentliche ist, dass Sie die Constraints in ihrer Ansicht ändern, indem Sie entweder die konstante Eigenschaft ändern, Constraints erstellen, löschen und layoutlfNeeded() innerhalb eines Animationsblocks aufrufen:

Der große Nachteil dieses Ansatzes ist, dass fortgeschrittenere Animationen den Überblick über mehrere Einschränkungen erfordern, die mühsam und schwer zu pflegen sein können.

Diese Sicht wirkt sich aber auch auf andere Sichten aus. Sagen wir, es interagiert mit zweien in jedem Staat. Dies beinhaltet, dass wir zwei weitere Einschränkungen pro Ansicht verfolgen müssen. Dies bringt uns zu insgesamt 12 Einschränkungen, die um ihr Storyboard herum verteilt sind, von denen die Hälfte deaktiviert werden muss, um Layout-Fehler zu vermeiden und die alle an Ausgänge in ihrem Controller angeschlossen werden müssen. Wenn Sie gleichzeitig eine zweite Ansicht animieren wollen, werden daraus 24 Constraints. Wie Sie sehen, nimmt die Komplexität sehr schnell zu.

Animieren mit Transform.

Die Transform-Eigenschaft einer UIView ist eine gute Möglichkeit, um schnell einfache Animationen zu erstellen, die das Layout des Bildschirms nicht verändern. CGAffineTransforms unterstützen Übersetzung, Rotation, Skalierung und jede Kombination davon. Der beste Fall für Transformationsansichten sind Ansichten, die nicht die Position ändern, sondern eine Animation haben. Wenn es ihnen schwer fällt, es sich vorzustellen, stellen Sie sich eine Ansicht vor, die ihre Position nicht ändert, wenn sie erst einmal an ihrem Platz ist, sondern von oben nach unten rutscht, wenn die Ansicht zum ersten Mal erscheint.

Um den Übergang zu animieren, können wir die Transformation verwenden, um die Ansicht vom Bildschirm zu übersetzen, bevor sie erscheint und auf dem Bildschirm, sobald sie erscheint.

Sie können auch andere Eigenschaften wie Alpha oder Skalierung mischen und die Ansicht drehen. Es gibt viele andere Anwendungsfälle für diese Art von Animation, wie z.B. das Wackeln von Symbolen, das Aufprallen eines Buttons beim Tippen oder das Schütteln eines Textfeldes, wenn dessen Inhalt die erforderliche Validierung nicht besteht.

Erstellen von erweiterten Auto-Layout-Animationen.

Wenn Sie sich die Player-Animation ansehen, die in der Cato Institute App, CatoAudio, gemacht wurde, können Sie sich vielleicht nicht vorstellen, wie Sie eine der oben genannten Methoden verwenden würden, um sie zu implementieren. Die Antwort ist, dass Sie es wahrscheinlich nicht können. Die Constraints-Methode würde nicht funktionieren, da die Elemente, die wir animieren wollen, das Layout der übrigen Elemente in jedem Zustand beeinflussen. Die Änderung ihrer Beschränkungen würde den Rest der Elemente beeinflussen und das wollen wir nicht. Die erwähnte Transformationsmethode eignet sich eher für einfachere Animationen. Während wir in der Lage sein könnten, diese Animation mit einer Transformation zu implementieren, wäre der Prozess sehr ähnlich zu dem, was wir eigentlich erklären wollen, mit der zusätzlichen Schwierigkeit, die genaue Transformation herauszufinden, die wir brauchen.

In dieser Animation gibt es drei animierte Elemente, die sowohl im kompakten als auch im erweiterten Zustand vorliegen: die Wiedergabtaste, das Artwork und die Wiedergabeleisten. Diese Elemente, insbesondere die Wiedergabetaste und die Bildansicht, spielen in jedem Layout eine sehr große Rolle. Wenn wir versuchen würden, Constraints zu verwenden, um diesen Übergang durchzuführen, müssten wir Dutzende von Constraints im Auge behalten. Selbst wenn wir diesen Weg noch gehen wollten, würden wir die Fähigkeit verlieren, den Übergang unter anderem den Benutzereingaben folgen zu lassen.

Die Art und Weise, wie diese Animation umgesetzt wurde, ist eigentlich einfacher als es scheint. Zuerst wurde für jeden Zustand ein Container-View im Container erstellt. Jeder Container hatte ein statisches Layout mit allen Elementen, die nicht animiert waren. In jedem Container wurden unsichtbare Ansichten erstellt, die das Frame jedes animierten Elements in diesem Zustand darstellen. Diese Ansichten halfen bei der Erstellung des Layouts, als wäre das Element vorhanden. Dann haben wir die eigentlichen Elemente zu unserer Hauptansicht hinzugefügt. Diese Ansichten hatten keine Einschränkungen, das wir ihr Frame manuell setzen. Da alle Ansichten vorhanden sind, haben wir sie alle durch der IBOutlets für jedes Element verbunden: compactReferenceView, expandedReferenceView und elementView.

Beim Ausführen der Animation wurde eine Lerp-Funktion verwendet, um das Frame des Elements im aktuellen Zustand zu erhalten und ihn auf das Element zu setzen. Wir haben dieses Frame berechnet, wenn der Benutzer seinen Finger bewegt hat oder mit Hilfe eines CADisplayLink, wenn er die automatische Animation ausgelöst hat. Lerp ist eine lineare Interpolationsfunktion, die ihnen hilft, einen Wert zwischen zwei Werten bei einem Fortschritt zwischen 0 und 1 zu definieren, definiert durch diese Formel x = X0 + (x1 – x0) x p. Eine Lerp-Funktion ist naturgemäß linear. Um die Animation besser aussehen zu lassen, wurde eine Animationskurve auf die Fortschrittsvariable angewendet, bevor Sie in die Lerp-Funktion übergeben wurde.

Abschließende Bemerkung.

Um ihnen zu helfen, diese Technik für ihre eigenen Anwendungen zu übernehmen, wurde ein Projekt vorbereitet, das die Anwendung dieser Animationsmethode weiter demonstriert. Bitte beachten Sie, dass dieses Beispielprojekt nicht alles detailliert enthält, die bei der finalen Animation in der Cato Institute App vorhanden sind, wie z.B. das Folgen der Finger- und benutzerdefinierten Animationskurven.

Vielen Dank für ihren Besuch.