Skip to main content

Pulsierendes Herz-Symbol

Beschreibung

Diese View zeigt ein Herzsymbol, das durch eine wiederholte Skalierungsanimation einen pulsierenden Effekt erhält. Beim Erscheinen der View startet die Animation automatisch und läuft unendlich mit sanften Übergängen.

🔍 Zweck

  • Visualisierung eines Like- oder Favoriten-Status
  • Animiertes Icon für Gesundheits- oder Fitness-Apps
  • Aufmerksamkeitserzeugung bei wichtigen Symbolen
  • Prototyping von UI-Mikrointeraktionen
  • Demonstration von wiederholten Animationen in SwiftUI

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

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

public struct ContentView: View {
    // Track whether the heart is currently beating
    @State private var isBeating = false

    public init() {}

    public var body: some View {
        Image(systemName: "heart.fill")
            .resizable()
            .scaledToFit()
            .frame(width: 100, height: 100)
            .foregroundColor(.red)
            // Apply scaling effect for heartbeat animation
            .scaleEffect(isBeating ? 1.4 : 1.0)
            // Use repeating animation with easeInOut timing
            .animation(
                Animation.easeInOut(duration: 0.5)
                    .repeatForever(autoreverses: true),
                value: isBeating
            )
            // Start animation on appear
            .onAppear {
                isBeating = true
            }
            .padding()
    }
}

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