Press "Enter" to skip to content

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Impressum

Thomas Sillmann
Kettererstraße 6
D-63739 Aschaffenburg
E-Mail: contact@thomassillmann.de
Mobil: +49 (0) 151 65125650
Web: https://www.thomassillmann.de/

Inhaltlich Verantwortlicher gemäß §55 Abs. 2 RStV: Thomas Sillmann (Anschrift siehe oben)

Haftungshinweis: Trotz sorgfältiger inhaltlicher Kontrolle übernehme ich keine Haftung für die Inhalte externer Links. Für die Inhalte der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.

Kontakt und soziale Netzwerke

© 2019-2021 by Thomas Sillmann