WWDC25:What’s new in SF Symbols 7

SF Symbols アップデート。もはや高機能すぎて数年前から使いこなせる気がしていない、、が Draw 機能によって、ものによっては Lottie に依存する必要がなくなったかもしれない。グラデーションもシンプルながら表現力を底上げできるので嬉しい。


2:19 – 描画(Draw)

  • 新機能「Draw」追加。手書き風アニメーションでシンボルをパスに沿って描画
  • Draw On(登場)と Draw Off(消失)の2つのアニメーションプリセット
    • それぞれ既存の再生オプションをサポート
      • By Layer:デフォルト、レイヤーごとに開始時点が異なる
      • Whole Symbol:すべてのレイヤーをまとめて描画、各パスのアニメーションが同時開始終了し、素早い
      • Individually:新しいオプション、レイヤーごと逐次的にアニメーション実行する
  • シンボルごとに描画方向を柔軟に設定可能(例:左右、中心から外など)
  • 複雑なシンボルもサポート
    • 例:矢印の矢を遷移沿って移動させる
  • Variable Draw(進捗や強度を描画で表現)も新たに追加
    • 例:ダウンロードやワークアウトの進捗、温度計
    • SF Symbols app で確認可能

6:02 – マジック置換

  • Magic Replaceが強化され、関連シンボル間のアニメーション遷移がより滑らかに
  • 同じエンクロージャ(囲い)を持つシンボル間で、囲いを維持しつつ他の部分を置換
  • Drawアニメーションと組み合わせて、より表現力豊かな遷移が可能に

7:01 – グラデーション

  • シンボルにグラデーション(線形グラデーション)を適用可能に
    • 光が当たっているような印象を与えられる
  • すべてのレンダリングモードで利用可能
  • 特に大きなサイズで立体感や奥行きを強調したい場合に有効

8:02 – カスタムシンボル

  • カスタムシンボルにもDrawやグラデーションなど新機能を活用可能
  • Drawアニメーションには「ガイドポイント」を描画パス上に配置して描画経路を指定(パスに少なくとも2つ必要)
  • ガイドポイントには開始点・終了点に加え、中間点を加えて複雑なパスを構成する
  • ガイドポイントには複数種類があり、複雑なパスや複数サブパスにも対応
    • 複数のサブパスで開始・終了点を共有
    • コーナーポイント:急カーブや鋭い角に特別な処理が求められるため指定
  • 複数パスが存在する場合は、それぞれに描画パスと方向のルールセットを指定
  • 中心からアニメーションする場合、双方向描画をアノテート
    • 開始点の両側にガイドポイントを配置するとシステムが自動的に双方向性を認識する
  • 適応型(addaptive)エンドキャップ
  • アタッチメント(例:矢印の先端)も火病が要素としてガイドポイントに紐付けてアニメーション可能
  • 重なり合うパスや複雑な形状にも柔軟に対応するための詳細設定が用意
  • カスタムシンボルは Regular、Ultralight、Black の3つのウェイトでガイドポイントを設定すれば、他のウェイトは自動補間される
    • Regular 以外でガイドポイントが不正になった際調整が必要、その時ガイドポイントの順序に注意(ポイント番号を表示可能)
  • 可変描画(Variable Draw)もカスタムシンボルで利用可能

20:52 – 新しいAPI

  • SwiftUIでは symbolEffect モディファイアで Draw アニメーションを適用
    • .symbolEffect(.drawOn, isActive: isHidden)
    • .symbolEffect(.drawOn.indicidually, …)
  • AppKit・UIKit でもDraw On/Off を指定してアニメーション可能
  • Variable Draw やグラデーションも API で簡単に指定可能
    • .symbolVariableValueMode(.draw)
    • .symbolColorRenderingMode(.gradient)
  • コード例は SF Symbols アプリの「Copy Code」ボタンから取得可能
  • 新機能を活用するには SF Symbols 7 ベータ版のダウンロードと、カスタムシンボルの再設計・注釈付けが推奨