アニメーションシンボルの作成

♪ ♪

Paul: こんにちは Paulと申します SF Symbolsアプリを担当してます SF Symbolsはその導入以来 Appleプラットフォームの 見た目と操作性の 決定に大きな役割を果たしてきました

シンボルには一貫性があります Appleプラットフォームには何千もの シンボルが組み込まれており 共通のビジュアルデザインと 挙動を共有しています アプリやインターフェイスを 親しみのあるものにできます シンボルはカスタマイズもできます ニーズに合った組み込みの シンボルがない場合は SF Symbolsを使用して 独自のシンボルを作成して システムが提供するものと同様の 機能をすべて付与できます

そしてもちろんシンボルには 表現力があります シンボルは小さな画面領域で 複雑な概念を伝え 言語を超えてアイデアを伝えられるのです またアプリをより生き生きと 遊び心のあるものにできます

そしてこの度 SF Symbols 5により シンボルはまったく新しい次元の 表現力を獲得しました アニメーションです SF Symbolsはこの新次元を 探索するのに役立ちます 今回はSF Symbolsの 使い方を解説しますが 新しいアニメーション効果のテストや 新しいカスタムシンボルの作成 既存のカスタムシンボルの更新 新しいアニメーション機能で 完璧に動作するようにする方法 独自のカスタムシンボルに基づいて 使い慣れたシンボルを作成する新しい方法 アプリで使用するシンボルが 古いプラットフォームでも 見栄えよくする方法について説明します それではSF Symbolsを起動して いくつかの例を見てみましょう

ツアーの最初の目的地は サイドバーの新しいタブです アニメーションインスペクタで ご想像のとおり 新しいアニメーション効果を プレビューできます 見やすくなるようギャラリービューに 切り替えます 組み込みのスピーカーシンボルで 実験してみます

このポップアップボタンから 新しいアニメーション効果を選択します バウンスアニメーションは とっかかりとして最適です プレビューボタンを押すと ギャラリービューでアニメーションが 再生されることがわかります その下のシンボル行とサイドバーの プレビュー領域など さまざまなレンダリングモード すべてで表示できます プレビューボタン周囲にはアニメーションを 構成するためのコントロールが表示されます シンボルを上向きか 下向きにバウンスさせるか シンボルのレイヤを個別にバウンスさせるか シンボル全体を一度に バウンスさせるかも指定できます

これらの設定の一部を変更すると プレビュー領域の下のラベルが 「Automatic」から「Modified」に 変更されます アプリのコードを作成する場合 すべてのアニメーションタイプには デフォルト設定があります SF Symbolsを起動すると これらのデフォルト設定は あらかじめ選択されており 「Automatic」という語句が表示されます デフォルト以外に切り替えると ここに「Modified」という 文字が表示され 設定を変更したことが通知されます ここに表示される リセットボタンをクリックすると デフォルトに戻せます

好みの設定を見つけて コードで直接指定したい場合は このボタンをクリックして SwiftまたはObjective-C APIに 必要なエフェクトの名称をコピーできます 新しいアニメーションの チェックに戻りましょう

このスピーカーシンボルは 可変色もサポートしています

可変カラーアニメーションを 試してみましょう

オプションを選択すると 可変カラーレイヤが徐々にアクティブになり その後フェードアウトします を選択すると一度に1つの レイヤのみがアクティブになります オプションをオンにして この構成が様々な様相を 再現できるかの確認ができます

以上が新しいアニメーション効果の 概要です システムが提供するSF Symbolを 使用してプレビューしてきました でも組み込みのシンボルは 話の半分にすぎません アプリにカスタムシンボルがある場合は SF Symbolsを使用することで アニメーションの脚光を 浴びることになるのです 昨年娘と一緒にパズルキューブを 解く練習に役立つアプリを 開発していたときに使用した カスタムシンボルが いくつかあります 今年はスピードキューブの アプリを 解くのにどれくらいの時間がかかるか 追跡するのに使おうと思います 昨年のカスタムシンボルを 利用して アニメーションの準備を 始めたいと思います

