SwiftUIにおけるモーション

こんにちは、カートと申します。 ワールドワイド・デベロッパー・ リレーションズチームのテクノロジー・ エバンジェリストを務めております。 本日、皆様とお会いでき、またオンラインで ご参加の皆様をお迎えできることを 大変嬉しく思います。 デベロッパー・リレーションズチームに 加わる前は、 SwiftUIのエンジニアとして、 ナビゲーションや APIの設計に注力しておりました。

本日は、SwiftUI を使用して アプリにモーションを取り 入れるための基礎についてお話しします。

デバイスの性能が向上するにつれ、 インターフェースもより ダイナミックになってきました。 このモーションは、うまく活用されれば、 デバイスをより生き生きと、 そしてパーソナルなものに感じさせてくれます。 モーションは、アプリや プラットフォームをより理解しやすくします。 コンテキストを提供し、 ユーザーの注意を誘導してくれます。 さらに、単純に楽しいものです。

こうしたダイナミックなインタラクションを 実現するには、 多くの要素が組み合わさっています。 設定アプリでビューを押し 込むようにして別のビューへ移動する トランジションや、集中モードのオプションの シートを表示するといったものから、 地図をズームして詳細を確認したり、 アプリ間をスワイプして切り替えたりするなど、 ユーザーがデバイスと直接やり 取りするジェスチャーまで多岐にわたります。

そして最後に、画面上のオブジェクトが 移動したり、 拡大したり、Dynamic Islandの ライブアクティビティのように 視覚的なプロパティが 変化したりするアニメーションがあります。 これらすべてが連携して、 滑らかでインタラクティブなインターフェースを 作り出しています。

SwiftUIは、アプリに滑らかな動きを取り 入れるための最適な方法です。

SwiftUIにおける動きは 多岐にわたります。 最もシンプルな例としては、 組み込みのSwiftUIコンポーネントを 使用するだけで、 自動的にトランジションが適用されます。

さらに一歩進んだ「状態駆動型アニメーション」 では、 修飾子のメニューから選択して、 特定のプロパティが変更された 際のアニメーション方法をSwiftUIに 指示できます。

あるいは、フレームごとに動作を詳細に指定する 完全なカスタムアニメーションに 全力を注ぐことも可能です。

本日は、この幅広い 範囲にわたる例をご紹介いたします。 これにより、皆様のアプリに 最適なダイナミックな動きの 体験を創り出すために、 適切なツールをお選びいただけるでしょう。

多くのSwiftUIビューは、 自動的に滑らかなモーション効果を提供します。 「ウィッシュリスト」アプリから の例をいくつかご紹介し、 これらの自動効果を調整して、 アプリで意図した雰囲気を演出する 方法をお見せします。 その後、SwiftUI を使用して アプリに状態駆動型アニメーションを追加する 方法について解説します。 修飾子とプロパティ。 これらのアニメーションの 基礎を解説しますので、 その都度、タスクに適した 手法を選択できるようになります。 最後に、SwiftUIにおける カスタムアニメーションの威力を実例で示し、 さらに詳しく学ぶための リソースもご紹介します。

SwiftUIの組み込みビューを使用すると、 多くのモーション効果が自動的に得られます。

このウィッシュリストアプリは、 その威力を示す素晴らしい例です。 ユーザーが旅行をタップすると、 ナビゲーションスタックがプッシュされます。 チェックマークのようなサムネイルアイコンが、 操作を反映します。 詳細画面はサムネイルにポップバックします。 シートはアニメーションとともに表示されます。 ポップアップメニューは、Liquid Glassボタンから モーフして現れます。 スクロールビューは、ユーザーが スワイプすると自動的に加速し、 スワイプを止めると減速し、 必要に応じて特定のビューで停止します。

これらのモーション効果を自動的に 得るために使用できる 4つの異なるSwiftUIビューについて 解説していきます。まずは、 ウィッシュリストタブにある、 旅行の詳細を表示するこのようなナビゲーションスタックから 始めましょう。

ウィッシュリストアプリでは、各タブ内に ナビゲーションスタックを使用しています。

このスタックの中には、さまざまな旅行の タイルがすべて含まれています。 ここでは、「Fall Getaways」のような コレクション内のすべての旅行を反復処理する 「for each」に集中します。

