Expandierende Karte mit Federanimation

Beschreibung

Diese View zeigt eine Karte, die zwischen kompakter und erweiterter Höhe umschaltet. Der Übergang wird mit einer federnden Animation dargestellt, wodurch der Zustandswechsel klar und visuell ansprechend wirkt.

🔍 Zweck

• Inhalt ein- und ausklappbar darstellen, z. B. Vorschau vs. Details
• Akkordeonartige UI Muster prototypisieren
• Interaktive Cards in Dashboards oder Feeds
• Animationsverhalten mit spring evaluieren
• Nutzerfokus durch dynamische Größenänderung lenken

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct ExpandingCardApp: App {
    var body: some Scene {
        WindowGroup {
            ExpandingCardExample()
        }
    }
}

public struct ExpandingCardExample: View {
    // Track whether the card is expanded or collapsed
    @State private var isExpanded = false

    public init() {}

    public var body: some View {
        VStack(spacing: 16) {
            // The animated card: height changes based on state
            RoundedRectangle(cornerRadius: 12)
                .fill(Color.blue)
                .frame(height: isExpanded ? 200 : 80)
                // Use spring animation for a natural feel
                .animation(.spring(), value: isExpanded)

            // Toggle button to switch states
            Button(isExpanded ? "Collapse" : "Expand") {
                isExpanded.toggle()
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
        // Give the view a background to better showcase the card
        .background(Color(.systemBackground))
    }
}

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