SF Symbols Animation in SwiftUI: 12 Effekte und 5 Farbmodi

SF Symbols Animationen in SwiftUI sind Release für Release gewachsen. iOS 17 brachte die ersten Effekte, iOS 18 weitere, und iOS 26 kam mit Draw. Dadurch ist schwer zu behalten, welcher Effekt welche iOS-Version braucht und welcher Modifier ihn abspielt. Der iOS-Entwickler @sarunw zählt 12 Möglichkeiten, ein Symbol zu animieren, und 5 Möglichkeiten, eines einzufärben.

Dieser Leitfaden fasst alle an einem Ort zusammen: was jeder Effekt bewirkt, mit welcher iOS-Version er kam, welcher Modifier ihn abspielt und welche fünf Farboptionen es gibt. Er basiert auf Apples Dokumentation und den SF Symbols Sessions der WWDC23, WWDC24 und WWDC25. Die neuesten APIs kamen mit iOS 26, und Details können sich zwischen Releases ändern.

Wie funktionieren SF Symbol Animationen in SwiftUI?

Jede Symbolanimation läuft über dieselbe Familie von Modifiern, und welcher passt, hängt vom Verhalten des Effekts ab. Apples WWDC23-Session Animate symbols in your app definiert vier Verhaltensweisen:

• Diskret: läuft einmal ab und stoppt, wie Bounce.
• Unbegrenzt: verändert das Symbol und hält die Veränderung, bis Sie den Effekt entfernen, wie Scale.
• Transition: animiert ein Symbol ins Bild hinein oder hinaus, wie Appear und Disappear.
• Content Transition: animiert von einem Symbol zu einem anderen, wie Replace.

Jedes Verhalten ist ein Protokoll im Symbols-Framework, und jeder Effekt gibt an, welche Verhaltensweisen er unterstützt. SwiftUI ordnet ihnen unterschiedliche Aufrufe zu. Diskrete Effekte verwenden symbolEffect(_:options:value:), das den Effekt bei jeder Wertänderung abspielt. Unbegrenzte Effekte verwenden symbolEffect(_:options:isActive:), wobei isActive standardmäßig true ist. Beide Modifier kamen mit iOS 17 und funktionieren auf jeder View, die Symbolbilder enthält, nicht nur auf einem einzelnen Image.

Welche SF Symbols Effekte gibt es, und mit welcher iOS-Version kam jeder?

Hier sind die 12 Effekte, die @sarunw aufzählt, mit den Verhaltensweisen, die Apples Dokumentation heute für jeden angibt. Appear steht neben Disappear, weil beide ein Paar bilden.

Die iOS-17-Effekte kamen mit SF Symbols 5. Wiggle, Rotate und Breathe wurden auf der WWDC24 mit SF Symbols 6 vorgestellt, Draw und Variable Draw auf der WWDC25 mit SF Symbols 7. Variable Draw fällt aus der Reihe: Apple nennt es ein Rendering-Preset statt einer Animation, aber es verändert, wie ein Symbol Fortschritt anzeigt, und gehört deshalb auf die Liste.

Wie spiele ich einmalige und wiederholte Effekte mit symbolEffect ab?

Verwenden Sie einen diskreten Effekt, wenn etwas passiert: Eine neue Nachricht kommt an, ein Download ist fertig, ein Button wird getippt. Übergeben Sie einen Wert, und der Effekt läuft bei jeder Änderung ab.

struct InboxButton: View {
    @State private var newMessages = 0

    var body: some View {
        Button("Inbox", systemImage: "bell") { newMessages += 1 }
            .symbolEffect(.bounce, value: newMessages)
    }
}

Wiggle und Rotate, beide neu in iOS 18, verwenden denselben Aufruf. Apples WWDC24-Session empfiehlt Wiggle für eine Änderung oder Handlungsaufforderung, die übersehen werden könnte, und Rotate für eine laufende Aufgabe, etwa sich drehende Pfeile.

Image(systemName: "bell.badge")
    .symbolEffect(.wiggle, value: newMessages)

Image(systemName: "arrow.triangle.2.circlepath")
    .symbolEffect(.rotate, isActive: isSyncing)