これらのサムネイルはそれぞれ、 目的地ビューとラベルを提供する ナビゲーションリンクによって 描画されています。

ラベルは、ユーザーが タップするインターフェースの一部です。 ユーザーがタップすると、 目的地ビューがスタックにプッシュされます。 デフォルトでは、ユーザーが戻る ボタンをタップするか、画面をスワイプすると、 目的地ビューは後端からスライドインし、 アニメーションで消えていきます。 一方、「ミュージック」や 「ニュース」などの一部のアプリでは、 「ズームトランジション」と 呼ばれる手法を用いて、 このプッシュやポップの 動作を洗練させています。

ナビゲーションスタックにズームトランジションを 使用させるには、 たった3つの手順があります。 まず、ビューのプロパティに ネームスペースを追加します。 ネームスペースとは、SwiftUIが 2つのコードを関連付けるために 使用する一意の識別子です。

次に、宛先ビューにnavigationTransitionモディファイアを 追加し、 zoomパラメータ、一意の ID、 およびネームスペースを渡します。

最後に、リンクのラベルに matchTransitionSourceモディファイアを 追加します。

これで、ウィッシュリストアプリでは、 旅行の画像をタップするとズームトランジションが 使用されるようになりました。

戻る操作を行うと、詳細ビューが サムネイルサイズに縮小されます。

ズームトランジションは、 目的地がラベルに含まれる コンテンツを繰り返し表示する場合に非常に 効果的です。例えば、ザイオン国立公園のこの 美しい写真のように。

場合によっては、ウィッシュリストの 検索タブにあるこの例のように、 ナビゲーションリンクのラベルの方が 詳細な情報になっていることもあります。 旅行名の横にサムネイル写真が 表示されています。 このような場合は、リンクラベルのサブビューに 「MatchedTransitionSource」モディファイアを 追加します。 その方法は以下の通りです。 これらの行は、「Search Item View」という 名前のカスタムビューで描画されています。 このビューでは、サムネイルと旅行名を含む HStack が使用されています。

ここでは、検索アイテムビュー全体ではなく、 サムネイル画像に 「matchedtransition source」修飾子を 追加しました。

囲んでいるナビゲーションスタックから、 名前空間をプロパティとして渡しました。 これで、行をタップすると、詳細ページが サムネイルからズームアウトします。

ポップバックすると、ページが サムネイルにズームインして戻ります。 このちょっとした工夫が、 とても気に入っています。 楽しいですし、ユーザーが最初にタップした 行に視線が自然と向くようになります。

本日ご紹介する2つ目の組み 込みビューは、シートです。 ウィッシュリストアプリのシートに 関するコードについて解説します。 こちらは、ウィッシュリストタブの ナビゲーションスタックです。 シートを表示するかどうかを判断するために 使用する「is presenting add trip」というプロパティが 設定されています。 スタック内には、ツールバーモディファイアが 添付されたスクロールビューがあります。

ツールバー内には、この プラスボタンがあります。

この構造が整っていれば、シートを表示するにはたった 2つの手順で済みます。 まず、ツールバー内のボタンが「is presenting add trip」 プロパティをtrueに 設定し、次に、シートモディファイアが 「is presenting」時に 何を表示すべきかを指定します。 「Add trip」はtrueです。 ここでのモディファイアは、 プロパティへのバインディングを受け取ります。 ドル記号はそれを意味しています。 Coalが後ほどバインディングについて 詳しく説明しますが、現時点で重要な点は、 これによりSwiftUIが` isPresenting:AddTrip` を再び` false` に設定できるということです。 これらの設定が整っている状態で、 ユーザーがシートを閉じると。 ボタンをタップすると、 シートが画面の下からスライドして現れます。 閉じるボタンをタップすると、 シートは再び下にスライドして隠れます。

ナビゲーションの場合と同様に、 3つのステップのプロセスを適用して、 これをズーム遷移に変換することができます。 2つ目です。 まず、ビューのプロパティに 名前空間を追加します。 次に、シートのコンテンツに` navigationTransition` 修飾子を追加し、ズームパラメータを渡します。 そして最後に、ボタンのラベルに ` matchedTransitionSource` 修飾子を追加します。

これで、ボタンをタップすると、 シートがボタンからモーフして消えていきます。

シートを閉じる際も、 ホーム画面へと滑らかに戻ります。

