Pulsierender Kreis mit Größenanimation

Beschreibung

DasDiese istView zeigt einen Kreis, der seine Größe kontinuierlich vergrößert und verkleinert. Durch eine Phasenwiederholte lineare Animation entsteht ein gleichmäßiger pulsierender Effekt.

🔍 Zweck

• Visualisierung eines Lade- oder Aktivitätsindikators
• Gestaltung von einemAufmerksamkeitseffekten Kreis. Durch ändernin der PhaseUI
wird
• Demonstration dervon KreisZustandsanimationen größerin undSwiftUI
wieder
• Prototyping kleinervon einMikrointeraktionen
einer
• Einsatz gleichmäßigenin Bewegung.Gesundheits- oder Fitness-Apps als Puls-Symbol

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

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

public struct ContentView: View {
    // Phase controls the scale factor of the circle
    @State private var phase = 0

    public init() {}

    public var body: some View {
        VStack {
            Circle()
                // Adjust circle size based on animation phase
                .frame(width: 50 + CGFloat(phase) * 20,
                       height: 50 + CGFloat(phase) * 20)
                .foregroundColor(.blue)
                .onAppear {
                    // Start a repeating animation that oscillates the phase value
                    withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: true)) {
                        phase = 3
                    }
                }
        }
        .padding()
    }
}

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