Skip to main content

Pulsierender Kreis mit Größenanimation

Beschreibung

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

🔍 Zweck

  • Visualisierung eines Lade- oder Aktivitätsindikators
  • Gestaltung von Aufmerksamkeitseffekten in der UI
  • Demonstration von Zustandsanimationen in SwiftUI
  • Prototyping von Mikrointeraktionen
  • Einsatz in 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()
}