Animationen mit SwiftUI – Teil 2

Der animation(_:)-Modifier

Im ersten Teil dieser Artikelreihe habe ich euch die Animation-Structure vorgestellt und verschiedene Beispiele gezeigt, wie sich grundlegende Animationen mithilfe dieses Typs im Code umsetzen lassen. Nun geht es weiter mit der Anwendung einer solchen Animation auf eine View.

Doch um überhaupt eine Animation anwenden zu können, muss man zunächst einmal verstehen, wie Animationen in SwiftUI ablaufen. So lassen sich Animationen nur auf sogenannte animierbare Eigenschaften einer View anwenden. Dazu gehören beispielsweise Farbe, Deckkraft, Größe oder Rotation. Nur diese Elemente lassen sich auch mit Animationen in SwiftUI versehen.

Besitzt eine View wenigstens eine solche animierbare Eigenschaft, könnt ihr den animation(_:)-Modifier einsetzen, um eine Animation mit der gewünschten Eigenschaft zu koppeln. Als Parameter erwartet der animation(_:)-Modifier eine Animation-Instanz.

Um das ganze einmal in der Praxis zu betrachten, findet ihr nachfolgend ein konkretes Beispiel. Darin erfolgt die Deklaration einer View mit einem Button und einem Text. Durch Betätigung des Buttons ändert sich ein Status, der die für den Text zu verwendende Hintergrundfarbe enthält. Genau jener Wechsel der Hintergrundfarbe (einer animierbaren Eigenschaft) soll mit einer einfachen Animation versehen werden. Entsprechend folgt ein Aufruf des animation(_:)-Modifiers. Als Animation kommt eine simple lineare Variante zum Einsatz (weitere Varianten wurden im ersten Artikel dieser Reihe vorgestellt).

struct ContentView: View {
    @State private var color = Color.blue
    
    var body: some View {
        VStack {
            Button("Change background color") {
                color = changeColor()
            }
            Divider()
            Text("Some text with background color")
                .font(.title)
                .background(color)
                .animation(.linear)
        }
    }
    
    private func changeColor() -> Color {
        color == .red ? .blue : .red
    }
}

Betätigt man nun den Button, ändert sich die Hintergrundfarbe des Textes mit einer Animation. Die Animation-Instanz bestimmt, wie die Animation abläuft (linear), und der animation(_:)-Modifier ist mit der zu animierenden Eigenschaft (der Hintergrundfarbe) gekoppelt.

Dieses Beispiel zeigt also, wie ihr ganz grundlegend eine Animation mittels SwiftUI umsetzen könnt. Die folgenden Artikel beleuchten die zugrundeliegenden Konzepte noch detaillierter und zeigen weitere Möglichkeiten zur Animationserstellung auf.

Euer Thomas

Bisherige Artikel dieser Serie

• Teil 1: Die Animation-Structure: https://letscode.thomassillmann.de/animationen-mit-swiftui/