Create animated symbols

ハイライト

SF Symbols 5 では、シンボルにアニメーション機能が導入されています。開発者は、SF Symbols アプリを通じてバウンス、パルス、可変カラーなどのアニメーション効果をプレビューおよび構成でき、シンボル コンポーネントを使用してバッジ、スラッシュ、円形シェルを備えたシステム スタイルのアイコンをすばやく作成できます。

主要内容

アイコンアニメーションの問題点

iOS 16 より前は、アプリ内のアイコンを動かしたい場合は、アニメーション コードを自分で記述する必要がありました。使用UIImageViewフレームごとに切り替えるか、Core Animation各レイヤーの位置と透明度を手動で制御します。この方法は時間と労力がかかり、システムのスタイルと一致させることが困難です。

SF Symbols 5 はこの問題を直接解決します。 Apple はシンボル システムにアニメーション機能を組み込みました。開発者は、コード内でアニメーション タイプを指定するだけでアイコンを移動できます。

SF Symbols アプリでアニメーションをプレビューする

SF Symbols アプリには、新しいアニメーション インスペクター パネル (01:51) があります。シンボルを選択した後、ポップアップ メニューからアニメーション効果を選択できます。

• バウンス: バウンスアニメーション。上または下にバウンスするように設定できます。
• パルス: パルスアニメーション。レイヤーごとまたは全体としてパルスできます。
• 可変カラー: レイヤーごとのカラー変更アニメーション

各アニメーションには設定オプションがあります。たとえば、バウンスを設定できます。By Layer(各レイヤーは独立して動きます) またはWhole Symbol（全体的な動き）。デフォルト設定を変更すると、プレビュー領域に「変更済み」と表示されます。デフォルトに戻すには、リセット ボタンをクリックします。

好みの設定を見つけたら、コピー ボタンをクリックして、対応する API 名 (03:23) を取得します。

カスタム シンボルでアニメーションをサポートする

カスタム シンボルが可変カラーでマークされている場合、当然、可変カラー アニメーション (05:11) をサポートします。

ただし、パルスやバウンスなどのモーション アニメーションの場合は、どのレイヤーがアニメーションに参加するかを追加でマークする必要があります。 SF Symbols 5 には、新しいレイヤー注釈コントロールが追加されています。

• 注釈リスト内のレイヤーをチェックして、パルス アニメーションに参加するようにマークします。
• レイヤーグループを作成して複数のレイヤーをグループ化し、一緒に移動させます

シンボルが SF Symbols 4 以前からエクスポートされた場合、または Xcode 14 と互換性がある場合、シンボルにはモーション情報が含まれず、全体としてのみ移動できます (06:07)。

シンボル コンポーネント: システム スタイルのシンボルを組み合わせる

シンボル コンポーネントは、SF Symbols 5 (09:51) の重要な機能です。これは、次のようなシステム スタイルの装飾コンポーネントのセットを提供します。

• エンクロージャ: 円形エンクロージャ、角形エンクロージャなど。
• バッジ: プラス記号、マイナス記号、省略記号などのバッジ。
• スラッシュ: スラッシュ修飾

操作は簡単で、カスタムシンボルを右クリックし、「シンボルとコンポーネントを結合」を選択し、コンポーネントライブラリから目的のコンポーネントを選択します。新しいシンボルは、システム シンボルの表示スタイルとアニメーション動作を自動的に継承します。

たとえば、次の記号を追加します.circle.fillシェル化後、システムは自動的に以下を処理します。

• 階層モードでプライマリ層を使用する
• モノクロモードで背景を正しく消去
• 元のシンボルの可変カラー設定を保持します。

互換性のエクスポート

SF Symbols アプリはエクスポート プロセスを再設計しました (15:17)。テンプレートをエクスポートするときに、ターゲット プラットフォームのバージョンを選択できます。

-デフォルト: 最新バージョン、スポーツ最適化をサポート

• SF Symbols 3 (iOS 15/macOS Monterey): 簡略化された描画、モーションレイヤー構造のサポートなし
• SF Symbols 2 (iOS 14/macOS Big Sur): 静的テンプレート

Xcode にエクスポートする場合、使用している Xcode のバージョンをアプリに伝えると、最適なファイル形式が自動的に選択されます。

詳細

アニメーションの種類と構成

SF Symbols 5 には、いくつかの組み込みアニメーション プリセットが用意されています。各アニメーションは、SF Symbols アプリのアニメーション インスペクターを通じてプレビューおよび構成できます。

バウンスアニメーション

バウンスはシンボルにバウンス効果を与えます。構成オプションには次のものがあります。

• 方向: 上または下
• レイヤー モード: レイヤー別 (各レイヤーは個別にバウンス) または シンボル全体 (全体のバウンス)

パルスアニメーション

Pulse は、シンボルに脈動する呼吸効果を与えます。注釈リストを使用すると、どのレイヤーがパルスに参加するかを正確に制御できます。

可変カラーアニメーション

可変カラー アニメーションでは、シンボルの各レイヤーの色が次々にアクティブになります。次の 2 つのモードがあります。

• 累積: 各レイヤーは徐々に累積的にアクティブになり、その後一緒にフェードアウトします。
• 反復: 一度に 1 つのレイヤーのみをアクティブにします

反転 オプションをオンにして、アニメーションを逆再生することもできます (04:06)。

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

SwiftUI では、シンボルのアニメーションは次の方法で行われます。symbolEffect修飾子の使用法:

import SwiftUI

struct ContentView: View {
    @State private var isBouncing = false
    
