エッジに基づく UI のアニメーション化 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
エッジに基づく UI のアニメーションは、画面のエッジ (端) を起点とする UI の表示と非表示を切り替えるときに使います。この UI は、ユーザーが表示することも、アプリで表示することもできます。これらのアニメーションは、主にカスタム コントロールで使います。AppBar などの既にあるコントロールは、エッジ UI 用のライブラリ アニメーションが組み込まれているため、UI にコントロールを含めるだけでアニメーション動作が実行されます。
UI は、アプリの手前に表示するか、メイン アプリ サーフェスの一部として表示することができます。メイン アプリ サーフェスの一部として表示する場合は、そのアプリの残りの部分のサイズを調整し、新しい UI を表示したときのためにスペースを確保する必要があります。
.png "端に基づく要素の基本的な図")
このアニメーションは、次の API で構成されます。
エッジに基づく要素にはエッジ (端) UI とパネル UI の 2 種類があり、それぞれにアニメーション API のセットがあります。
次のビデオは、エッジに基づく UI の表示と非表示を行うアニメーションのデモです。
次のビデオは、パネルの表示と非表示を行うアニメーションのデモです。
- 動作が AppBar などに似ているカスタム コントロールをアニメーション化することが目的の場合は、小さめの端に基づく UI でエッジ UI アニメーションを使います。また、アプリ内の操作が原因となったエラーと警告を表示する UI サーフェスまたは領域を定義することもできます。このシナリオに対処している場合は、「ポップアップのガイドライン」を読んでください。自分のシナリオでは端に基づく UI が適切でない可能性があります。
- ソフト キーボードなど、エッジに基づく UI の中でも比較的大きく、アプリ ウィンドウ領域を広く占有するものには、パネル UI を使います。
.png "エッジ UI とウィンドウ UI の大きさの違いを示す図")
重要 Windows に備わっているアプリ バー コントロールには、エッジ (端) UI のアニメーションが組み込まれています。このコントロールを使っている場合、これらのアニメーションを自分で組み込む必要はありません。
これらのアニメーションを使うには、次の点を把握しておく必要があります。
スライドさせるオブジェクト。
オブジェクトがスライド移動する距離 (オフセット)。これが、UI のエッジ (内端) から画面のエッジ (端) までの最終的な距離になります。
.png "オフセットとして表される距離の図")
既定の Windows ランタイム コントロール動作における端に基づくアニメーション
エッジ UI を含めるお勧めの方法は、AppBar を追加する方法です。こうすると、すべての適切な切り替えと相互作用の動作にアニメーションが自動的に適用されます。詳しくは、「アプリ パーの追加」をご覧ください。
ポップアップ オブジェクト (Flyout、Menu、または SettingsFlyout) にも組み込みのアニメーションがありますが、実際にはエッジに基づく UI ではありません。ポップアップは、アプリ ウィンドウの端ではなく、ポップアップを表示するコンテキストに関連付けられます。AppBar から呼び出す UI でポップアップを使うこともできますが、これも純粋なエッジ UI ではありません。詳しくは、「ポップアップの追加」と「ポップアップ UI のアニメーション化」をご覧ください。
その他のリソース
エッジに基づく UI アニメーションの API の使い方を示すコード例については、HTML アニメーション ライブラリのサンプルに関するページをご覧ください。
エッジに基づく UI アニメーションの使用時のデザインのベスト プラクティスについては、「エッジに基づく UI アニメーションのガイドラインとチェック リスト」をご覧ください。