Pulsierendes Herz-Symbol
Beschreibung
HierDiese wirdView zeigt ein pulsierendesHerzsymbol, Herzdas angezeigt,durch welcheseine 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
DauerschleifeSwiftUI
🖥️ dieBetriebssystem
iOS
📄 die Geschwindigkeit festgelegt werden. Je kleiner der Wert desto schneller schlägt es.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()
}