Die zweite Zeile zeigt die unbegrenzte Form. Mit isActive läuft der Effekt, bis das Flag false wird. Das passt zu Zuständen statt zu Ereignissen: Synchronisieren, Aufnehmen, Warten auf eine Verbindung. Pulse, Variable Color und Breathe gehören hierher. Apple erklärt den Unterschied zwischen den beiden ähnlichsten: Pulse verändert die Deckkraft, Breathe Deckkraft und Größe. Scale hält ein Symbol in einer neuen Größe, solange es aktiv ist.

Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative, isActive: isSearching)

Image(systemName: "mic.fill")
    .symbolEffect(.breathe, isActive: isRecording)

Image(systemName: "heart.fill")
    .symbolEffect(.scale.up, isActive: isFavorite)

Die meisten Effekte haben Varianten. .variableColor bietet die Füllstile .iterative und .cumulative, Bounce und Scale haben .up und .down, und viele Effekte lassen sich .byLayer oder auf das .wholeSymbol anwenden. Der Parameter options nimmt SymbolEffectOptions entgegen, die Wiederholung und Geschwindigkeit festlegen.

Wie animiere ich ein Symbol hinein, hinaus oder in ein anderes Symbol?

Appear und Disappear unterstützen zwei Verhaltensweisen. Als unbegrenzter Effekt blendet .symbolEffect(.disappear, isActive: isHidden) ein Symbol aus, bis das Flag false wird. Als Transition läuft der Effekt ab, wenn SwiftUI die View einfügt oder entfernt.

if isConnected {
    Image(systemName: "antenna.radiowaves.left.and.right")
        .transition(.symbolEffect(.appear))
}

Draw On und Draw Off, neu in iOS 26, folgen demselben Muster. Apples Dokumentation beschreibt SymbolEffectTransition als Anwendung der Animationen Appear, Disappear, DrawOn oder DrawOff. Draw zeichnet ein Symbol entlang seiner Pfade nach, in einer Richtung, die jedes Symbol festlegt. Hacking with Swift zeigt die drei Wiedergabeoptionen nebeneinander:

Image(systemName: "signature")
    .symbolEffect(.drawOn, isActive: isSigned)

Image(systemName: "signature")
    .symbolEffect(.drawOn.wholeSymbol, isActive: isSigned)

Image(systemName: "signature")
    .symbolEffect(.drawOn.individually, isActive: isSigned)

Ebenenweise ist der Standard und staffelt jeden Pfad. Whole Symbol zeichnet alle Ebenen gleichzeitig, individually eine Ebene nach der anderen. Draw Off bietet außerdem .reversed und .nonReversed. Eigene Symbole brauchen Draw-Annotationen in der SF Symbols App, bevor sie Draw verwenden können.

Replace tauscht ein Symbol gegen ein anderes. Wenden Sie es als Content Transition an und ändern Sie den Systemnamen:

Image(systemName: isMuted ? "speaker.slash.fill" : "speaker.wave.2.fill")
    .contentTransition(.symbolEffect(.replace.magic(fallback: .replace.downUp)))

Magic Replace aus iOS 18 behält die Teile, die zwei verwandte Symbole gemeinsam haben, und animiert nur, was sich unterscheidet, etwa einen Schrägstrich oder ein Badge. Laut Apples WWDC24-Session wurde es zum Standardverhalten von Replace, und nicht verwandte Symbole fallen auf ein normales Replace zurück. Mit magic(fallback:) wählen Sie diesen Fallback. In iOS 26 ergänzte Apple den Abgleich von Umrandungen und Draw: Der ausgehende Schrägstrich wird weggezeichnet, der eingehende hineingezeichnet.

Wie zeige ich Fortschritt mit Variable Color und Variable Draw?

Manche Symbole unterstützen einen variablen Wert von 0.0 bis 1.0, der mit Image(systemName:variableValue:) übergeben wird. Standardmäßig zeigt das Symbol ihn mit Variable Color an und schaltet jede variable Ebene anhand eines Schwellenwerts ein oder aus. In iOS 26 zeichnet Variable Draw stattdessen jede Ebene bis zu einer Länge, die dem Wert entspricht, über einer abgedunkelten Kopie des Pfads. Apples Beispiele sind Download-Fortschritt, Temperatur und eine zeitlich begrenzte Session.

// Das Symbol muss Variable Draw unterstützen; prüfen Sie das in der SF Symbols App.
Image(systemName: "thermometer.high", variableValue: temperatureLevel)
    .symbolVariableValueMode(.draw)

