🎨
WWDC25『SF Symbols 7の新機能』セッションのまとめ
シンボルのデザインや構築方法の復習
- シンボルはアイデアや感情が一瞬で伝わるよう細心の注意を払ってデザインされる
- 1つのベクトルポイントから連続したパスを作成し、徐々に図形にしていくことでデザインに変換される
- 各ベクトルポイントと曲線により、一定の意図のもとで線をガイドし図形の特徴や輪郭を定義する
- シンボルは単に目に見える輪郭を持つパスではない
- そのままではシンボルを完成させる微妙なディテールが入らないため
- アウトライン化された図形から構築される
- 比率、余白、視覚的な重みを正確に制御できるようになっている
- 一部の図形は方向が逆の2本のパスで構成されるので、それぞれのパスを使って外観を細かく調整することができる
描画 (Draw)
描画と描画オフ
- 描画では2つの新しいアニメーションプリセットを導入した
- アニメーションでシンボルを画面に登場させる描画と、シンボルを画面から消失させる描画オフ
レイヤーごと (By Layer)
- 描画と描画オフは既存の再生オプションをサポートする
- デフォルトオプションのBy Layerではパスごとに描画の開始時点が異なる
シンボル全体 (Whole Symbol)
- より迅速に完了するエフェクトが必要な場合は、Whole Symbolを選択できる
- すべてのレイヤーをまとめて描画し、各描画パスが同時に開始し同時に終了する
個別 (Individually)
- 描画プリセットの新しい再生オプションである個別では、各レイヤーを1つずつ描画し、前のレイヤーが終了するのを待ってから次のレイヤーを開始する
- 意図に沿った表現を追求し、それぞれの動きに注目を集めたい場合はこのオプションを使用する
左から右へ描画
- 描画では柔軟性を重視し描画方法をシンボルごとに定義できるよう設計されている
- 風のシンボルでは左から右へ描画することで動きを表す
右から左へ描画
- アラビア文字のシンボルは文字の書き方向と一致させるために右から左へ描画される
中心から描画
- 正対称のシンボルのように中心から描画できるシンボルもある
複雑なシンボルに対応
- 矢印のように2つの図形で構成され1つの図形として動作する複雑なシンボルもある
- 描画はこれらの合成図形にも対応している
- 矢印の先端をパスに沿って移動させることができる
描画のプレビュー
- 描画を選択すると3つの再生オプションが表示される
- 既存のアニメーションプリセットのようにアプリ内でプレビューできる
描画オフのプレビュー
- 描画オフはリバーススイッチがある点が異なる
- パスを描画方向に従って描画するか、既存のモーションを継続するか、終了点から逆方向に描画するかを指定する
可変描画
- 描画はアニメーションによってシンボルに精彩を与えられますが、進捗状況を表現するために活用することもできる
- 一部のシンボルでは強度や進捗状況を色によって表現するために可変レンダリングをサポートしている
- 解像度を高めるため、レンダリングプリセットに可変描画を導入した
- 可変描画では対象の各レイヤーで新しい描画注釈を活用する
- 不透明度を下げた各レイヤー上で特定のパーセンテージでパスをレンダリングする
- ダウンロードなどの進捗状況を視覚化したり、気温を反映したり、ヨガのセッションの完了状況を示したりする際にも最適
- 既存の可変レンダリングピッカーを拡張して新しい描画オプションを追加した
- [Draw]を選択すると対象の描画レイヤーが可変色の場合と同様に可変レンダリングに反応する
- シンボルでは可変色と描画の両方をサポートするよう設定できる
- レンダリング時に選択できるのはいずれか1つだけ
- システムが優先する可変レンダリングのモードを使用するデフォルトのオプションを選択する
マジック置換
- 一致するエンクロージャを認識し2つのステータス間のシームレスな遷移を実現する
- 2つのシンボルが同じエンクロージャを共有する場合、システムはそのエンクロージャを維持しつつ 異なるレイヤーを置き換える
- サポート対象のシンボルにおいてマジック置換に描画を追加した
- 消失するシンボルには描画オフを登場するシンボルには描画を利用できるようになる
- アニメーションインスペクタの既存のマジック置換プリセットでこれらの機能強化をプレビューできる
- マジック置換は他のプリセットと同じくアニメーションピッカーの中にある
グラデーション
- シンボルにグラデーションを適用すると階調のない色では表現できない光が当たっているような印象を生み出す
- SF Symbolsの新しいグラデーションレンダリングは、単一のソースカラーから滑らかな線形グラデーションを生成する
- システムカラーとカスタムカラーの両方で使用できる
- すべてのレンダリングモードで使用でき、独自のカスタムシンボルにも適用できる
- グラデーションはあらゆる縮尺とサイズで美しく表示されるが、特に大きなインスタンスで効果的
- シンボルの奥行きや次元などに目を引きつけたい場合にグラデーションを活用する
- インスペクタのレンダリングモードの下のグラデーションをオンにしてプレビューできる
カスタムシンボル
ガイドポイント
パスの構成
- 描画の注釈の仕組みを理解するにはシンボルの描画方法を詳しく知っておく必要がある
- ハートのシンボルの例は2本の別々のパスで構築されている
- scribble.variableは可変幅で描画されてる。そのためパスをストロークするだけでは、アニメーションを構築できない
- 描画のアニメーションは目的の描画パスに沿って配置されるガイドポイントにより動作する
2つ以上のガイドポイントが必要
- これらのポイントは名前の通り定義したルートに沿ってパスをガイドする
- 描画パスを適切に計算するにはパスに少なくとも2つのガイドポイントが含まれる必要がある
開始点と終点
- 開始点は白抜きの円で示され終点は閉じた円で示される
特殊なガイドポイント
- パスが複雑になるにつれガイドポイントを追加して開始点と終点の間のギャップを埋める
- 複数の描画パスを示す
- パスに沿って矢印の先をガイドする
- 複数のサブパスで開始点と終点を共有する
- パス内の急カーブはコーナーポイントとしてマークする
注釈の付け方
描画ツールバー
- アプリツールバーのコントロールを使用してギャラリービューに表示を切り替える
- アニメーションリストで描画を選択すると描画ツールバーがキャンバスの上部に表示される
ガイドポイントモード
- 左端のボタンを選択するとガイドポイントモードになる
- キャンバス内でカーソルを動かすと配置プレビューが表示される
- 位置に問題がなければシングルクリックでガイドポイントを配置し次のポイントの配置に移る
- 最初に配置したポイントが自動的に開始点になる
- 2つ目のガイドポイントを配置するとシステムが終点と描画方向を決定し矢印で示す
急なターンのガイドポイント
- スクリブルのシンボルはターンが多く各ターンでアニメーションをガイドするにはパスに沿ってさらにガイドポイントを配置する必要がある
- 急なターンの付近のギャップを埋める必要がある
- 複雑な図形のパスをスムーズにアニメーションで動かすには、ここで正確に作業することが重要
複数パスのガイドポイントをつける
- シンボル内の各パスに同じルールセットを使用して特定の描画パスと方向を定義できる
- 各レイヤーを選択して左から右に描画するようそれぞれの線に注釈を付ける
描画方向を変える
- 既存の配置ガイドポイントはパスに沿ってドラッグして動かせる
- 別の既存のガイドポイントに越えるように開始点をドラッグすると、矢印の方向が反転しパスが反対方向に描画される
中心から双方向に描画する
- パスの中心に開始点を配置し、開始点の両側に追加のガイドポイントを配置する
- システムは自動的に双方向性を認識し、開始点の両側に矢印を付けて示す
- 対称効果を得るために複数のレイヤーすべての開始点が整列するようにする
スナップ機能
- スナップ機能をオンにすると整列しやすくなる
適応型のエンドキャップ
- デフォルトではパスは丸みのあるエンドキャップで描画される
- 開始点でコンテキストメニューを使用し、適応型のエンドキャップを設定するとアニメーションでパスに合ったエンドキャップスタイルが使用される
- 適応型のエンドキャップを使用できるのは、単一方向に描画されるシンボルのみ
複数のサブパスで構築されたシンボル
- 複数のサブパスで構築されたシンボルにも描画の注釈を付けられる
- 円のシンボルに最初のガイドポイントを設定すると、システムはそれが2つのサブパスにまたがって配置されているのを検出し、開始点と終点の両方として扱う
- ガイドポイントの後端にあるカプセルによって示される
- デフォルトではアニメーションは時計回りに描画される
- 円を反時計周りに描画したい場合は、ガイドポイントのコンテキストメニューから方向を切り替えることができる
- このタイプの描画は一方向のアニメーションのみをサポートしている
- 双方向に描画するように注釈を付けることはできない
描画と非描画のコンポーネントがシンボル
- 描画と非描画の両方のコンポーネントがあるシンボルの場合、非描画コンポーネントはデフォルトで表示される
- 矢印など一部のケースでは追加の注釈作業が必要になる場合がある
- 線を描画する時に矢印の先が線につける
- 配置済みのガイドポイントに矢印の先をドラッグすることでガイドポイントに関連付けられた非描画要素であるアタッチメントを作成できる
- アタッチメントのガイドポイントが示す点にアタッチメントが最初に表示され、そこからパスに沿って移動する
- アタッチメントを作成すると、関連付けられたガイドポイントにアタッチされたパスのプレビューが表示される
- アタッチメントを削除する場合は、パスをガイドポイントからドラッグし、キャンバスの別の場所にドロップする
- アタッチメントを作成する際は、ベースとは別のパスとして描画する
- 描画アタッチメントを使うには、カスタムシンボルを精査して修正し、矢印の先などの要素を抽出する必要がある
ガイドポイントの手動設置
- ガイドポイントを配置する際、システムはガイドポイントの各端のデフォルトの配置の決定を支援する
- デフォルトの位置がそのシンボルに最適な配置ではない場合は、optionキーを押したままガイドポイントの片側をドラッグすると、関連するポイントに影響を与えずにパスに沿って前方か後方に動かせる
多数のパスが重なり合うシンボル
- 多数のパスが重なり合うシンボルや、パスが互いに直接重なり合うシンボルの場合、レイヤーリストでサブパスを直接選択して、そのサブパスに特定のガイドポイントを 強制的に適用することもできる
ガイドポイントのタイプ
- ガイドポイント配置の際、システムはパスに沿った配置に基づきタイプを決定する
- デフォルトのタイプを上書きするには、ガイドポイントのコンテキストメニューから実行できる
- ガイドポイントを標準のポイントにするか、エンドポイントとして機能させるかをここで決定できる
- ガイドポイントは設定を自動に戻してシステムに面倒な作業を任せることもできる
- コーナーというガイドポイントは特に鋭い角のパスを描画する場合に指定する
- コーナー以外のすべてのタイプのガイドポイントは、描画するパスの両側に1つずつ合計2つのポイントを関連付けする
- コーナーポイントは2つのポイントをパスの同じ側に関連付ける
- コーナーポイントは菱形で表示されること
ガイドポイントのリセット
- 最初からやり直したい場合、ガイドポイントのリセットオプションが各レイヤーのコンテキストメニューにある
ウェイトとスケール
- シンボルは9つの太さと3つの縮尺をサポートする
- カスタムシンボルのアニメーションが、すべての構成で適切に動作することの確認も重要
- 注釈付けが必要なのは3つだけで、残りはすべてシステムが処理するので簡単
- カスタムシンボルに注釈を付ける場合、最初の注釈の太さは必ずレギュラーにする
- 基本注釈として機能し、ガイドポイントを追加および削除できる唯一の太さとなる
- システムはウルトラライトとブラックのウェイトにプレースガイドポイントを自動で補間する
- ウルトラライトとブラックの各ガイドポイントは、レギュラーのガイドポイントに関連付けられている
- シンボルはテンプレートを使用して、各種のウェイトに対し補間できるため、関連付けられているガイドポイントがレギュラー、ウルトラライト、ブラックで同じ順序にする
ガイドポイント番号の表示
- ガイドポイント番号の表示をオンにすると順番が確認しやすくなる
- 各ガイドポイントの横に一意の番号が表示され、レギュラーで関連づけられている順序に基づいてガイドポイントを実行する順序が表示される
- 6、7、8の順序が間違っているが、新しい位置にドラッグするだけで簡単に修正できる
- 上書きしたガイドポイントはオレンジ色で表示される
可変描画を有効にする
- 設定のポップオーバーで可変レンダリングスイッチをオンにした後、レイヤーリストで可変描画ボタンを使用してレイヤーをアクティブ化できる
- この選択を行う際は各レイヤーを綿密にレビューし、適用対象のレイヤーを決める
新しいAPI
- 描画を適用して新しいアニメーションプリセットを使うにはsymbolEffectモディファイアを使い、シンボルアニメーションの既存のパターンに従う
- SwiftUIではisHiddenの値が更新されるとシンボルが描画オフになって、その後描画になりアニメーションが適用される
- またAppKitとUIKitではそれぞれ描画と描画オフを指定し、各アニメーションをトリガーする
- 他のシンボルエフェクトと同様に、デフォルトのBy Layerを上書きしたい場合は、希望する再生モードをインラインで直接設定できる
- 可変描画を利用するには関連するセクションでVariableValueModeを指定する
- シンボルを構成する際は必ず希望する変数の値を設定する
- グラデーションレンダリングを利用するにはSwiftUIビューのモディファイアかUIKitとAppKitのsymbolConfigurationでColorRenderingModeをgradientに設定する
参考資料
Discussion