🎨
WWDC23『アニメーションシンボルの作成』セッションのまとめ
アニメーションのプレビュー
- サイドバーのアニメーションインスペクタで新しいアニメーション効果をプレビューできる
- ポップアップボタンから新しいアニメーション効果を選択する
- プレビューボタンを押すとギャラリービューでアニメーションが再生される
- その下のシンボル行とサイドバーのプレビュー領域などさまざまなレンダリングモードで表示できる
- プレビューボタン周囲にはアニメーションを構成するためのコントロールが表示される
- シンボルを上向きか下向きにバウンスさせるか指定できる
- シンボルのレイヤを個別にバウンスさせるか、シンボル全体を一度にバウンスさせるか指定できる
- 設定の一部を変更するとプレビュー領域の下のラベルが「Automatic」から「Modified」に変更される
- アプリのコードを作成する場合、すべてのアニメーションタイプにはデフォルト設定がある
- SF Symbolsアプリを起動すると、これらのデフォルト設定はあらかじめ選択されており「Automatic」という語句が表示される
- デフォルト以外に切り替えると、「Modified」という文字が表示され設定を変更したことが通知される
- リセットボタンをクリックするとデフォルトに戻せる
- コードで直接指定したい場合は、SwiftまたはObjective-C APIに必要なエフェクトの名称をコピーできる
- 可変色のプレビュー
- 可変カラーアニメーションのプレビュー
- オプションを選択すると可変カラーレイヤが徐々にアクティブになりその後フェードアウトする
- [Iterative]を選択すると一度に1つのレイヤのみがアクティブになる
- オプションをオンにして、この構成が様々な様相を再現できるかの確認ができる
カスタムシンボルのアニメーション
パルスのプレビュー
- 3x3キューブのシンボル
- このシンボルは可変色となっているためアニメーションも可変色でサポートされている
- パルスはタイマーが一時停止されているときに最適
- パルスでシンボル全体が点滅してしまう
パルスの注釈方法
- 注釈リストには、どのレイヤをパルスするかを設定している場合にコントロール可能となっている
- シンボル内のどのレイヤもマークされていない場合はシンボル全体がパルスする
- 前面を構成するすべてのレイヤをパルスにマークする
- 前面のみがパルスするようになる
バウンズのプレビュー
全てのレイヤが独立して動く
- 他のアニメーションはすべてモーション使用のため別途確認が必要
- SF Symbolsのバージョン4以前からエクスポートされたシンボルやXcode 14と互換性を持たせるためにエクスポートされた場合、モーション情報は含まれず常にアプリ内でシンボル全体として動く
- Xcode 15で使用するために、このバージョンのSF Symbolsのバージョン5からエクスポートする
- バウンスをプレビューする
レイヤグループ単位で動く (面ごとに動く)
- デフォルトではシンボル内の各レイヤは独立して移動する
- 正面を構成する全レイヤを選択してレイヤグループに追加する
- レイヤグループ内ではすべてのレイヤが注釈と設定を保持されるが全部一緒に動く
全てのレイヤが同時に動く (キューブとして動く)
- シンボルのすべてのレイヤを元に戻して選択し、すべてを1つのグループに追加する
- キューブの各面は個別に移動するわけではなく、この図では異なる深度にあるわけでもない
- レイヤをすべてグループ化することでレイヤごとのコード設定に関わらず、キューブが常に1つのユニットとして動く
シンボルの一貫性
- シンボルの長所の一つは一貫性と親近感である
- 円形の囲いはSF Symbolsの一般的なデザイン要素
- 組み込みライブラリには多くのシンボルがある
- SF Symbolsのレパートリーには、この種の再利用可能なデザインパターンがたくさんある
- 円形の境界線やスラッシュにバッジなどのモディファイアなどもある
- これらの処理の一貫性はSF Symbolsを即座に認識し親しみやすくする重要な要素の1つ
- カスタムシンボルも使いやすさの利点を最大限に活用するためにこうした処理と一致するようにする
- シンボルコンポーネントを利用する
シンボルコンポーネント
シンボルコンポーネントとは
- シンボルコンポーネントはシステム提供のSF Symbols同様のアートワークと動作を提供する
- カスタムシンボルの1つを取得し、それをシンボルコンポーネントと組み合わせ、すぐに使用できる新しいシンボルが表示される
シンボルコンポーネントの使い方
- カスタムシンボルのコンテキストメニューを表示し、[Combine Symbol with Component]を選択する
- 表示されたシートでコンポーネントのライブラリから使用したいものを選択する
マルチカラー
- 新しいシンボルがカスタムシンボルライブラリに表示される
- プラスバッジはマルチカラーで正しく色付けされる
コンポーネントとシンボルは独立してアニメートする
- スラッシュも背後のキューブと別にアニメーションする
階層モード
- .circle.fillバージョンも階層モードでプライマリレイヤを使用する
モノクロ
- 後ろの円もモノクロ処理される
可変色
- 可変色の設定も保存される
コンポーネントの修正
バッジを反対側に移動する
- 基本シンボルの見た目とデザインに応じて追加の調整が必要な場合、アノテーションコントロールは通常サイドバーで実行できる
- 視覚的なアーティファクトを避けるためにバッジの位置を少し調整したい場合、シンボルの反対側に移動する
スラッシュの長さを変更する
- シンボルが十分にカバーされるようにスラッシュの長さを変更する
変数テンプレートに対応
- シンボルがサポートするさまざまなスケールとウェイトで新しいシンボルが適切に表示されるかどうかも確認する
- ３つのスケールと９つのウェイトで合計27種類のバリエーションがある
- シンボルコンポーネントは変数テンプレートに対応している
- 変数テンプレートはSF Symbols 3で導入された
- Small縮尺でウルトラライト、レギュラー、ブラックのウェイトの図面を用意する
- 各図面で使用したベジェパスに互換性がある限り、システムは図面を混合することで残り24個の可能なバリアントを作成する
バリアントを個別に修正する方法
各ウェイトの確認方法
- シンボルコンポーネントも変数テンプレートと同様に機能する
- ギャラリービューの上部には一連のプレビューがある
- 3つの異なるウェイトでシンボルを確認できる
バリアントを個別に修正する方法
- Regularウェイトを調整するだけで済み、変更はUltralightと Blackにも引き継がれる
- エンクロージャ内でのオーバーラップなどの問題が発生したり、シンボルの形状を別の配置にする必要がある場合は、UltralightまたはBlackのOverrideチェックボックスをクリックして追加の調整を行う
スケールを下げる
- 囲まれたキューブのスケールを下げて隙間を与えます
補正の処理
- システムはこのようなエンクロージャの舞台裏で多くの処理を行っている
- ベースシンボルがエンクロージャに収まるように縮小されるため、システムはベースシンボルの変数テンプレートを使用し、ウェイト補正を適用する際にはシンボルの重さと太さをサイズが小さくなるにつれて増やされる
- これは見た目の一貫性を保つのに役立ち、大き目の非囲みバージョンと、それを囲む円にも適用される
- シンボルコンポーネントの他の部分と同様に囲まれたシンボルのウェイトをさらに微調整できるので、希望する視覚的な効果を得られる
まとめ
- シンボルコンポーネントは既存のカスタムシンボルに基づいて新しいシンボルを作成するための迅速かつ簡単な方法
- ビヘイビアとアートワークでシステムが提供するSF Symbolsのレパートリーと一致する
- シンボルコンポーネントは必要に応じてウェイト補正を適用できるよう変数テンプレートから作成されたカスタムシンボルを操作する必要がある
- 変数テンプレートに含まれる個々のバリアントのオーバーライドがコンポーネントと組み合わせるときに無視される
- コンポーネントを使用して作成されたシンボルからは、編集可能なテンプレートをエクスポートできない
- シンボルコンポーネントは調整を行った後に描画処理するデザインなので手動で編集する必要はない
- 40を超えるコンポーネントがある
互換性
- 編集可能なテンプレートをエクスポートするとワイヤーフレームビューが表示される
- モーション用に最適化されたシンボルにはレンダリング中に他の形状を消去するために使用されることがよくある
- 感嘆符バッジの周りの追加の境界線など描画段階ではシンボルを構成する形状に注目する方が良い
- テンプレートをエクスポートするときの互換性ピッカーもある
互換性について
- デフォルトでは最新かつ最高のシンボルが取得され、その多くはモーション用に再描画される
- 古いプラットフォームがターゲットの場合はSF Symbolsで、そのプラットフォームに適切なテンプレートが提供される
ターゲットがSF Symbols 3
- iOS 15やmacOS Montereyに対応のSF Symbols 3をターゲットにしている場合、モーションに使用するレイヤ構造によりSF Symbols 3では完全サポートされて最適化されていない単純な描画が得られる
ターゲットがSF Symbols 2
- iOS 14やmacOS Big Surに対応するSF Symbols 2をターゲットとしている場合、SF Symbols 3では変数テンプレートが導入されたため静的テンプレートが自動的に取得される
カスタムシンボルの互換性
- カスタムシンボルにアノテーションを付ける場合にも同じ概念が適用される
- デフォルトでアプリが提供するすべてのアノテーション機能にアクセスできる
- SF Symbols 3以前を選択すると、モノクロのアノテーションを編集できなくなる
シンボルのエクスポート
- シンボルをXcode用にエクスポートする準備ができたら、使用するXcodeのバージョンをアプリに伝える
- アプリはエクスポートに最適なファイル形式を選択し古いプラットフォームを対象とするアプリにコンパイルされる場合ファイルが適切に動作することを確認する
参考資料
Discussion