    var body: some View {
        Image(systemName: "speaker.wave.3.fill")
            .symbolEffect(.bounce, value: isBouncing)
            .onTapGesture {
                isBouncing.toggle()
            }
    }
}

キーポイント:

• symbolEffect(.bounce)バウンスアニメーションを適用する -valueパラメータはアニメーションのトリガーのタイミングを制御し、値が変化するとアニメーションが再生されます。
• システムはレイヤーのモーションエフェクトを自動的に処理します。

カスタムシンボルのレイヤーアノテーション

カスタム シンボルがアニメーションをサポートするには、SF シンボル アプリでレイヤーに適切なラベルが付けられている必要があります。

ラベルパルスレイヤー:

1. カスタムシンボルの「注釈」パネルを開きます。
2. Pulse 関連の注釈コントロールを見つける
3. パルスに参加する必要があるレイヤーを確認します

どのレイヤーもチェックされていない場合は、シンボル全体が一緒にパルス表示されます。

レイヤー グループの作成:

1. 複数のレイヤーを選択します 2.右クリックして「レイヤーグループに追加」を選択します。
2. グループ内のレイヤーが一緒に移動します

レイヤ グループ内の各レイヤは独自のラベル設定を保持しますが、全体として移動します。

シンボルコンポーネントの使用

シンボル コンポーネントは、変数テンプレート テクノロジに基づいています。変数テンプレートには、小型サイズの 3 つのウェイト バージョン (ウルトラライト、レギュラー、ブラック) が必要です。残りの 24 のバリエーションは自動的にブレンドされます。

シンボルとコンポーネントを組み合わせるには:

1. SF Symbols アプリでカスタム シンボルを選択します
2. 右クリックして「シンボルとコンポーネントを結合」を選択します。
3. コンポーネント ライブラリからシェル、バッジ、またはスラッシュを選択します
4. サイドバーの位置とサイズを微調整する

微調整オプションには次のものが含まれます。

• 視覚的な欠陥を避けるためにバッジの位置を調整します
• 十分なシンボル領域がカバーされるようにスラッシュの長さを変更します。
• 追加の調整については、ウルトラライトまたはブラック ウェイトの下のオーバーライドをチェックしてください

システムは自動的にウェイト補正を実行します。基本シンボルがシェル内に拡大縮小されると、システムは視覚的な一貫性を維持するために線の太さを増やします (13:29)。

互換性設定

SF Symbols アプリのエクスポート インターフェイスでは、互換性ピッカーを使用してターゲット プラットフォームを選択できます。

ターゲット プラットフォーム	対応するシステムバージョン	テンプレートの機能
デフォルト	iOS 17+ / macOS Sonoma+	フルモーションの最適化
SFシンボル3	iOS 15 / macOS モントレー	簡略化された描画、動きなし
SFシンボル2	iOS 14 / macOS Big Sur	静的テンプレート

カスタム シンボルに注釈を付けるときにターゲット プラットフォームを設定することもできます。この機能は SF Symbols 4 (16:52) まで利用できないため、SF Symbols 3 以前に設定されている場合、モノクロの注釈は編集できません。

重要ポイント

設定項目に動的アイコンを追加

• 何をすべきか: 設定ページで、パルス アニメーションを使用して、現在アクティブなオプションをマークします。
• 実行する価値がある理由: 可変カラー アニメーションは、アニメーション コードを記述することなく、「進行中」または「アクティブ化」ステータスを表現するのに当然適しています。
• 開始方法: SF Symbols アプリで適切なシンボルを見つけてエクスポートし、SwiftUI で使用します。symbolEffect(.pulse)応用

シンボル コンポーネントを使用してアプリ アイコンのスタイルを統一する

• やるべきこと: コンポーネントを使用してアプリのカスタム アイコンを再パッケージし、円形のシェルまたはバッジを追加します。
• 価値がある理由: コンポーネントは 27 種類のサイズのバリエーションとアニメーションの動作を自動的に処理するため、アイコンはネイティブのアイコンと同じくらいプロフェッショナルに見えます。
• 開始方法: SF シンボル アプリを開き、カスタム シンボルを右クリックして、[シンボルとコンポーネントを結合] を選択します。

読み込みステータスの専用アニメーションをデザイン

• やるべきこと: アプリの読み込みインジケーターのカスタム シンボルをデザインし、可変色で進行状況をアニメーション化します。
• 実行する価値がある理由: 可変カラー アニメーションを使用すると、シンボルの各レイヤーが順番に点灯するため、静的な円よりもブランドらしくなります。
• 開始方法: SF シンボル アプリでカスタム シンボルを作成し、グラフィックを複数のレイヤーに分割し、可変カラーでラベルを付けます。

古いバージョンのユーザー向けにダウングレード エクスペリエンスを維持

• やるべきこと: シンボル テンプレートの 2 セットをエクスポートします。1 つはフル アニメーションを含む iOS 17 以降用、もう 1 つは静的バージョンを含む古いバージョン用です。
• 価値がある理由: SF Symbols アプリの互換性ピッカーはダウングレードを自動的に処理し、すべてのユーザーに良好なエクスペリエンスを提供します。
• 開始方法: エクスポート時に対応する SF シンボルのバージョンを選択します。Xcode は自動的に正しい形式をコンパイルします。

関連セッション

• アプリでシンボルをアニメーション化する — アプリでシンボル アニメーションを使用する
• SF Symbols 5 の新機能 — SF Symbols 5 の新機能の概要
• スプリングを使用したアニメーション — SwiftUI スプリング アニメーションの基本原理