Skip to main content

Symbol-Animation mit Toggle

Beschreibung

Diese View zeigt ein Symbol, das durch eine Animationseffekt (.bounce) hervorgehoben wird. Über einen Button kann der Effekt aktiviert oder deaktiviert werden, wodurch eine interaktive visuelle Rückmeldung entsteht.

🔍 Zweck

  • Demonstration von SF Symbol-Effekten
  • Aufbau einer interaktiven UI mit Animation
  • Einsatz als Like- oder Favoriten-Indikator
  • Visualisierung von Statusänderungen
  • Experimentieren mit SwiftUI Symbolanimationen

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

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

struct ContentView: View {
    // Track the animation state
    @State private var isActive = false

    var body: some View {
        VStack(spacing: 20) {
            // Heart symbol with bounce effect triggered by state
            Image(systemName: "heart.fill")
                .font(.system(size: 50))
                .symbolEffect(.bounce, value: isActive)

            // Button toggles the state to activate/deactivate effect
            Button("Toggle Effect") {
                isActive.toggle()
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

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