symbolVariableValueMode(_:) nimmt .color oder .draw entgegen. Apple weist darauf hin, dass ein Symbol beides unterstützen kann, beim Rendern aber nur eines gilt.

Welche 5 Rendering-Modi für SF Symbols gibt es in SwiftUI?

Die Farbe ist die andere Hälfte des Aussehens eines Symbols. Vier Modi sind Cases von SymbolRenderingMode und werden seit iOS 15 mit symbolRenderingMode(_:) gesetzt. Setzen Sie keinen, wählt SwiftUI einen Modus anhand des Bildes und des aktuellen Vordergrundstils.

Hierarchical und Palette verwenden beide foregroundStyle. Hierarchical braucht einen Stil; Palette nimmt bis zu drei, einen pro Ebene.

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)

Image(systemName: "person.crop.circle.badge.plus")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.white, .blue)

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.multicolor)

Gradient ist technisch eine andere Art von Einstellung. Es ist ein Case von SymbolColorRenderingMode, dessen anderer Case .flat ist; es füllt also Ebenen, statt sie auszuwählen. Laut Apples WWDC25-Session wird der Verlauf aus einer einzigen Ausgangsfarbe erzeugt und funktioniert mit jedem Rendering-Modus, Sie können ihn also mit jedem der vier kombinieren.

Image(systemName: "flame.fill")
    .symbolRenderingMode(.hierarchical)
    .symbolColorRenderingMode(.gradient)
    .foregroundStyle(.orange)

Laut Apple sehen Verläufe in jeder Größe gut aus, fallen bei größeren Symbolen aber am stärksten auf. Setzen Sie sie also dort ein, wo Sie die Tiefe eines Symbols hervorheben möchten.

Warum sind SF Symbols auf dem iPhone Duo wichtiger?

Auf dem iPhone Duo erhalten Apps, die mit dem iOS 27.1 SDK gebaut sind, eine vertikale Bar entlang einer Seitenkante. Apples Tech Talk Raise the bar with iPhone Duo beschreibt ihre Breite als fest, und @sarunw merkt an, dass dies reine Symbol-Elemente begünstigt. Toolbar-Elemente mit Icon wandern in die vertikale Bar; reine Text-Elemente bleiben horizontal.

Ein klares Symbol für jede Toolbar-Aktion ist daher wichtiger als bisher. Wählen Sie Symbole, die ohne Beschriftung verständlich sind, und behalten Sie trotzdem den Titel, weil das System ihn weiterhin in Überlaufmenüs verwendet. Unser Leitfaden zur vertikalen Toolbar auf dem iPhone Duo erklärt, wie Elemente wandern, überlaufen und angeheftet werden.

Apples iPhone Duo Talks sagen nichts Spezifisches über Symboleffekte oder Rendering-Modi in der vertikalen Bar. Nichts in diesem Leitfaden ändert sich auf dem Gerät, und es gelten dieselben Modifier. Wie Liquid Glass Toolbar-Elemente in iOS 26 gruppiert und einfärbt, lesen Sie in unserem Leitfaden zur SwiftUI Toolbar mit Liquid Glass.

Das Wichtigste in Kürze

• Animieren Sie Symbole mit .symbolEffect: Übergeben Sie value: für einmalige Effekte und isActive: für Effekte, die laufen, bis Sie sie stoppen.
• Bounce, Pulse, Variable Color, Scale, Appear und Disappear sowie Replace brauchen iOS 17. Wiggle, Rotate, Breathe und Magic Replace brauchen iOS 18. Draw und Variable Draw brauchen iOS 26.
• Verwenden Sie .transition(.symbolEffect(...)) für Appear, Disappear und Draw, und .contentTransition(.symbolEffect(.replace)) zum Tauschen von Symbolen.
• Färben Sie Symbole mit monochrome, hierarchical, palette oder multicolor ein, und ergänzen Sie unter iOS 26 .symbolColorRenderingMode(.gradient).
• Auf dem iPhone Duo begünstigt die vertikale Bar reine Symbol-Elemente, geben Sie jeder Toolbar-Aktion also ein klares Symbol und einen Titel.

Lesen Sie als Nächstes, wie die vertikale Toolbar des iPhone Duo diese Symbole anordnet, und sehen Sie dann unter Built for the fold Spiele, die die Faltung wirklich nutzen.