Animer les SF Symbols en SwiftUI : 12 effets et 5 modes de couleur

L'animation des SF Symbols en SwiftUI s'est enrichie version après version. iOS 17 a introduit les premiers effets, iOS 18 en a ajouté d'autres, et iOS 26 a apporté Draw. Difficile, dès lors, de se rappeler quel effet exige quelle version d'iOS, et quel modificateur le déclenche. Le développeur iOS @sarunw compte 12 façons d'animer un symbole et 5 façons de le colorer.

Ce guide les réunit toutes : ce que fait chaque effet, la version d'iOS qui l'a introduit, le modificateur qui le joue, et les cinq options de couleur. Il s'appuie sur la documentation d'Apple et sur les sessions SF Symbols de la WWDC23, de la WWDC24 et de la WWDC25. Les API les plus récentes sont arrivées avec iOS 26, et certains détails peuvent changer d'une version à l'autre.

Comment fonctionnent les animations de SF Symbols en SwiftUI ?

Toutes les animations de symboles passent par la même famille de modificateurs, et celui que vous utilisez dépend du comportement de l'effet. La session WWDC23 d'Apple Animate symbols in your app définit quatre comportements :

• Discrete (ponctuel) : se joue une fois puis s'arrête, comme Bounce.
• Indefinite (continu) : modifie le symbole et le maintient modifié jusqu'à ce que vous retiriez l'effet, comme Scale.
• Transition : anime l'apparition ou la disparition d'un symbole, comme Appear et Disappear.
• Content transition : anime le passage d'un symbole à un autre, comme Replace.

Chaque comportement est un protocole du framework Symbols, et chaque effet déclare les comportements qu'il prend en charge. SwiftUI les associe à des appels différents. Les effets ponctuels utilisent symbolEffect(_:options:value:), qui joue l'effet chaque fois que la valeur change. Les effets continus utilisent symbolEffect(_:options:isActive:), où isActive vaut true par défaut. Les deux modificateurs sont arrivés avec iOS 17 et fonctionnent sur toute vue contenant des images de symboles, pas seulement sur une Image isolée.

Quels effets SF Symbols existent, et quelle version d'iOS a ajouté chacun ?

Voici les 12 effets listés par @sarunw, avec les comportements que la documentation d'Apple indique aujourd'hui pour chacun. Appear figure aux côtés de Disappear, car ils vont par paire.

Les effets d'iOS 17 sont arrivés avec SF Symbols 5. Wiggle, Rotate et Breathe ont été présentés à la WWDC24 avec SF Symbols 6, et Draw et Variable Draw à la WWDC25 avec SF Symbols 7. Variable Draw fait figure d'exception : Apple le qualifie de préréglage de rendu plutôt que d'animation, mais il change la façon dont un symbole affiche une progression, il a donc sa place dans la liste.

Comment jouer des effets ponctuels et en boucle avec symbolEffect ?

Utilisez un effet ponctuel quand quelque chose se produit : un nouveau message arrive, un téléchargement se termine, un bouton est touché. Passez une valeur, et l'effet se joue chaque fois qu'elle change.

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

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

Wiggle et Rotate, tous deux nouveaux dans iOS 18, utilisent le même appel. La session WWDC24 d'Apple recommande Wiggle pour un changement ou un appel à l'action qui risque de passer inaperçu, et Rotate pour une tâche en cours, comme des flèches qui tournent.

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

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

La seconde ligne montre la forme continue. Avec isActive, l'effet dure jusqu'à ce que l'indicateur passe à false, ce qui convient à des états plutôt qu'à des événements : synchronisation, enregistrement, attente d'une connexion. Pulse, Variable Color et Breathe trouvent leur place ici. Apple explique la différence entre les deux plus proches : Pulse change l'opacité, tandis que Breathe change l'opacité et la taille. Scale maintient un symbole à une nouvelle taille tant qu'il est actif.

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)

La plupart des effets ont des variantes. .variableColor propose les styles de remplissage .iterative et .cumulative, Bounce et Scale ont .up et .down, et de nombreux effets peuvent s'appliquer .byLayer ou au .wholeSymbol. Le paramètre options accepte des SymbolEffectOptions, qui règlent la répétition et la vitesse.

Comment animer l'entrée, la sortie ou le remplacement d'un symbole ?

Appear et Disappear prennent en charge deux comportements. En effet continu, .symbolEffect(.disappear, isActive: isHidden) masque un symbole jusqu'à ce que l'indicateur passe à false. En transition, l'effet se joue quand SwiftUI insère ou retire la vue.

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

Draw On et Draw Off, nouveaux dans iOS 26, suivent le même schéma. La documentation d'Apple décrit SymbolEffectTransition comme appliquant l'animation Appear, Disappear, DrawOn ou DrawOff. Draw trace un symbole le long de ses chemins, dans un sens défini par chaque symbole. Hacking with Swift montre les trois options de lecture côte à côte :

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

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

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

Le mode par calque est celui par défaut et décale chaque chemin. Le mode symbole entier trace tous les calques en même temps, et le mode individuel trace un calque après l'autre. Draw Off dispose aussi de .reversed et .nonReversed. Les symboles personnalisés ont besoin d'annotations de tracé dans l'app SF Symbols avant de pouvoir utiliser Draw.

