Animationen mit SwiftUI – Teil 4

Verschiedene Animationen auf eine View anwenden

Besitzt eine View mehr als eine animierbare Eigenschaft, ist es möglich, jede davon mit einer eigenen separaten Animation zu versehen. So lässt sich beispielsweise eine Änderung der Deckkraft anders animieren als die gleichzeitige Anpassung der Hintergrundfarbe einer View.

Um solche Kombinationen von verschiedenen Animationen umzusetzen, nutzt man den animation(_:)-Modifier und wendet ihn auf all jene Eigenschaften an, die mit jeweils einer eigenen Animation versehen werden sollen.

Ein konkretes Beispiel hierzu findet ihr im folgenden Listing. Darin wird eine Text-View mit zwei animierbaren Eigenschaften deklariert: einer Hintergrundfarbe und einer Deckkraft. Für beide Eigenschaften wird aber jeweils eine eigene Animation mithilfe des animation(_:)-Modifiers festgelegt. So ändert sich die Hintergrundfarbe linear über einen Zeitraum von drei Sekunden, während die Deckkraft mit einer Ease-In-Animation versehen ist.

struct ContentView: View {
    @State private var isActive = false
    
    var body: some View {
        VStack {
            Text("Some text")
                .background(
                    isActive ? Color.green : Color.red
                )
                .animation(.linear(duration: 3))
                .opacity(isActive ? 1 : 0.5)
                .animation(.easeIn)
            Divider()
            Button("Update text presentation") {
                isActive.toggle()
            }
        }
    }
}

Dieses Prinzip lässt sich übrigens auch dazu nutzen, Animationen für einzelne Eigenschaften gänzlich zu deaktivieren. Nehmen wir beispielsweise an, in dem vorigen Beispiel soll lediglich die Änderung der Deckkraft animiert werden. Entfernt man den entsprechenden animation(_:)-Modifier nach dem background(_:)-Modifier, greift für den Hintergrund noch immer dieselbe Animation wie für die Deckkraft. Um die Animation des Hintergrunds aber vollständig zu unterbinden, ruft man nach dem background(_:)-Modifier dennoch den animation(_:)-Modifier auf, übergibt als Parameter aber nil. So legt man fest, dass die zugehörige View nicht animiert werden soll (siehe Code im folgenden Listing).

struct ContentView: View {
    @State private var isActive = false
    
    var body: some View {
        VStack {
            Text("Some text")
                .background(
                    isActive ? Color.green : Color.red
                )
                .animation(nil)
                .opacity(isActive ? 1 : 0.5)
                .animation(.easeIn)
            Divider()
            Button("Update text presentation") {
                isActive.toggle()
            }
        }
    }
}

Durch Einsatz mehrerer animation(_:)-Modifier lässt sich somit eine View, die aus mehreren animierbaren Eigenschaften besteht, mit unterschiedlichen Animationen versehen.

Euer Thomas

Bisherige Artikel aus dieser Serie

• Teil 1: Die Animation-Structure: https://letscode.thomassillmann.de/animationen-mit-swiftui/
• Teil 2: Der animation(_:)-Modifier: https://letscode.thomassillmann.de/animationen-mit-swiftui-2/
• Teil 3: Die withAnimation(_:_:)-Funktion: https://letscode.thomassillmann.de/animationen-mit-swiftui-teil-3/