この動きにより、ユーザーは ボタンとシートを関連付けやすくなります。

SwiftUIのスクロールビューにも、 組み込みのモーションエフェクトが 用意されています。 スクロールビューは、ユーザーが スワイプすると、滑らかな減速とともに動き、 コンテンツの終わりで 心地よいバウンス効果を示します。 こちらは、「Wish List」アプリで 獲得したバッジを表示するための スクロールビューです。 スクロールビューは、ユーザーが スクロールして閲覧できるコンテンツを表示する サブビューを受け取ります。 ここでは、私のすべてのバッジを表示する タイルのスタックとなっています。 オプションとして、スクロールビューは、 スクロール可能な方向を指定する パラメータを受け取ります。 ここでは水平方向ですが、

ウィッシュリストアプリのバッジについては、 スクロールビューが常に バッジが画面の中央に来るように 停止するようにしたいと考えています。 たった2つの手順で、SwiftUIにこれを 実現させることができます。 まず、「scroll target」 ビヘイビア修飾子を追加し、 SwiftUIにビューに 合わせて停止するよう指示します。

次に、「scroll target」 レイアウト修飾子を追加し、 この動作の対象となるビューのスタックを SwiftUIに指定します。

これで設定が完了すると、 バッジをスワイプした際、 スクロールビューは常にバッジが 画面の中央に来るように停止します。

さて、ここからが楽しいところです。 バッジがビュー内をスクロールして出入りする 際に、ちょっとした遊び 心を加えるのも面白いでしょう。 「Books」や「Sports」 といったアプリでは、 こうしたモーション効果が使われています。 これらは「scrollTransition」 修飾子を使って実現しています。

変形させたいビューにこの修飾子を適用します。 こちらです。これが 私の「達成目標」タイルです。

このトランジションをインタラクティブにして、 手動でのスクロールに反応するようにし、 方向を水平に設定しました。

このモディファイアは クロージャを受け取ります。 トランジションを定義します。 SwiftUIは、コンテンツのプロキシとアニメーションフェーズを クロージャに渡します。

フェーズは、トランジションの 進行度を指定します。 先頭エッジで完全に 画面外に出た場合はマイナス1、 完全に画面内にある場合は 0、 末尾エッジで完全に画面外に 出た場合はプラス1となります。

このフェーズを利用して、 コンテンツを変更します。

ここでは、ゴールタイルが 画面外へ移動する際にサイズを縮小し、

垂直軸に沿って3D回転を適用しています。

ぜひご覧になってみてください。 ビューが、まるで丸い カルーセルの一部であるかのように、 端でループしているように 見えることに気づきましたか？ 素晴らしいですね。

本日ご紹介する最後の組み込み ビューは、 SF Symbols を使用したイメージビューです。

先ほどMojoさんがおっしゃったように、 SF Symbolsは 7, 000以上のシンボルを収録した アイコンライブラリです。 この画面には重複する シンボルは一切ありません。

SF Symbolsは、 San Franciscoとシームレスに 統合されるように設計されています。 San Franciscoとは、 Appleのプラットフォームで 使用されるシステムフォントのことです。 Appleデベロッパのウェブサイトから 入手できるMac用SF Symbolsアプリを 使えば、 ライブラリを閲覧して、用途に合った シンボルを見つけることができます。 例えば、「Wish List」アプリでは、 アクティビティリストにチェックマークが

使用されています。これを自分の アプリにも追加してみましょう。 SF Symbolsアプリ内で、SwiftUIの 画像をコードに追加します。 目的のシンボル（チェックマーク、 塗りつぶし円）をコントロールクリックし、 「名前をコピー」を選択します。

その後、Xcodeでその名前を 画像宣言に貼り付けると、

チェックマークが表示されます。 SwiftUI では、 SF Symbols に アニメーションを適用するさまざまな 方法が用意されています。 ここでは 3 つの例をご紹介します。

チャットで相手の返信を待つなど、 進行中の操作を示すには、 無期限のエフェクトを使用します。 これらのエフェクトは、 アクティブな間、継続的に実行されます。 例としては、variable、 color、 scale、 breathe エフェクトなどがあります。

SF Symbols にこれらのエフェクトのいずれかを 追加するには、 isActive パラメータを指定して、 symbolEffectModifier を 使用します。 この引数の値が true のときはいつでも、 エフェクトが実行されます。

