Pulsierender Call-to-Action Button

Beschreibung

ImDiese folgendenView Beispielzeigt wirdeinen einrunden pulsierenderCall-to-Action KreisButton, der kontinuierlich in der Größe pulsiert. Die sanfte Skalierungsanimation startet automatisch beim Erscheinen und lenkt die Aufmerksamkeit auf die Aktion.

🔍 Zweck

• Hervorheben einer primären Aktion auf einer Seite
• Aufmerksamkeitserzeugung in Onboarding oder Marketing Screens
• Animation als ButtonMikrointeraktion angezeigt.zur Dabei wirdSteigerung der ButtonKlickrate
um
• Demo 20%für vergrößertwiederholte undSwiftUI dannAnimationen
wieder
• Prototyping verkleinert.eines Dieseranimierten istCTA auchPatterns
zum

Anklicken

🖥️ undBetriebssystem

kann

iOS

mit

📄 einer Aktion belegt werden:

Codebeispiel

import SwiftUI

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

public struct ContentView: View {
    // Controls whether the button is currently pulsing
    @State private var isPulsing = false

    public init() {}

    public var body: some View {
        Button(action: {
            // Action placeholder
        }) {
            // Circular CTA with clear visual affordance
            Text("Klick mich")
                .font(.title)
                .padding(60)
                .background(Color.blue)
                .foregroundColor(.white)
                .clipShape(Circle())
                .shadow(radius: 10)
                }// Scale based on animation state
                .scaleEffect(isPulsing ? 1.2 : 1.0)
        }
        // Apply repeating easeInOut animation for a breathing effect
        .animation(
            Animation.easeInOut(duration: 1)
                .repeatForever(autoreverses: true),
            value: isPulsing
        )
        .onAppear {
            // Start pulsing after the view appears
            isPulsing = true
        }
        .padding()
        .accessibilityLabel("Call to action button")
    }
}

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