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

What's new in SF Symbols 5

SF SymbolsDesignSwiftUI
元の動画を見る

ハイライト

SF Symbols 5 では、すべてのシンボル、すべてのサイズ、すべてのレンダリング モードに対応する 7 つの構成可能なアニメーション プリセット (出現、消滅、バウンス、スケール、パルス、可変カラー、置換) を備えたシンボル アニメーション システムが導入されています。開発者は、1 行のコードを使用してインターフェイス アイコンをアニメーション化し、より豊富なインタラクティブなフィードバックを提供できます。

主要内容

SFシンボルの進化の軌跡

SF Symbols が 2019 年に初めてリリースされたとき、モノクロ モードしかありませんでした。 2021 年には、階層、パレット、マルチカラーの 3 つのレンダリング モードが追加されました。 Variable Color は 2022 年に導入され、シンボルで強度の変化を表現できるようになります。

2023 年の SF Symbols 5 ではアニメーション機能が追加されます。アニメーションは、すべてのシンボル、すべてのサイズ、すべてのレンダリング モードでサポートされています。

(02:03) アニメーション プリセットは構成可能で、それぞれに独自の視覚的特徴があります。

アニメーションの 2 つの中心的な概念

階層アニメーションと全体的なアニメーション

(02:32) 各シンボルは統一された階層によって定義されます。デフォルトでは、シンボルはレイヤー内でアニメーション化されます。各レイヤーは、明確かつ正確な動きで順番に動きます。グローバル アニメーションを選択して、すべてのレイヤーを同時に動かすこともできます。

スペースプレーン

(03:17) アニメーションは、奥行き感を作り出すために 3 つの空間平面を使用します。

  • ミッドプレーン: 3 次元空間の中心。位置決めと移動の基準点です。
  • 前面: 観察者に最も近い、シンボルが大きく表示されます。
  • 背面: 観察者から最も遠いため、シンボルは小さく見えます。

シンボルは、方向性、上下、または完全に見えない方向に基づいて、これらの平面間を移動します。

7 つのアニメーション プリセット

Appear / Disappear

(04:55) Appear は、シンボルがインターフェイスに最初に表示され、要素が徐々に注目を集めるように表示されるときに使用されます。 Disease は、シンボルがインターフェイスから削除されるときに使用され、要素が削除されたことをユーザーに通知する視覚的なフィードバックを提供します。

Bounce

(05:28) オブジェクトの跳ね返りをシミュレートする、高速で弾力性のある動き。 3 つの用途:

  1. インタラクティブなフィードバックを提供します - 操作が成功したことをユーザーに通知します
  2. シンボルの概念を強化 - シンボルをより生き生きとさせます
  3. エネルギー感を生み出す - シンボルをよりインタラクティブにする

(06:09) 明るさスライダーの例: スライダーを右端に引くと、sun.max シンボルがバウンス アニメーションを実行して、最大明るさに達したことをユーザーに通知します。

Scale

(06:39) シンボルのサイズを変更して、視覚的なフィードバックを提供します。スケールアップは一時的にズームインしてから再開し、インタラクションが認識されていることを確認します。スケールダウンは、物理的なボタンが押されたときの感覚をシミュレートします。

(07:42) スケールアップは、フォルダーにマウスを置くと拡大して保持され、離れると再開します。スケールはステートフルです - スケーリング状態はエフェクトが削除されるまで持続します。

バウンスとスケールの選択

(08:07) バウンスとは、「アクションが発生した」または「アクションが必要である」を意味します。スケールとは「選択」または「集中」を意味します。

Pulse

(08:33) 透明性を変更することで、進行中のアクティビティを伝えます。シンボル全体に適用することも、特定のレイヤーにのみ適用することもできます。

(08:56) 画面共有アイコン: 全体的なパルスはアクティビティの状態を伝えることができますが、画面のパルスを表すレイヤーのみであり、情報はより正確です。

Variable Color

(09:38) 今年、アニメーション ライブラリに変数カラーも追加され、次の 2 つのモードが追加されました。

  • 累積: 前の状態を保持しながら、レイヤーごとにハイライトします。 Fit は Wi-Fi 接続が成功したことを示します
  • 反復: 一度に 1 つのレイヤーのみをレイヤーごとにハイライト表示します。 Wi-Fi 検索ネットワークの表現に適しています

(10:30) 反転オプションを繰り返すと、ハイライト レイヤーが開始点に反転し、アクションが中断されるまで再び開始されます。

Replace

(10:55) あるシンボルを別のシンボルに置き換え、状態の変化または機能の切り替えを伝えます。

方向のオプション:

  • 下/上: 古いシンボルが下に消え、新しいシンボルが上に表示されます。通常はユーザー入力に従います
  • 上/上: 古いシンボルは上方向に消え、新しいシンボルは引き続き上方向に表示されます。進歩の感覚を生み出す

(12:20) 再生/一時停止ボタン: 再生シンボルをクリックすると、すぐに一時停止シンボルに移行し、次に利用可能な操作が示されます。

