WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in SF Symbols 6

What's new in SF Symbols 6

WWDC 2024
元の動画を見る

ハイライト

SF Symbols 6 は Wiggle、Rotate、Breathe の 3 つの汎用アニメーションプリセットを追加。Replace を Magic Replace にアップグレード。Variable Color の閉ループ再生を改善。カスタムシンボル向けレイヤー注釈ツールチェーンを提供。

主要内容

UI のアイコンは通常静止。ユーザーが画面を走査すると、動かないアイコンは見落とされやすい——ツールチップ、色変更、追加テキストが必要になる。SF Symbols 6 はアニメーションで解決：軽量で意味のある動きでアイコン自身が「語る」。

今年 3 つの汎用プリセット。Wiggle は短距離移動で視線誘導——見落とされがちな操作へ。Rotate は回転——実物体（扇風機）の模倣や進捗表示。Breathe は透明度とサイズを滑らかに変化させ「生きている」感——録音中・計測中に最適。

Replace も大幅強化。Magic Replace は形状関連のシンボルペアを認識——斜線は独立描画/消去、バッジはベースから独立出現/消失。無関係な形状は標準 Replace にフォールバック。Variable Color：閉ループ設計のシンボルがシームレスにループ、跳帧なし。

詳細

Wiggle（01:41）

Wiggle は変化の強調や注意喚起。4 基本方向：水平（左/右）、垂直（上/下）、時計回り、反時計回り。読み方向対応の forward/backward も。多くのシンボルに推奨方向内蔵——紙飛行機は向きに沿って揺れる。カスタム角度で上書き可、315° で離陸感（02:56）。

Image(systemName: "paperplane")
    .symbolEffect(.wiggle)

キーポイント:

  • .wiggle はデフォルトで内蔵推奨方向
  • .wiggle.forward や .wiggle.up で方向指定
  • .wiggle(angle: .degrees(315)) でカスタム角度

Rotate（03:19）

Rotate で回転追加。全体回転は進捗向け。By Layer は一部のみ——扇風機は羽根だけ回転。カスタムシンボルは SF Symbols 6 app でレイヤー注釈：回転レイヤーとアンカー設定（13:24）。

Image(systemName: "deskfan")
    .symbolEffect(.rotate)

キーポイント:

  • .rotate はデフォルトでシンボル全体回転
  • By Layer は SF Symbols app で can Rotate をチェック
  • アンカーは中心デフォルト。Snap to Points でパスノードに合わせる

Breathe（04:02）

Breathe は透明度とサイズを同時変化。「生きている」感。Pulse との違い：Pulse は透明度のみ、Breathe は両方（04:23）。SF Symbols app で Pulses 有効化——Pulse 注釈済みレイヤーが透明度変化し Breathe に深み（11:06）。

Image(systemName: "drop.fill")
    .symbolEffect(.breathe)

キーポイント:

  • .breathe は進行中アクティビティ（録音、タイマー）向け
  • 以前 Pulse 注釈済みレイヤーは Breathe + Pulses で自動参加
  • 再注釈不要

Magic Replace（04:58）

Magic Replace は Replace のアップグレード。形状関連ペア（同一ベース＋異バッジ）では斜線独立描画/消去、バッジ独立出現/消失/置換。新デフォルト。無関係ペアは標準 Replace。symbol components カスタムシンボルも対応——SF Symbols 6 から再エクスポート、Xcode 16 へ（06:23）。

Image(systemName: isFavorite ? "heart.fill" : "heart")
    .contentTransition(.symbolEffect(.magicReplace))

キーポイント:

  • .magicReplace が新デフォルト Replace 動作
  • 形状無関係ペアは自動で標準 Replace
  • カスタムシンボルは SF Symbols 6 app から再エクスポート必要

Variable Color 閉ループ改善（06:39）

Variable Color は色透明度でレイヤー逐次進行。端点設計がループを決定：open loop（端点非接続）、closed loop（端点接続）。SF Symbols 6 は closed loop 再生改善でシームレス循環。SF Symbols 6 app で closed loop 設計を注釈（07:31）。

アニメーション再生制御（11:19）

SF Symbols 6 app の 3 リピートモード：Play Once、Repeat with Delay（間隔設定可）、Continuous（明示停止まで）。

カスタムシンボル注釈（12:02）

SF Symbols 6 app で：Wiggle に preferred direction。Breathe は部分を別レイヤーに分け順序制御。Rotate は can Rotate とアンカー——中心デフォルト、Snap to Points、3 ウェイト（Ultralight、Regular、Black）それぞれ定義（15:18）。

新シンボル（15:43）

SF Symbols 6 で 800+ 追加、合計 6,000+。新カテゴリ：自動車（バッテリー、コンバーチブル、温度）、多様な人物活動、ギリシャ/キリル文字ローカライズ、進捗、触覚、ホーム画面/ウィジェット。

重要ポイント

  • 何をするか：重要操作への誘導に Wiggle を tooltip/テキストの代わりに。なぜ価値があるか：意味あるマイクロアニメーションは静的ヒントより自然、文字負担なし。始め方：ボタン内 SF Symbol に .symbolEffect(.wiggle)、.wiggle.up 等で方向。

  • 何をするか：カスタム回転進捗の代わりに Rotate By Layer。なぜ価値があるか：自前回転はタイマーとレイヤー管理。.symbolEffect(.rotate) は 1 行の宣言的 API。By Layer で扇風機は羽根のみ。始め方：SF Symbols 6 で can Rotate とアンカー、コードで .symbolEffect(.rotate)。

  • 何をするか：進行中バックグラウンド活動に Breathe。なぜ価値があるか：透明度＋サイズで Pulse より存在感。録音中・計測中に「まだ動いている」感。始め方：Image(systemName: "drop.fill") + .symbolEffect(.breathe)、Repeat with Delay または Continuous。

  • 何をするか：アイコン状態切替に Magic Replace。なぜ価値があるか：斜線とバッジが独立遷移、何が変わったか即理解。始め方：.contentTransition(.symbolEffect(.magicReplace))、SF Symbols 6 から再エクスポート。

関連セッション

コメント

GitHub Issues · utterances