🎨
WWDC22『SF Symbolsにおける可変カラーの採用』セッションのまとめ
可変色 (可変カラー)の概要
- 可変カラーはSF Symbolsの新機能
- パーセント値で見た目を調整することが可能
- このパーセント値を変更することで、シグナル強度や進捗など時間で変化する値を反映したシンボルを簡単に作成できる
- SF Symbolsアプリに新しいプレビューエリアが追加された
- レンダリングモードに新たに「自動」機能が追加された
- 「自動」でシンボルは独自のレンダリングモードを選択できる
- カラー設定の下に「可変」の設定が加わった
- 可変をオンにしてスライダーを下げて可変のプレビューが確認できる
- 4つのレンダリングモードすべてでプレビューできる
- 可変色はSF Symbolsで有効な各レンダリングモードで利用可能
- シンボルのいくつのパーツが可変色に影響されるのかには制限はない
- 可変色はパーセント値で制御される
- マイクのシンボルでは、マイクの左側にある4つのドットは各々独立したレイヤで、可変色に対応している
- ある一定の値を超えると各ドットが作動する
- 0から100パーセントで等間隔に制御される
- 0%は特殊なケースでどのレイヤもアクティブにならない
- 0％以上になれば1つ目のドットがアクティブになる
- 26％以上になると2つ目のドットがアクティブになる
- 51％以上になると3つ目のドットがアクティブになる
- 76％から100％では４つ目のドットがアクティブになる
- 0%のときにだけビジュアル的に空っぽな表現となる
- 3つレイヤで可変色を使用していると、レイヤ間の境界は33.3333％や66.6667％など端数が発生する
- レイヤ間の閾値は最も近い数値に切り上げられ、その丸められた値から1％以上になるまで次のレイヤを起動しない
- 33.3パーセントは切り捨てで、最初の基準値に対して33パーセントになる
- 2番目のレイヤは1％ポイント上の34％となる
- 最終的な基準値は66.7%から67%まで上がる
- 最後のレイヤは1%上のポイントとなり68%となる
カスタムシンボルへの導入方法
シンボルの構成は216通り
- システムが提供するSF Symbolsは9つの異なるウェイトで利用でき、それらのウェイトのそれぞれが3つのスケールで利用できる
- つまりそれぞれに対し27種類のタイプがあり、4つのレンダリングモードと可変色のありとなしで216通りの構成を可能にします
変数テンプレート (可変テンプレート)
- 変数テンプレートを使うと27通りのウェイトとスケールの組み合わせで描くのではなく3つだけとなる
- 変数テンプレートは他の24個を自動的に生成する
SF Symbols 3の注釈方法
- カスタマイズしたシンボルを描いたら注釈でさまざまなレンダリングモードを取り入れられる
- SF Symbols 3まではカスタムシンボルに階層モードとパレットモードを採用しようとした場合、シンボルを別々のレイヤに分割し各レイヤに対し階層レベルを割り当てていた
- シンボルをマルチカラーモードを対応させるには、カスタムシンボルを再度違うレイヤに分割し 各レイヤに色を割り当てていた
- つまりすべてのレンダリングモードを サポートするには 2つの別々のレイヤ構造を管理する必要があった
SF Symbols 4の統一的な注釈 (統一的なアノテーション)
- SF Symbols 4から統一的な注釈が利用できる
- 統一的な注釈はシンボルをシングルレイヤ構造で表現し、その構造を全てのレンダリングモードで共有する
- シンボルを何度もレイヤに分割する必要がない
- 統一的な注釈シンボルに可変色を追加することもできる
統一的な注釈の実践方法
注釈をつけるシンボル
- パズルキューブのシンボルをSF Symbolsアプリにドラッグして新しいカスタムシンボルを作成する
レンダリングモードの変更方法
- レンダリングモードを切り替えるには、ピッカーで別のオプションを選ぶ
階層の注釈
- 階層に切り替え、立方体の上部と側面を新しいレイヤに変更する
- 新しいレイヤは自動的にあまり際立たないセカンダリやターシャリといったレベルに替わる
パレットの注釈
- 階層の注釈はパレットモードにも使用される
マルチカラーの注釈
- マルチカラーモードに切り替えると階層モードで分離したレイヤを確認できる
- 統一的な注釈では1つのレンダリングモードでレイヤ構造の変更を他のレンダリングモードにそのまま反映させる
- 前面を赤にして上面は青そして側面は黄色に指定する
可変色の注釈
- キューブシンボルをタイマーとして使うために可変色に対応させる
- 赤い面を使って可変色を指定する
- 赤い面を別のレイヤに分離する
- レイヤを並べる順番は最初に塗りたいレイヤを下に最後に塗りたいレイヤを上に配置する
- 分離したレイヤをすべて選択し[可変]ボタンをクリックする
- 可変色のスライダを動かしてプレビューができる
消去 (Erase) の使い方
- 円の内側にシンボルをセットした例
- 円と立方体のパーツを別のレイヤに分割する
- マルチカラーモード、階層モードで意図通りに表示されている
- モノクロモードでは立方体と背後の円とのコントラストがない
- シンボル内のすべてのパスが1つのレイヤにある場合、立方体のパスは円形のパスに穴を作りモノクロモードではそれがとても際立つ
- 今回は円を自身のレイヤに移動させたので立方体のパスが穴を空けない
- 代わりに円の上に立方体を移動する
- 見えにくいが統一的な注釈で対応ができる
- 「消去」を選択するとその後ろのレイヤに穴が開く
- 前面にある全てのピースに可変色を加える
- 該当ピースを全て選択してコンテキストメニューで「新規レイヤに分割」を選択する
統一的な注釈のまとめ
- 独自のシンボルに注釈する迅速で強力な方法
- １つのレイヤが全てのレンダリングモードに適用される
- シンボルの見た目をモノクロモードで調節することができる
- 可変色をシンボルの個々のレイヤに追加することができる
- レイヤのZオーダーがレイヤのパーセント値によって埋まっていく順序を定義する
- 各レイヤに使用される閾値はゼロから100％の間の等間隔に配置される
- レイヤ構造の一部であるため、可変色の設定は全体のレンダリングモードで共有される
- 「非表示」「消去」のレイヤオプションが統一的な注釈に加わり、レイヤ構造が簡単に共有できる
- レイヤを「消去」に設定すると、そのレイヤの形状を利用して背後にあるレイヤを消去する
- レイヤを「非表示」に設定すると、それは特定のレイヤから除外される
- 新機能はテンプレート4.0で利用できる
- Xcodeに取り込むにはSF Symbolsアプリから4.0のテンプレートでシンボルをエクスポートし モノクロモードのコントロールをし可変色を使用する
- テンプレート3.0以前のシンボルは、統一的な注釈に自動的にアップデートされる
- 以前の環境にも対応させる場合、3.0と2.0の環境を引き続き利用可能
別シンボルの可変色の利用
- タイマーのコードを変更する必要がない
- 使用するシンボルの名前を変更し、以前と同じパーセント値の値を渡せば利用できる
参考資料
Discussion