これは昨年作成した3x3 キューブのシンボルです およびの レンダリングと注釈をし またさまざまな色を適用できるように 前面をさまざまなレイヤに分割しました

このシンボルは可変色となっているため アニメーションも 可変色でサポートされています

これローディングインジケータに 使用してみます

他のアニメーションも見てみましょう

Pulseはタイマーが一時停止 されているときに最適です 設定が選択 されているにもかかわらず ボタンのクリックで シンボル全体が点滅してしまいます ここの注釈リストには どのレイヤをパルスするかを 設定を適用している場合に コントロール可能となっています シンボル内のどのレイヤも マークされていない場合は シンボル全体がパルスします そこで前面を構成するすべての レイヤをパルスにマークし 再度プレビューします 想定どおりになりました これならタイマーが一時停止の際 見栄えがします 他のアニメーションはすべて モーション使用のため別途確認が必要です SF Symbolsのバージョン4以前から エクスポートされたシンボルや Xcode 14と互換性を持たせるために エクスポートされた場合 モーション情報は含まれず 常にアプリ内でシンボル全体として動きます Xcode 15で使用するために このバージョンのSF Symbolsの バージョン5からエクスポートすると どうなるか見てみましょう

バウンスアニメーションに戻って パズルキューブシンボルを再生します

ちょっと動きが激しいですね！ デフォルトではが 選択されている場合は シンボル内の各レイヤは独立して移動します シンボルのアニメーションに 興奮を抑えきれないものの これは少々やりすぎかもしれません 新機能である注釈を使用して これを修正しましょう サブレイヤをまとめてアニメーションできる レイヤのグループを 正面を構成する全レイヤを選択して 新しいレイヤグループに 追加できるようになりました

レイヤグループ内では すべてのレイヤが注釈と設定を 保持されますが 全部一緒に動いてしまっています

動きは少なくなりましたが 立方体のさまざまな部分が 別々に動くのはまだ少し 不思議な感じに見えます

そこでシンボルのすべてのレイヤを 元に戻して選択し すべてを1つのグループに追加 してみることにします

それはこのシンボルの目的と一致します キューブの各面は 個別に移動するわけではなく この図では異なる深度に あるわけでもありません これらのレイヤをすべて グループ化することで レイヤごとのコード設定に関わらず キューブが常に1つのユニットとして 動くように変更します 最終的にはカスタムシンボルを 個別に確認して どのグループが適しているかを 判断する必要があります

さてシンボルの長所の 一つは一貫性と 親近感であると先ほど述べました これはカスタムシンボルを設定するときに 覚えておくべき重要な概念です これは昨年取り組んでいた 別のカスタムシンボルです パズルキューブですが 円の上に配置されています この円形の囲いはSF Symbolsの 一般的なデザイン要素です 組み込みライブラリには 多くのシンボルがあり この動画シンボルも循環 処理が使用されています SF Symbolsのレパートリーには この種の 再利用可能なデザインパターンの例が 他にもたくさんあり 円形の境界線やスラッシュに バッジなどのモディファイアなどもあります これらの処理の一貫性は SF Symbolsを即座に認識し 親しみやすくする重要な要素の1つです カスタムシンボルも使いやすさの 利点を最大限に活用するために こうした処理と一致するよう 設定する必要があります ではカスタムシンボルがシステムと 一貫していることを確認するには？ システムシンボルの ライブラリを調べて 同様のシンボルの例を見つけて それを基に新しい図面を作成します さまざまなレンダリングモードの それぞれでシンボルに どのように注釈が付けられるかを確認し レイヤごとにアニメーションされたときに どのように動くのか 可変色の設定がどのように 変化するかについても説明します