ダウンロードのようなイベントを示すには、 離散的なエフェクトを使用します。 完了中。これらのエフェクトは、 イベントが発生したときにトリガーされます。 例としては、バウンス、 パルス、ウィグルなどがあります。

これらの効果のいずれかをSPHシンボルに 追加するには、 「symbol effect」 モディファイアに 「value」パラメータを 指定して使用します。 この引数の値が変更されるたびに、 効果が実行されます。

あるシンボルを別のシンボルに 置き換える場合（例えば、 円にチェックマークを追加する 場合など）には、コンテンツ遷移効果を 使用してください。

これらの効果のいずれかをSPHシンボルに 追加するには、 「content transition」 モディファイアに 「symbol effect」タイプを 指定して使用します。 選択したシンボルが変更されるたびに、 トランジションが実行されます。

SF Symbolsアプリでは、アニメーションを 試すこともできます。

ここでは、アニメーションインスペクタに 切り替えます。 「breathe」アニメーションを選択し、 実行するように設定します。 「再生」をクリックしてテストします。 その後、「コピー」メニューを使用して、 アニメーションの設定をコピーします。

Xcodeに戻り、SF Symbolsアプリで 設定したオプションを含む 修飾子を貼り付けます。

すると、息を吸ったり 吐いたりする動きが再現されます。

SwiftUIのスタック、 シート、スクロールビュー、画像などの組み込み ビューには、さまざまな組み込み エフェクトが用意されています。 修飾子を自動的に追加することで、 アプリに合わせてそれらのエフェクトを 微調整できます。

次に、SwiftUIのもう 1つのアニメーションの種類である 「状態駆動型アニメーション」について ご紹介します。 詳しくご説明いたします。

先ほど、Leahさんが、 SwiftUIのビューが データを画面上のピクセルにどのように マッピングするかについてご紹介しました。 また、Catさんは、 データモデルのプロパティの値に 基づいて、ウィッシュリストのレイアウト内で ビューが表示されたり 非表示になったりする例をお見せしました。

このように使用されるデータは、 ビューの「状態」と呼ばれます。

こちらは、ウィッシュリストアプリの例です。 これは旅行の詳細ビューで、 下部には私が計画している アクティビティのリストが表示されています。 この画像の上に、アクティビティの 完了率を示すテキストと、 アクティビティを完了するにつれて 徐々に埋まっていくバーが表示されています。

アクティビティにチェックを入れると、 SwiftUIは関連する状態を更新し、 そのアクティビティが 完了したことを記録します。 この状態に依存するビューは、 状態が変化すると自動的に 更新されます。

現時点では、アクティビティに チェックを入れると、 すべての変更が瞬時に行われます。 代わりに、SwiftUIにこの変更をアニメーションで 表示するように指示します。 これを行うには、 ` with animation` 関数を使用します。 その方法は以下の通りです。 以下は、表示を行うボタンのコードです。 これは、旅行詳細ページ上のアクティビティを 表しています。

このボタンのアクションは、 関連付けられたアクティビティの「完了済み」 状態を切り替えます。

この切り替えアクションを ` with animation` 関数でラップします。 これにより、ラップされた状態の変化に 伴い発生するビューの更新を、 SwiftUI がアニメーション処理するよう 指示します。 更新後の様子をもう一度ご覧ください。 これで、アクティビティを完了させると、 パーセンテージのテキストがクロスフェードし、 バーが埋まり、アクティビティの 色とチェックマークが クロスフェードします。

これらの変化にアニメーションを 適用するために、 「with animation」を 追加しただけです。 残りの処理は自動的に行われます。

「with animation」の真価は、 そのシンプルさにあります。 状態の変化をこの関数で囲むだけで、 その状態に依存し、アニメーション化可能な ビューのすべてのプロパティに アニメーションが適用されます。 一方、アプリの一部では、それを表現するためにより 精密なアプローチが必要になる

場合もあります。ここでは、 「Wish List」アプリのこの完了オーバーレイに 焦点を当てて説明します。

このアプリでは、完了率のテキスト、バー、 サブタイトルの3つのビューが、 カスタムアクティビティの進行状況ビューに 組み込まれています。

