Animierter Zähler

In diesem Beispiel wird ein animierter Zähler angezeigt, wo die Zahlen nach oben oder unten verschwinden, je nachdem in welche Richtung gezählt wird.

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())
            }
        }
    }
}

#Preview {
    ContentView()
}