SwiftUI の SF Symbols アニメーション：12の効果と5つの配色

SwiftUI の SF Symbols アニメーションは、リリースごとに少しずつ増えてきました。iOS 17 で最初の効果がまとめて追加され、iOS 18 でさらに増え、iOS 26 で Draw が加わりました。そのため、どの効果にどの iOS バージョンが必要で、どのモディファイアで再生するのかを覚えておくのは大変です。iOS デベロッパの @sarunw によると、シンボルをアニメーションさせる方法は12通り、色を付ける方法は5通りあります。

このガイドでは、それらをすべて1か所にまとめます。各効果の動作、導入された iOS バージョン、再生に使うモディファイア、そして5つの配色の選択肢です。内容は Apple のドキュメントと、WWDC23、WWDC24、WWDC25 の SF Symbols のセッションに基づいています。最新の API は iOS 26 で登場したもので、リリース間で詳細が変わる可能性があります。

SwiftUI で SF Symbols のアニメーションはどう動く？

シンボルのアニメーションはすべて同じ系統のモディファイアを使い、どれを使うかは効果の振る舞いによって決まります。Apple の WWDC23 のセッション「Animate symbols in your app」では、4つの振る舞いが定義されています。

• Discrete（単発）： Bounce のように、1回再生して止まります。
• Indefinite（継続）： Scale のように、シンボルを変化させ、効果を外すまでその状態を保ちます。
• Transition（トランジション）： Appear や Disappear のように、シンボルの表示や非表示をアニメーションさせます。
• Content transition（コンテンツトランジション）： Replace のように、あるシンボルから別のシンボルへアニメーションさせます。

それぞれの振る舞いは Symbols フレームワークのプロトコルで、各効果は自身が対応する振る舞いを宣言しています。SwiftUI では、それぞれに異なる呼び出しが対応します。Discrete の効果には symbolEffect(_:options:value:) を使い、値が変わるたびに効果が再生されます。Indefinite の効果には symbolEffect(_:options:isActive:) を使い、isActive のデフォルトは true です。どちらのモディファイアも iOS 17 で登場し、1つの Image だけでなく、シンボル画像を含むあらゆるビューで機能します。

SF Symbols にはどんな効果があり、それぞれどの iOS で追加された？

@sarunw が挙げている12の効果と、現在の Apple のドキュメントに示されているそれぞれの振る舞いを以下にまとめます。Appear と Disappear は対になっているので、まとめて記載しています。

iOS 17 の効果は SF Symbols 5 とともに登場しました。Wiggle、Rotate、Breathe は SF Symbols 6 とともに WWDC24 で、Draw と Variable Draw は SF Symbols 7 とともに WWDC25 で発表されました。Variable Draw だけは少し異質です。Apple はこれをアニメーションではなくレンダリングのプリセットと呼んでいますが、シンボルが進捗を示す方法を変えるものなので、このリストに含めています。

symbolEffect で単発の効果とループする効果を再生するには？

新しいメッセージが届いた、ダウンロードが完了した、ボタンがタップされたなど、何かが起きたときには Discrete の効果を使います。値を渡すと、それが変わるたびに効果が再生されます。

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

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

どちらも iOS 18 の新機能である Wiggle と Rotate も、同じ呼び出しを使います。Apple の WWDC24 のセッションでは、見落とされるかもしれない変化や行動の呼びかけには Wiggle を、回転する矢印のような進行中のタスクには Rotate を勧めています。

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

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

2つ目の行は Indefinite の形です。isActive を使うと、フラグが false になるまで効果が続きます。これは、同期中、録音中、接続待ちなど、出来事ではなく状態に向いています。Pulse、Variable Color、Breathe はここに当てはまります。Apple は最も近い2つの違いを説明しています。Pulse は不透明度を変え、Breathe は不透明度とサイズを変えます。Scale は、アクティブな間はシンボルを新しいサイズに保ちます。

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)

ほとんどの効果にはバリエーションがあります。.variableColor には .iterative と .cumulative の塗り方があり、Bounce と Scale には .up と .down があり、多くの効果は .byLayer（レイヤーごと）または .wholeSymbol（シンボル全体）に適用できます。options パラメータは SymbolEffectOptions を受け取り、繰り返しと速度を設定します。

シンボルの表示・非表示や別のシンボルへの切り替えをアニメーションさせるには？

Appear と Disappear は2つの振る舞いに対応しています。Indefinite の効果としては、.symbolEffect(.disappear, isActive: isHidden) がフラグが false になるまでシンボルを隠します。トランジションとしては、SwiftUI がビューを挿入または削除するときに効果が再生されます。

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

iOS 26 の新機能である Draw On と Draw Off も同じパターンに従います。Apple のドキュメントでは、SymbolEffectTransition は Appear、Disappear、DrawOn、DrawOff のアニメーションを適用するものと説明されています。Draw は、シンボルごとに定義された方向に沿って、パスをなぞるようにシンボルを描きます。Hacking with Swift では、3つの再生オプションを並べて紹介しています。

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

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

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