アニメーションに焦点を当てるため、 いくつかのスタイリング修飾子とサブタイトルは 省略させていただきます。 アクティビティの進行状況ビューは、 0から1までの完了値プロパティを受け 取ります。これは完了率を表しています。

書式設定が施されたテキストビューが、 完了率を表示します。

この不透明度修飾子により、完了値が ゼロのときはテキストが非表示になります。

ライムグリーンのバーには、 角丸長方形を使用しています。

バーの幅は、定数のバー幅に 完了値を乗じることで 設定されます。

ここでも、不透明度修飾子により、 完了値がゼロのときは ビューが非表示になります。 さて、Wish Listの設計では、 ActivityProgressViewが 使用される場所すべてでアニメーションを 表示することが求められています。 そのために、アニメーション修飾子を 使用できます。

このVStackにアニメーション修飾子を 適用することで、 渡された完了値が変更されるたびに、 SwiftUIにこれらのビューを アニメーション化するように 指示します。

現時点での動作は以下の通りです。 これは、「with animation」を使用したときとまった く同じアニメーションです。

アニメーション修飾子は、 「with animation」を使用する 代わりに利用できるものです。 状態が変更される時点で、 「with animation」は、 状態変化の原因の一部 （すべてではない）に 対してのみアニメーションをトリガーしたい 場合に適しています。

一方、状態変化の原因にかかわらず、 常にビューをアニメーションさせたい場合は、 アニメーションモディファイアを使用します。 「with animation」 とアニメーションモディファイアの両方では、 アニメーションのタイミング、速度、 加速度、バウンスを変更できます。 これを利用することで、アニメーションの 「感じ」をより細かく制御できます。

例えば、バーが増加した際に少しバウンドさせると、 お祝いの雰囲気が加わります。 これは、バウンス機能をアニメーション修飾子に 組み込むことで実現できます。 その様子はこちらです。 緑色のバーは、新しい値に落ち 着く前にほんの少し揺れ動きます。

さらにバウンスを強めることも可能です。

さて、今度はどうなるでしょうか。 バーが楽しげにバウンドしていますね。

ただ、テキストに 少しおかしな動きが見られるため、 もう一度実行して、アニメーション中に 画面を静止させてみます。

このバウンドを強調したアニメーションでは、 バーが目標値を超えて飛び出し、 その後元の値に向かって引き戻され、 最終的に落ち着きます。 数字についても同様です。 この引き戻しの幅が 大きすぎるため、数字が元の値に 戻り始めてしまいます。 この問題は、2つ目のアニメーションモディファイアを 追加することで解決できます。

テキストビューだけに「スムーズ」 アニメーションを追加します。

これで、バウンスアニメーションは VSTack全体に適用されますが、 テキストのサブビューに 対してのみそのアニメーションを上書きします。

これで、数字に関する不具合は解消されました。 バーはバウンスしますが、 数字はスムーズにクロスフェードします。

これで問題が解決したので、 バーを調整し、少しバウンスさせ、 テキストにもう1つ モーションエフェクトを追加します。

数値テキスト引数を持つ「コンテンツ遷移モディファイア」 は、数値が変化した際に 特別なカウンターアニメーションを使用するよう SwiftUIに指示します。 これで、数字が順番にロールアップし、 変化に注目を集めるようになりました。

この演出が気に入っています。 まとめると、SwiftUIのビューは データからピクセルへとマッピングされます。 状態駆動型アニメーションを使用すると、 データや状態の変化によって ピクセルが更新される際の挙動を制御できます。

これらのアニメーションの挙動を指定するには、 実際の状態変化を ` width` アニメーション関数で ラップするか、ビューに アニメーション修飾子を追加します。

さて、次の話題に 進む前に、バーのアニメーションの 弾むような動きを制御するために 使用しているオプションパラメータについて、 少しお話しします。 このオプションパラメータは、 アニメーションのタイミングを制御します。 具体的には、次のような感じです。 バーには弾むようなアニメーションを 使用しています。 このアニメーションでは、 目標値を超えた後に、 イージング効果で元の位置に戻ります。 値対時間のプロットにおいて、 組み込みアニメーションの中で

最も遊び心のあるもので、 値が最終レベルに落ち着く前に 一時的に目標値を超えます。

一方、「スナッピー」アニメーションは、 最終値まで素早く移動し、 正確さとプロフェッショナルな印象を与えます。

プロットでは、値が最終レベルに 達する際に明確な「ニー」が見られます。

