【SwiftUI】SFSymbolsのアニメーションはSFSymbolsアプリを活用しよう

はじめに

iOS17からsymbolEffectを使用してSFSymbolsにアニメーションをつけることができるようになりました。
しかし、指定の方法が結構難しいです。

.symbolEffect(.pulse.wholeSymbol)

こんな感じで、連なって指定しなければいけないので、いろんなパターンがあり、ビルドして確認するのは大変です。

そんな問題を解決するのが、SFSymbolsのアプリです。
ボタンでポチポチ設定していくだけで、.pulse.wholeSymbolここの部分を生成してくれます。

やりかた

① 使用したいSymbolを選択します。

② セグメントコントロールで再生ボタンを選択します。

③ アニメーションの形式と詳細を設定します。
(「プレビュー」ボタンを押すとアニメーションが再生されるので、確認することができます。)

④ コピーアイコンを押すとメニューが出てきます。
⑤ 「Swift用の構成をコピー」を選択します。

⑥ 先ほどコピーした構成をsymbolEffectの中にペーストします。

import SwiftUI

struct ContentView: View {
    @State private var trigger = false
    
    var body: some View {
        Image(systemName: "cloud.sun.rain.fill")
            .font(.system(size: 100))
+           .symbolEffect(.bounce.down.byLayer, value: trigger)
            .onTapGesture {
                trigger.toggle()
            }
    }
}

思った通りのアニメーションになりました！

おわり

SFSymbolsのアプリをいじっていたらたまたま見つけました。
今までSymbol名のコピーだけにしか使えないと思ってました。

公式ドキュメント