Skip to main content

Symbol-Animation mit Toggle

Beschreibung

BeimDiese AnklickenView deszeigt Buttonsein wirdSymbol, das Herzdurch 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 einemAnimation
  • kurzen
  • Einsatz Effektals beweget.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 {
        VStackVStack(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()
}