「スムーズ」アニメーションは、 「バウンシー」と「スナッピー」の中間的な バランスが取れたアニメーションです。 素早く落ち着きますが、 「スナッピー」アニメーションよりも カジュアルな印象を与えます。

曲線がより緩やかで、 最終値へと徐々に近づいていきます。 「スムーズ」は汎用性の高い 優れたアニメーションです。 実際、Appleのすべてのプラットフォームで デフォルト設定となっています。

最後に、「スプリング」 アニメーションを使用すると、 バネのすべての特性をカスタマイズできます。 これにより、きめ細かな制御が可能になります。 バウンスを調整して、アニメーションの遊び 心をコントロールしましょう。 バウンスを 0.6 に設定すると、 値は最終的に安定するまでに 数回振動します。 また、スプリングの持続時間や、 他のスプリング駆動型アニメーションとの 相互作用も調整できます。

通常は、「bouncy」「snappy」「smooth」 といった既定のスプリング設定のいずれかが 適していますが、必要に 応じて細かく調整できることを 知っておくと便利です。

アニメーションやSwiftUIの内部動作に 関する詳細については、 「SwiftUIアニメーションの詳細」 をご覧ください。 さらに、アニメーションのタイミングに 関する技術的・デザイン的な ガイダンスについては、 「スプリングを使ったアニメーション」 もぜひご参照ください。 どちらの動画もUB 23からのものです。 ウィッシュリストアプリがSwiftUIの 組み込み ビューを活用して美しいモーション効果を 自動的に実現する方法や、 状態駆動型アニメーションを使ってさらに 洗練された仕上がりにする方法を共有しました。

最後に、SwiftUIで作成したカスタムエフェクトの 例をいくつかご紹介します。

これらの例は、現在の ウィッシュリストアプリには 含まれていませんが、 それらを追加する方法について説明します。 このように試行錯誤することは、 SwiftUIで何が 可能かを体感する上で非常に有効な方法です。

最初の例は、跳ねるボールです。 これはローディングインジケーターとしても 機能するかもしれません。 これをフェーズアニメーターを 使用して実装します。

このアニメーションには 4つのフェーズがあります。 まず、ボールが落下します。

次に、ボールが「つぶれます」。 これは専門用語です。

ボールは再び膨らみ、その後上昇します。

このサイクルが繰り返されます。フェーズアニメーターの フェーズを定義するには、 列挙型（enum）が最適です。 したがって、この例では「落下」 「圧縮」「膨張」「上昇」を定義します。 次に、アニメーションさせたい 各属性のプロパティを追加します。 この例では、まず y オフセットのプロパティを追加します。 各フェーズの終了時点での値を返します。 「上昇」フェーズの終了時、 ボールは元の位置より 40 ポイント高くなります。 「squish」フェーズの終了時には、 ボールは元の位置より5ポイント低くなります。

他の2つのフェーズの終了時には、 ボールは元の位置に戻ります。 次に、ボールのスケールに 関するプロパティを追加します。

「squish」フェーズ中は、 ボールは通常の形状よりも少し幅広で、 少し高さが低くなります。

それ以外の時は丸い形状です。

フェーズを定義したら、 ビューにフェーズアニメーターを追加します。

列挙型を ` case iterable` に準拠させ、 すべての ` case` をフェーズ・ アニメーターに渡すことで、 アニメーターがすべてのフェーズを 順に処理するようにします。

SwiftUI は、各フェーズを 順番に渡しながら、 アニメーターの最初のクロージャを 呼び出します。 つまり、「ドロップ」、 「縮小」、「拡大」、「上昇」です。 次に、ここにアニメーション化された ビューを描画します。 これが円です。次に、フェーズから 引数を読み取るモディファイアを適用します。

ここでは、フェーズの Y オフセット値に基づいてオフセットを行い、

フェーズのスケール値に 基づいて拡大縮小を行っています。

最後に、2 番目のクロージャ内で、 各フェーズ中に使用する アニメーションを定義します。 ここでは、「drop」と「expand」に イーズインアニメーションを使用しています。 これらは、開始時はゆっくりで、 終了時は速くなります。 また、「squish」と「rise」 にはイーズアウトを使用しています。

