Transitions

Das Problem: Einfaches Einblenden reicht nicht immer

In Lektion 3.23 hast du gesehen: Ein if mit withAnimation blendet eine View sanft ein und aus. Das ist ein guter Standard. Aber oft passt einfaches Einblenden nicht:

• Eine Benachrichtigung soll von oben hereinrutschen und nach oben wieder verschwinden.
• Ein Hinweis soll aus dem Nichts aufploppen.
• Eine Karte soll von rechts kommen und nach links gehen, wie beim Durchblättern.

Diese Art, wie eine View den Bildschirm betritt und verlässt, heißt Transition.

Die Grundidee

Transitions wirken nur bei Views, die eingefügt oder entfernt werden, typischerweise durch ein if:

struct BannerDemo: View {
    @State private var showBanner = false

    var body: some View {
        VStack {
            if showBanner {
                Text("Gespeichert!")
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(.green)
                    .foregroundStyle(.white)
                    .transition(.move(edge: .top))
            }

            Spacer()

            Button("Banner umschalten") {
                withAnimation {
                    showBanner.toggle()
                }
            }
        }
    }
}

Zwei Dinge sind nötig:

1. .transition(...) an der View, die erscheint oder verschwindet, beschreibt wie.
2. Eine Animation, hier withAnimation, sorgt dafür, dass es animiert wird.

Die eingebauten Transitions

.transition(.opacity)                 // ein- und ausblenden (Standard)
.transition(.scale)                   // aus der Mitte wachsen, dorthin schrumpfen
.transition(.scale(scale: 0.5, anchor: .bottom))
.transition(.slide)                   // links rein, rechts raus
.transition(.move(edge: .bottom))     // von einer Kante herein und dorthin zurück
.transition(.push(from: .trailing))   // schiebt sich herein und blendet dabei
.transition(.blurReplace)             // mit Unschärfe ein- und ausblenden

• .opacity ist der Standard, wenn du nichts angibst.
• .scale wächst aus dem Mittelpunkt. Mit anchor: von einem anderen Punkt aus, etwa unten.
• .slide kommt immer von links und geht nach rechts.
• .move(edge:) kommt von einer Kante und geht zur selben Kante zurück.
• .push(from:) und .blurReplace eignen sich besonders, wenn eine View eine andere ersetzt.

Transitions kombinieren

Mit .combined(with:) wirken mehrere Transitions gleichzeitig:

.transition(.scale.combined(with: .opacity))
.transition(.move(edge: .bottom).combined(with: .opacity))

Die erste Zeile lässt eine View gleichzeitig wachsen und einblenden, ein typisches „Aufploppen“. Die zweite rutscht von unten herein und wird dabei sichtbar.

Asymmetrische Transitions

Manchmal soll eine View anders gehen, als sie gekommen ist. Etwa eine Karte, die von rechts kommt und nach links verschwindet:

.transition(.asymmetric(
    insertion: .move(edge: .trailing),
    removal: .move(edge: .leading)
))

• insertion: wie die View erscheint
• removal: wie sie verschwindet

Views austauschen

Ein häufiger Fall: Statt eine View ein- und auszublenden, wird sie durch eine andere ersetzt. Zum Beispiel beim Durchblättern von Karten:

struct CardSwitcher: View {
    let words = ["Hallo", "Bonjour", "Hola", "Ciao", "Hej"]
    @State private var index = 0

    var body: some View {
        VStack(spacing: 30) {
            Text(words[index])
                .font(.largeTitle.bold())
                .frame(width: 240, height: 140)
                .background(.indigo.gradient)
                .foregroundStyle(.white)
                .clipShape(.rect(cornerRadius: 20))
                .id(index)
                .transition(.asymmetric(
                    insertion: .move(edge: .trailing).combined(with: .opacity),
                    removal: .move(edge: .leading).combined(with: .opacity)
                ))

            Button("Weiter") {
                withAnimation(.snappy) {
                    index = (index + 1) % words.count
                }
            }
        }
    }
}

Das Entscheidende ist .id(index). Ohne .id sieht SwiftUI immer dieselbe Text-View, deren Inhalt sich ändert, und blendet nur den Text über. Mit .id(index) bekommt die View bei jedem neuen Index eine neue Identität: SwiftUI hält sie für eine neue View. Die alte wird entfernt (removal), die neue eingefügt (insertion), und beide Transitions laufen gleichzeitig.

Inhalt statt View wechseln

Willst du nicht zwei Views tauschen, sondern nur den Inhalt einer View schön wechseln, gibt es contentTransition (Lektion 3.23):

Text(status)
    .contentTransition(.interpolate)

.interpolate versucht, zwischen den Buchstabenformen zu überblenden. Für Zahlen ist .numericText() die beste Wahl.

Transitions in Listen