(12:38) テキスト編集ツールバー: テキストを選択すると、元に戻す/やり直し/貼り付けの記号が切り取り/コピーの記号に置き換えられ、現在利用可能な操作をユーザーに求めます。

詳細

SwiftUI でのシンボル アニメーションの使用

SwiftUI による SF Symbols 5 アニメーションsymbolEffect修飾子の使用法:

// Bounce 动画
Image(systemName: "checkmark.circle.fill")
    .symbolEffect(.bounce)

// Scale 动画
Image(systemName: "folder.fill")
    .symbolEffect(.scale.up)

// Pulse 动画
Image(systemName: "shared.with.you")
    .symbolEffect(.pulse)

// Variable Color 动画
Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative)

// Replace 动画
Image(systemName: isPlaying ? "pause.fill" : "play.fill")
    .symbolEffect(.replace.downUp)

重要なポイント: -.symbolEffect()アニメーションプリセットタイプの受信 -.bounce、.scale、.pulseWait はデフォルトの列挙値です

  • シンボルが切り替わると置換アニメーションが自動的にトリガーされます
  • すべてのアニメーションはカスタム構成オプションをサポートしています

アニメーション設定オプション

// 整体动画（默认是按层级）
Image(systemName: "bell.fill")
    .symbolEffect(.bounce.wholeSymbol)

// 自定义速度
Image(systemName: "star.fill")
    .symbolEffect(.pulse.speed(0.5))

// Variable Color 带 reversing
Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative.reversing)

重要なポイント: -.wholeSymbolすべてのレイヤーを同時にアニメーション化する -.speed()アニメーション速度の制御 -.reversingバリアブルカラーを逆ループさせます

アニメーション用のカスタム シンボルをデザインする

(13:37) アニメーションをサポートするには、カスタム シンボルを全体的な形状で描画し、消去レイヤーを適切に使用する必要があります。

描画手順:

  1. 完全に閉じたパスでシンボル本体を定義します
  2. 独立したアニメーションが必要な部分を別レイヤーとして描画
  3. 消去レイヤーを使用して中空効果を作成します
  4. SF Symbols アプリで描画レイヤーと消去レイヤーに注釈を付ける

(16:31) 消去レイヤーを使用したシンボルは、形状間の連続性と結合性により、よりスムーズにアニメーション化されます。消去レイヤーのないシンボルは、静止しているときは正常に見えますが、移動すると深みと活力が失われます。

新しいシンボルを追加する

(17:36) SF Symbols 5 では 700 以上の新しいシンボルが追加され、合計は 5000 以上になります。

  • 自動車: ステアリングホイール、カーシート、座ったフィギュア
  • ゲーム: アーケード コンソール、ジョイスティック、さまざまなボタン
  • EV 充電: さまざまなタイプの電気自動車プラグ
  • 天気カテゴリ: 月の出、月の入り、虹
  • 日常のオブジェクト: 大量の新しいオブジェクト シンボル

重要ポイント

ボタンアクションのバウンスフィードバックを追加

  • 何をすべきか: ユーザーがキー操作 (保存、送信、確認) を完了すると、関連するアイコンがバウンス アニメーションを実行します。
  • 実行する価値がある理由: 明確な視覚的なフィードバックにより、ユーザーは操作がシステムに受け付けられたと感じることができ、繰り返しクリックする回数が減ります。
  • 開始方法: ボタンのアクション クロージャでトリガーされます.symbolEffect(.bounce)

パルスを使用してバックグラウンド アクティビティのステータスを示します

  • 対処方法: アップロード、同期、録音などが進行中であり、パルス アニメーションが表示されます。
  • 価値がある理由: ユーザーは、アプリを開いて確認することなく、どの機能がまだ動作しているかを一目で確認できます。
  • 開始方法: ステータス アイコンに追加します.symbolEffect(.pulse)、イベント終了時に削除されます

置換アニメーションを使用してツールバーのステータスを切り替えます

  • 何をすべきか: アニメーションのトランジションを置き換えて、現在選択されているコンテンツに基づいてツールバー アイコンを動的に切り替えます。
  • 実行する価値がある理由: スムーズなシンボルの置換により、ユーザーはステータスの変化を直接理解することができ、直接切り替えるよりも自然です。
  • 開始方法: 条件付きでさまざまなシンボルをレンダリングし、SwiftUI が自動的に置換アニメーションを適用します。

カスタム アイコンのアニメーション サポートを有効にする

  • やるべきこと: 全体的なシェイプ方法を使用してアプリ内の主要なカスタム アイコンを再描画し、消去レイヤーを追加します。
  • 価値がある理由: カスタマイズされたアイコンは SF シンボルのアニメーション システムも利用できるため、ブランドの一貫性が強化されます。
  • 開始方法: SF Symbols アプリに SVG をインポートし、レベルに注釈を付け、さまざまなアニメーション プリセットをテストします。

関連セッション

コメント

GitHub Issues · utterances