デフォルトはレイヤーごとで、各パスを少しずつずらして描きます。シンボル全体ではすべてのレイヤーを同時に描き、individually では1つのレイヤーずつ順番に描きます。Draw Off には .reversed と .nonReversed もあります。カスタムシンボルで Draw を使うには、SF Symbols アプリで描画用の注釈を付ける必要があります。

Replace は、あるシンボルを別のシンボルに置き換えます。コンテンツトランジションとして適用し、システム名を変更します。

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

iOS 18 の Magic Replace は、関連する2つのシンボルに共通する部分を残し、スラッシュやバッジなど異なる部分だけをアニメーションさせます。Apple の WWDC24 のセッションによると、これが Replace のデフォルトの動作になり、関連していないシンボルは標準の Replace にフォールバックします。magic(fallback:) で、そのフォールバックを選べます。iOS 26 では、Apple は囲み枠の一致と Draw を追加しました。消えるスラッシュは描き消され、現れるスラッシュは描かれます。

Variable Color と Variable Draw で進捗を示すには？

一部のシンボルは、Image(systemName:variableValue:) で渡す 0.0 から 1.0 までの可変値に対応しています。デフォルトでは、シンボルは Variable Color でこれを示し、しきい値に応じて各可変レイヤーをオンまたはオフにします。iOS 26 の Variable Draw では、代わりに、薄く表示したパスの上に、各レイヤーを値に応じた長さまで描きます。Apple の例は、ダウンロードの進捗、温度、時間を計るセッションです。

// シンボルが Variable Draw に対応している必要があります。SF Symbols アプリで確認してください。
Image(systemName: "thermometer.high", variableValue: temperatureLevel)
    .symbolVariableValueMode(.draw)

symbolVariableValueMode(_:) は .color または .draw を受け取ります。Apple によると、シンボルは両方に対応できますが、描画時に適用されるのはどちらか一方だけです。

SwiftUI の SF Symbols の5つのレンダリングモードとは？

色は、シンボルの見た目のもう半分です。4つのモードは SymbolRenderingMode のケースで、iOS 15 から symbolRenderingMode(_:) で設定します。設定しない場合、SwiftUI は画像と現在の前景スタイルからモードを選びます。

hierarchical と palette はどちらも foregroundStyle を使います。hierarchical に必要なスタイルは1つで、palette はレイヤーごとに最大3つまで受け取ります。

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)

グラデーションは、厳密には別の種類の設定です。これは SymbolColorRenderingMode のケースで、もう1つのケースは .flat です。つまり、レイヤーを選ぶのではなく、レイヤーを塗る設定です。Apple の WWDC25 のセッションによると、グラデーションは1つの元の色から生成され、すべてのレンダリングモードで機能するので、4つのどれとも組み合わせられます。

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

Apple によると、グラデーションはどのサイズでもきれいに描画されますが、大きなシンボルで最も映えます。シンボルの奥行きを引き出したい場面で使いましょう。

iPhone Duo で SF Symbols がより重要になるのはなぜ？

iPhone Duo では、iOS 27.1 SDK でビルドしたアプリに、片側の端に沿った縦向きバーが付きます。Apple の Tech Talk「Raise the bar with iPhone Duo」では、その幅は固定と説明されており、@sarunw によると、そのためシンボルのみのアイテムが優先されます。アイコンのあるツールバーのアイテムは縦向きバーに移動し、テキストのみのアイテムは横向きのままです。

そのため、ツールバーのすべてのアクションにわかりやすいシンボルを付けることが、これまで以上に重要になります。ラベルがなくても意味が伝わるシンボルを選び、タイトルも残しておきましょう。システムはオーバーフローメニューで引き続きタイトルを使うからです。アイテムの移動、オーバーフロー、固定の仕組みについては、iPhone Duo の縦向きツールバーのガイドで解説しています。

Apple の iPhone Duo のトークでは、縦向きバーでのシンボルの効果やレンダリングモードについて特に何も述べられていません。このガイドの内容はこのデバイスでも変わらず、同じモディファイアが使えます。iOS 26 の Liquid Glass がツールバーのアイテムをどうグループ化し、色付けするかについては、Liquid Glass 対応の SwiftUI ツールバーのガイドをご覧ください。

まとめ

• シンボルは .symbolEffect でアニメーションさせます。単発の効果には value: を、止めるまで続く効果には isActive: を渡します。
• Bounce、Pulse、Variable Color、Scale、Appear と Disappear、Replace には iOS 17 が必要です。Wiggle、Rotate、Breathe、Magic Replace には iOS 18 が、Draw と Variable Draw には iOS 26 が必要です。
• Appear、Disappear、Draw には .transition(.symbolEffect(...)) を、シンボルの切り替えには .contentTransition(.symbolEffect(.replace)) を使います。
• シンボルの色は monochrome、hierarchical、palette、multicolor で指定し、iOS 26 では .symbolColorRenderingMode(.gradient) を追加できます。
• iPhone Duo では縦向きバーがシンボルのみのアイテムを優先するので、ツールバーのすべてのアクションにわかりやすいシンボルとタイトルを与えましょう。

次は、iPhone Duo の縦向きツールバーがそれらのシンボルをどう配置するかを読み、Built for the fold で折りたたみを実際に活かしているゲームをご覧ください。