In einem ForEach gelten Transitions für Elemente, die hinzukommen oder entfernt werden:

struct NotificationList: View {
    @State private var messages: [String] = []

    var body: some View {
        VStack {
            ForEach(messages, id: \.self) { message in
                Text(message)
                    .padding()
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(.blue.opacity(0.15))
                    .clipShape(.rect(cornerRadius: 12))
                    .transition(.move(edge: .top).combined(with: .opacity))
            }

            Spacer()

            Button("Neue Nachricht") {
                withAnimation(.bouncy) {
                    messages.insert("Nachricht \(messages.count + 1)", at: 0)
                }
            }
        }
        .padding()
    }
}

Jede neue Nachricht rutscht von oben herein, und die bestehenden rücken animiert nach unten. Das funktioniert, weil jedes Element über seine id erkennbar bleibt.

Eigene Transitions

Wenn keine der eingebauten passt, baust du deine eigene. Eine Transition beschreibt, wie eine View im Zustand „gerade erscheinend bzw. verschwindend“ (isIdentity == false) und im normalen Zustand (isIdentity == true) aussieht:

struct TwirlTransition: Transition {
    func body(content: Content, phase: TransitionPhase) -> some View {
        content
            .scaleEffect(phase.isIdentity ? 1 : 0.3)
            .rotationEffect(.degrees(phase.isIdentity ? 0 : 180))
            .opacity(phase.isIdentity ? 1 : 0)
    }
}

extension Transition where Self == TwirlTransition {
    static var twirl: TwirlTransition { TwirlTransition() }
}

Dann:

.transition(.twirl)

Die View dreht sich beim Erscheinen aus einer halben Umdrehung in die Normallage und wächst dabei.

Die Erweiterung mit where Self == TwirlTransition sorgt dafür, dass du .twirl schreiben kannst wie bei den eingebauten Transitions. Das ist dasselbe Muster wie bei eigenen Styles (Lektion 3.28).

Typische Fehler

Transition wird nicht ausgeführt

• Die Änderung ist nicht animiert. Füge withAnimation hinzu.
• Die View wird gar nicht eingefügt oder entfernt, sondern nur verändert. Transitions wirken nur bei if, switch, ForEach oder geänderter .id.

Transition beim Verschwinden funktioniert nicht

Die .animation(_:value:) hängt an der View, die verschwindet. Die ist danach weg und kann nichts mehr animieren. Häng die Animation an den umgebenden Container oder verwende withAnimation.

Die View springt an ihren Platz

Transitions beschreiben nur Erscheinen und Verschwinden. Wie die anderen Views ausweichen, bestimmt die Animation. Ist die Animation sehr kurz oder .linear, wirkt es ruckelig. Eine Feder sieht meist am besten aus.

.id() zu weit außen

Setzt du .id() an einen großen Container, wird bei jeder Änderung alles darin neu erzeugt, einschließlich seines Zustands. Häng .id() so eng wie möglich an die View, die ausgetauscht werden soll.

FAQ

Übungen

struct CopyHint: View {
    @State private var showHint = false

    var body: some View {
        ZStack {
            Button("Kopieren") {
                withAnimation(.bouncy) { showHint = true }
            }

            if showHint {
                Text("Kopiert!")
                    .padding(.horizontal, 16)
                    .padding(.vertical, 10)
                    .background(.ultraThinMaterial)
                    .clipShape(.capsule)
                    .offset(y: -60)
                    .transition(.scale.combined(with: .opacity))
            }
        }
        .task(id: showHint) {
            guard showHint else { return }
            try? await Task.sleep(for: .seconds(2))
            withAnimation { showHint = false }
        }
    }
}

Zusammenfassung

• Transitions beschreiben, wie Views erscheinen und verschwinden.
• Sie brauchen immer eine Animation, etwa withAnimation.
• Eingebaut: .opacity, .scale, .slide, .move(edge:), .push(from:), .blurReplace.
• .combined(with:) kombiniert, .asymmetric unterscheidet Kommen und Gehen.
• .id(wert) macht aus einer geänderten View eine neue, sodass Transitions beim Austauschen greifen.
• Eigene Transitions mit dem Transition-Protokoll und phase.isIdentity.

Spickzettel

if isVisible {
    Banner()
        .transition(.move(edge: .top).combined(with: .opacity))
}
Button("Zeigen") { withAnimation { isVisible.toggle() } }

.transition(.asymmetric(insertion: .move(edge: .trailing),
                        removal: .move(edge: .leading)))

Card(item: items[i])
    .id(i)                       // neue Identität → Transition
    .transition(.push(from: .trailing))

struct MyTransition: Transition {
    func body(content: Content, phase: TransitionPhase) -> some View {
        content.opacity(phase.isIdentity ? 1 : 0)
    }
}