その他のスラッシュやバッジなどの 他の一般的な デザインパターンに対しても 同様の処理が可能です 覚えることがたくさんありますよね それよりキューブを解くための 最速の方法を思い出すために メンタルスペースを使いたいと思います SF Symbolsに関する目標の1つに それをできるだけ簡単にして カスタムシンボルをシステム提供の シンボルと並行して適合させ 使い慣れた体験を提供したい ということがあります そこで今年は新機能を導入しました シンボルコンポーネントです シンボルコンポーネントは システム提供のSF Symbols同様の アートワークと動作を提供します カスタムシンボルの1つを取得し それをシンボルコンポーネントと組み合わせ すぐに使用できる新しい シンボルが表示されますが その見た目も感触もまるで 組み込みのもののように感じられます いくつかのコンポーネントを キューブシンボルと組み合わせて どのように機能するか見てみましょう まずカスタムシンボルの コンテキストメニューを表示し を選択します 表示されたシートで コンポーネントのライブラリから 使用したいものを選択できます エンクロージャにバッジ スラッシュなどの コンポーネントがあります slashとbadge.plusに circleとcircle.fillから始めます

作業はこれだけです 新しいシンボルがカスタムシンボル ライブラリに表示されており このままでも良い見栄えです プラスバッジはマルチカラーで 正しく色付け スラッシュも背後のキューブと 別にアニメーションさせ

また.circle.fillバージョンも 階層モードでプライマリレイヤを 使用するよう設定されており 後ろの円もモノクロ処理されています 可変色の設定も保存されています

基本シンボルの見た目とデザインに応じて 追加の調整が必要な 場合もあり アノテーションコントロールは通常 サイドバーで実行できます

たとえば視覚的なアーティファクトを 避けるためにバッジの位置を 少し調整したい場合 シンボルの反対側に移動したい こともあるでしょう

シンボルが十分に カバーされるように スラッシュの長さを 変更することもできます

シンボルがサポートする さまざまなスケールと ウェイトで新しいシンボルが適切に 表示されるかどうかも確認します ３つのスケールと９つのウェイトで 合計27種類のバリエーション ありがたいことにシンボルコンポーネントは 変数テンプレートによって強化されており ほとんどの作業はこれで処理されます

変数テンプレートはSF Symbols 3で 導入されたので Small縮尺では 3つの図面を用意するだけで済み 各々ウルトラライトとレギュラー ブラックのウェイトとなります その後各図面で使用した ベジェパスに互換性がある限り システムは図面を混合することで 残り24個の可能なバリアントを 作成できます シンボル3個分で 27個のシンボルとはかなりお得です シンボルコンポーネントも 同様に機能します Small + Ultralightや Small + Regularに Small + Blackのバリエーション ギャラリービューの上部には 一連のプレビューがあり 3つの異なるウェイトで シンボルを確認して 素早い切り替えも可能です スラッシュを長くしたときの例のように Regularウェイトを調整するだけで済み 変更はUltralightと Blackにも引き継がれます エンクロージャ内での オーバーラップなどの問題が発生したり シンボルの形状を別の配置にする 必要がある場合は UltralightまたはBlackの Overrideチェックボックスを クリックして追加の調整を行います 囲まれたキューブのスケールを 下げて隙間を与えます Semiboldのような中間のウェイトを 自動的に作成する場合 システムは上記の新しい 調整を考慮します システムはこのような エンクロージャの舞台裏で 多くの処理を行っています ベースシンボルがエンクロージャに 収まるように縮小されるため システムはベース シンボルの 変数テンプレートを使用し ウェイト補正を適用する際には シンボルの重さと太さをサイズが 小さくなるにつれて増やされます これは見た目の一貫性を保つのに役立ち 大き目の非囲みバージョンと それを囲む円にも適用されます シンボルコンポーネントの 他の部分と同様に 囲まれたシンボルのウェイトを さらに微調整できるので 希望する視覚的な効果を得られます シンボルコンポーネントは こんなに強力なのです これらは既存のカスタムシンボルに 基づいて新しいシンボルを 作成するための迅速かつ簡単な方法で ビヘイビアとアートワークで システムが提供するSF Symbolsの レパートリーと一致します シンボルコンポーネントは必要に応じて ウェイト補正を適用できるよう 変数テンプレートから作成された カスタムシンボルを操作する必要があります これは変数テンプレートに含まれる 個々のバリアントのオーバーライドが コンポーネントと組み合わせるときに 無視されることも意味します 最後にコンポーネントを使用して 作成されたシンボルからは 編集可能なテンプレートをエクスポート できないことに注意してください シンボルコンポーネントは調整を行った後に 描画処理するデザインなので 手動で編集する必要はありません

