Animationen mit SwiftUI – Teil 1

Die Animation-Structure

SwiftUI bringt ein eigenes System zur Umsetzung von View-Animationen mit. Damit lassen sich Animationen abseits der Standards umsetzen, die man beispielsweise beim Einblenden von Sheets oder beim Bearbeiten von Zellen einer Liste bereits out of the box erhält.

In dieser Artikelreihe stelle ich euch das Animations-System von SwiftUI Schritt für Schritt vor und erläutere die verschiedenen relevanten Aspekte. Los geht’s hierbei mit der Structure Animation.

Animation ist das Herzstück für die Umsetzung von Animationen mit SwiftUI. Über sie legt ihr fest, wie eine Animation ablaufen und wie lange sie dauern soll. Instanzen dieser Structure könnt ihr dann im nächsten Schritt mit Views koppeln, um deren Statusänderungen zu animieren (dazu mehr in den folgenden Artikeln dieser Serie).

Animation bringt diverse Properties und Methoden mit, mit denen sich neue Animation-Instanzen erzeugen lassen. Einfache Animationen unterteilen sich in die folgenden Bereiche:

• Linear: Die Animation läuft über einen bestimmten Zeitraum kontinuierlich und gleichmäßig ab.
• Ease In: Die Animation beginnt langsam und endet schnell.
• Ease Out: Die Animation beginnt schnell und endet langsam.
• Ease In Out: Die Animation beginnt und endet langsam.

Um entsprechende Animation-Instanzen zu erzeugen, könnt ihr sowohl passende Type Properties als auch Type Methods nutzen. Letztere haben den Vorteil, dass ihr zusätzlich über einen Parameter die Dauer der Animation definieren könnt; bei den Type Properties kommt immer eine Standarddauer zum Einsatz.

Das folgende Listing führt einige Beispiele auf, wie sich Animation-Instanzen auf Basis der vorangegangenen Bereiche erstellen lassen:

// Eine einfache lineare Animation.
Animation.linear

// Eine lineare Animation mit einer Dauer von 3 Sekunden.
Animation.linear(duration: 3)

// Eine Ease In-Animation mit einer Dauer von 2 Sekunden.
Animation.easeIn(duration: 2)

// Eine Ease Out-Animation mit einer Dauer von 5 Sekunden.
Animation.easeOut(duration: 5)

// Eine einfache Ease In Out-Animation.
Animation.easeInOut

// Eine Ease In Out-Animation mit einer Dauer von 2 Sekunden.
Animation.easeInOut(duration: 2)

In den folgenden Artikeln erfahrt ihr, wie ihr solche Instanzen zum Animieren von SwiftUI-Views nutzen könnt.

Euer Thomas