以上が、SwiftUIでフェーズアニメーションを 作成するための4つの手順です。 アニメーション対象のプロパティごとに フェーズを定義します。 各フェーズの終了時の値を定義します。 アニメーション効果を適用してビューを描画し、 最後に各フェーズのアニメーションを 指定します。

フェーズアニメーターについてさらに詳しく 知りたい方は、こちらをご覧ください。 Dub Dub 23の「SwiftUIの 高度なアニメーション」 をぜひご覧ください。2つ目にご紹介する カスタムエフェクトは、ウィッシュリストで バッジを獲得したことを 祝うトランジションです。

このエフェクトはクールですが、 動きが速いため、もう一度再生してみます。

SwiftUIでは、 ビューを追加・削除したり、 あるビューを別のビューに置き換えたりする 際に、トランジションを 適用することができます。

このバッジのトランジションには、 主に2つのステップがあります。 まず、あるビューを別のビューに 置き換えるコードを記述します。 ここでは、まずグレースケールの バッジを表示し、その後、 カラー版のバッジに置き換えます。

グループを作成し、その中に 「変更前」と「変更後」の画像を配置します。 if文を使用して、 カラー画像を表示するようにします。 バッジが獲得済みの場合はカラー画像を、 そうでない場合はグレースケールの 画像を表示します。 そうでない場合は、別の処理を行います。 ここで、 ` earned` を ` true` に 設定すると、グレースケールのバッジが カラーのバッジに置き換えられます。 2つ目のステップは、この置き換えに アニメーションを適用することです。 これを行うには、グループに トランジション修飾子を追加します。 これにより、グループ内のビューが 入れ替わるときに、 SwiftUI がモーションエフェクトを 適用するよう指示します。 ここでは、不透明度やスケールなど、 組み込みのトランジションをいくつか 使用できます。 しかし、バッジを反転させるには、 カスタムトランジションを使用します。

トランジションプロトコルに準拠する 構造体（struct）を宣言することで、 カスタムトランジションを作成します。

トランジションプロトコルには、 先ほどご紹介したスクロールトランジション修飾子と 同様に、 bodyメソッドという1つの 要件のみがあります。 カスタムトランジションのbodyは、 contentパラメータを受け取ります。 これは、追加または 削除されるビューのプロキシです。 また、ボディには「フェーズ」も渡され、 ビューが表示されつつあるのか、 消えつつあるのかを示します。 ボディ内では、フェーズを条件として、 コンテンツプロキシにエフェクトを適用します。 フェーズには「isIdentity」 というプロパティがあります。 これは、ビューが表示されている ときにtrueになります。 したがって、バッジを反転させるには、 フェーズがisIdentityのときは 回転なしの3D回転エフェクトを適用します。

それ以外の場合は、ビューが表示されるか 非表示になるかによって、180度の正または 負の回転を適用します。

反転中にバッジを徐々に 非表示または表示するために、 不透明度モディファイアを適用します。

カスタムトランジションを定義したら、 そのインスタンスをトランジションモディファイアに 渡します。

これで、「A with animation」ブロック内で 「isEarned」を切り替えると、 グレーのバッジがアニメーションで 消え、色のついたバッジが アニメーションで表示されます。 カスタムフリップトランジションが 使用されています。

アプリ内でカスタムモーションエフェクトを 作成する方法について詳しく知りたい場合は、 こちらの動画をご覧になることをお勧めします。 「SwiftUI を使ったカスタムビジュアルエフェクトの 作成（W 24）」です。 また、デザインに関する ガイダンスについては、 developer. apple.com の 「ヒューマンインターフェイスガイドライン」 にある「モーション」 セクションをご確認ください。 アプリ内でモーションエフェクトをどこに 使用するかを検討する際は、 SwiftUI をご利用ください。 組み込みのビューやコントロールには、 さまざまなモーションエフェクトが 用意されています。 モディファイアを自動的に追加して、 それらの効果を微調整することもできます。 アプリでは、

イベントに反応し、ユーザーの注意を 重要なポイントへと誘導するために、 状態駆動型のアニメーションを 活用してください。 慎重に選んだカスタムアニメーションの セットで、 アプリを他とは一線を画すものにしましょう。

SwiftUIのモーションエフェクトに 関するこのツアーにご参加いただき、 ありがとうございました。 SwiftUIを使って何が可能か、 ご理解いただく一助となれば幸いです。