今年のSF Symbolsには40を 超えるコンポーネントがあります

最後にまとめる前に考慮すべき 重要な項目がもう1点 新しい機能を採用するときは アプリを使用している多くの人が 古いプラットフォームを使用している ことを覚えておくことも重要で それでも素晴らしいアプリ内 体験が得られるべきです SF Symbols内の エクスペリエンスを再設計し アプリがサポートするすべての プラットフォームでシンボルが 古いものでも希望どおりに 動作することを 確認できるようにします 編集可能なテンプレートをエクスポート してシンボルの形状と構造を変更すると ワイヤーフレームビューが 塗りつぶされた形状の テンプレートの代わりに表示されます モーション用に最適化された シンボルにはレンダリング中に 他の形状を消去するために 使用されることがよくあり それは感嘆符バッジの周りの 追加の境界線などです 描画段階ではシンボルを構成する 形状に注目する方が 良いことがわかりましたので アプリでシンボルにアノテーションを 付けてどの図形が色を描画し 消去するかをマークするまで待ちます テンプレート内のワイヤーフレーム スタイルはそれにうってつけです

テンプレートをエクスポートするときの 新しい互換性ピッカーもあります デフォルトでは最新かつ 最高のシンボルが取得され その多くはモーション用に 再描画されています ただし古いプラットフォームが ターゲットの場合はSF Symbolsで そのプラットフォームに適切な テンプレートが提供されます たとえばiOS 15や macOS Montereyに対応の SF Symbols 3をターゲットに している場合 モーションに使用するレイヤ構造により SF Symbols 3では完全サポート されて最適化されていない 単純な描画が得られます iOS 14 やmacOS Big Surに 対応する SF Symbols 2をターゲットと している場合は SF Symbols 3では変数 テンプレートが導入されたため 静的テンプレートが自動的に 取得されます カスタムシンボルにアノテーションを 付ける場合にも同じ概念が適用されます デフォルトでアプリが提供する すべてのアノテーション機能に アクセスできます ただし特定のプラットフォームを ターゲットにするようにシンボルを設定 アプリがシンボルの準備ができているかを 確認するのに役立ちます たとえばSF Symbols 3以前を選択すると SF Symbols 4まはカスタマイズ できなかった アノテーションが存在するため シンボルのモノクロのアノテーションを 編集できなくなります 最後にシンボルをXcode用に エクスポートする準備ができたら 使用するXcodeのバージョンを アプリに伝えるだけです アプリはエクスポートに最適な ファイル形式を選択し 古いプラットフォームを対象とする アプリにコンパイルされる場合 ファイルが適切に動作することを 確認します このようにSF Symbolsを使用すると アニメーションの 準備ができたシンボルを 簡単かつ迅速に作成できます アニメーションインスペクタや 新しいアノテーション機能 シンボル コンポーネント 互換性チェックにより ほんの数クリックでアクセスできます これはスピードキューブを学んだ 経験にもよく似ています 考慮すべき箇所や可動部分も たくさんあり 膨大な情報量のように 思えるかもしれませんが 適切なツールを使用すれば 完成までのあまりの速さに 驚かれることでしょう ありがとうございます ♪ ♪