Animierter Zähler mit Übergangseffekt

Beschreibung

nDiese diesemView Beispielzeigt wird ein animiertereinen Zählerhler, dargestellt.der beim Erhöhen mit einem animierten Übergang zwischen den Zahlen wechselt. Die ZahlEin- verändertund 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 AnimationAusblendung wird durch deneine gezielten EinsatzKombination von .transitionBewegung und Transparenz umgesetzt, was die Änderung visuell hervorhebt.

🔍 Zweck

• Darstellung von dynamischen Werten mit ansprechender Animation
• Einsatz in KombinationGamification-Elementen mitwie einerPunkteständen
.id()-Änderung
• Verbesserung ausgelöst.der DadurchNutzerwahrnehmung reagiertbei Statusänderungen
• Demonstration von asymmetrischen Transitionen in SwiftUI
korrekt
• Prototyping auffür jedeninteraktive neuenDashboards oder Zählerwerthleranzeigen
und

führt

🖥️ denBetriebssystem

gewünschten

iOS

Übergang

📄 aus.

Codebeispiel

import SwiftUI

@main
struct AnimatedCounterApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

public struct ContentView: View {
    // Track the current counter value
    @State private var counter = 0

    public init() {}

    public var body: some View {
        VStack {
            ZStack {
                // Display the counter value with custom transition
                Text("\(counter)")
                    .font(.system(size: 80, weight: .bold))
                    .transition(.asymmetric(
                        // Insert animation: slide in from bottom with fade
                        insertion: .move(edge: .bottom).combined(with: .opacity),
                        // Removal animation: slide out to top with fade
                        removal: .move(edge: .top).combined(with: .opacity)
                    ))
                    .id(counter) // WichtigerForce Trick,new umidentity denso Übergangtransition sauberis auszulösentriggered
            }
            // Fixed height ensures smooth animation regardless of value
            .frame(height: 100)

            // FesteButton Höheto fürincrement konsistentethe Animationcounter
            Button(action: {
                withAnimation(.spring(response: 0.4, dampingFraction: 0.6, blendDuration: 0.2)) {
                    counter += 1
                }
            })incrementCounter) {
                Text("Increase")
                    .font(.title)
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .clipShape(Capsule())
            }
        }
        .padding()
    }

    // Increment counter with spring animation for natural motion
    private func incrementCounter() {
        withAnimation(.spring(response: 0.4, dampingFraction: 0.6, blendDuration: 0.2)) {
            counter += 1
        }
    }
}

// Modern Swift 5.10+ preview syntax
#Preview {
    ContentView()
}

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