Animierter Zähler

n diesem Beispiel wird ein animierter Zähler dargestellt. Die Zahl verändert sich mit einer fließenden Animation: Sie verschwindet entweder nach oben oder erscheint von unten – abhängig davon, ob hoch- oder heruntergezählt wird.

Die Animation wird durch den gezielten Einsatz von .transition in Kombination mit einer .id()-Änderung ausgelöst. Dadurch reagiert SwiftUI korrekt auf jeden neuen Zählerwert und führt den gewünschten Übergang aus.

import SwiftUI

struct ContentView: View {
    @State private var counter = 0

    var body: some View {
        VStack {
            ZStack {
                Text("\(counter)")
                    .font(.system(size: 80, weight: .bold))
                    .transition(.asymmetric(
                        insertion: .move(edge: .bottom).combined(with: .opacity),
                        removal: .move(edge: .top).combined(with: .opacity)
                    ))
                    .id(counter) // Wichtiger Trick, um den Übergang sauber auszulösen
            }
            .frame(height: 100) // Feste Höhe für konsistente Animation

            Button(action: {
                withAnimation(.spring(response: 0.4, dampingFraction: 0.6, blendDuration: 0.2)) {
                    counter += 1
                }
            }) {
                Text("Increase")
                    .font(.title)
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .clipShape(Capsule())
            }
        }
    }
}

Solche Animationen eignen sich besonders gut für dynamische Interfaces wie Scoreboards, Countdown-Timer oder Live-Statistiken.