Replace remplace un symbole par un autre. Appliquez-le comme content transition et changez le nom système :

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

Magic Replace, apparu dans iOS 18, conserve les parties communes à deux symboles apparentés et n'anime que ce qui diffère, comme une barre oblique ou un badge. La session WWDC24 d'Apple indique qu'il est devenu le comportement par défaut de Replace, et que les symboles non apparentés reviennent à un Replace standard. magic(fallback:) vous permet de choisir ce repli. Dans iOS 26, Apple a ajouté la correspondance des contours (enclosures) et Draw : la barre oblique sortante s'efface en Draw Off et la nouvelle se trace en Draw On.

Comment afficher une progression avec Variable Color et Variable Draw ?

Certains symboles acceptent une valeur variable de 0.0 à 1.0, passée avec Image(systemName:variableValue:). Par défaut, le symbole l'affiche avec Variable Color, en activant ou désactivant chaque calque variable selon un seuil. Dans iOS 26, Variable Draw trace plutôt chaque calque sur une longueur correspondant à la valeur, par-dessus une copie atténuée du chemin. Les exemples d'Apple sont la progression d'un téléchargement, une température et une séance minutée.

// Le symbole doit prendre en charge Variable Draw ; vérifiez-le dans l'app SF Symbols.
Image(systemName: "thermometer.high", variableValue: temperatureLevel)
    .symbolVariableValueMode(.draw)

symbolVariableValueMode(_:) accepte .color ou .draw. Apple précise qu'un symbole peut prendre en charge les deux, mais qu'un seul s'applique au moment du rendu.

Quels sont les 5 modes de rendu des SF Symbols en SwiftUI ?

La couleur est l'autre moitié de l'apparence d'un symbole. Quatre modes sont des cas de SymbolRenderingMode, définis avec symbolRenderingMode(_:) depuis iOS 15. Si vous n'en définissez aucun, SwiftUI choisit un mode d'après l'image et le style de premier plan en vigueur.

Hierarchical et palette utilisent tous deux foregroundStyle. Hierarchical demande un seul style ; palette en accepte jusqu'à trois, un par calque.

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)

Techniquement, le dégradé est un réglage d'une autre nature. C'est un cas de SymbolColorRenderingMode, dont l'autre cas est .flat : il remplit les calques au lieu de les choisir. La session WWDC25 d'Apple indique que le dégradé est généré à partir d'une seule couleur source et fonctionne avec tous les modes de rendu : vous pouvez donc le combiner avec n'importe lequel des quatre.

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

Selon Apple, les dégradés s'affichent bien à toutes les tailles mais ressortent surtout sur les grands symboles : utilisez-les là où vous voulez faire ressortir la profondeur d'un symbole.

Pourquoi les SF Symbols comptent-ils davantage sur iPhone Duo ?

Sur iPhone Duo, les apps compilées avec le SDK iOS 27.1 reçoivent une barre verticale le long d'un bord latéral. Le Tech Talk d'Apple Raise the bar with iPhone Duo décrit sa largeur comme fixe, et @sarunw note qu'elle privilégie les éléments composés d'un seul symbole. Les éléments de barre d'outils dotés d'une icône passent dans la barre verticale ; les éléments uniquement textuels restent horizontaux.

Un symbole clair pour chaque action de la barre d'outils compte donc plus qu'avant. Choisissez des symboles qui se comprennent sans libellé, et gardez aussi le titre, car le système l'utilise toujours dans les menus de débordement. Notre guide de la barre d'outils verticale de l'iPhone Duo explique comment les éléments se déplacent, débordent et sont épinglés.

Les Tech Talks d'Apple sur l'iPhone Duo ne disent rien de particulier sur les effets de symboles ou les modes de rendu dans la barre verticale. Rien dans ce guide ne change sur l'appareil, et les mêmes modificateurs s'appliquent. Pour la façon dont Liquid Glass regroupe et teinte les éléments de barre d'outils dans iOS 26, consultez notre guide de la barre d'outils SwiftUI avec Liquid Glass.

À retenir

• Animez les symboles avec .symbolEffect : passez value: pour les effets ponctuels et isActive: pour les effets qui durent jusqu'à ce que vous les arrêtiez.
• Bounce, Pulse, Variable Color, Scale, Appear et Disappear, et Replace nécessitent iOS 17. Wiggle, Rotate, Breathe et Magic Replace nécessitent iOS 18. Draw et Variable Draw nécessitent iOS 26.
• Utilisez .transition(.symbolEffect(...)) pour Appear, Disappear et Draw, et .contentTransition(.symbolEffect(.replace)) pour remplacer un symbole par un autre.
• Colorez les symboles en monochrome, hierarchical, palette ou multicolor, et ajoutez .symbolColorRenderingMode(.gradient) sur iOS 26.
• Sur iPhone Duo, la barre verticale privilégie les éléments composés d'un seul symbole : donnez à chaque action de la barre d'outils un symbole clair et un titre.

Ensuite, découvrez comment la barre d'outils verticale de l'iPhone Duo dispose ces symboles, puis parcourez les jeux qui exploitent vraiment le pli sur Built for the fold.