ポップアップ UI のアニメーション化 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ポップアップ アニメーションを使って、コンテキスト メニューやポップアップなど、ポップアップ UI を表示したり非表示にしたりします。ポップアップ要素とは、アプリのコンテンツの上に表示されるコンテナーのことで、ユーザーがポップアップ要素の外部をタップまたはクリックすると消えます。これらのアニメーションは、主にカスタム コントロールで使います。Flyout コントロールと Menu コントロールには、ポップアップ アニメーションが組み込まれています。これらのコントロールをアプリで使っている場合は、これらのアニメーションを自分で用意する必要はありません。
このアニメーションは、次の API で構成されます。
次のビデオは、ポップアップ UI の表示と非表示を行うアニメーションのデモです。
showPopup アニメーションでは、ポップアップ要素がフェード インするときに最初の位置から最後の位置まで垂直方向に移動します。移動する距離と方向は、アプリによって指定されます。ほとんどの場合、上方向に 50 ピクセル移動します。ただし、ポップアップ要素がポップアップをトリガーした UI 要素の下に表示される場合は、下方向に 50 ピクセル移動します。たとえば、このような下方向の移動は、ナビゲーション バーまたはアプリ ヘッダーからトリガーされたポップアップに適用されます。これは、ポップアップ要素とトリガーしている要素の関係性をユーザーが視覚的にわかるようにするためです。
ポップアップ アニメーションを使うには、表示と非表示の対象となるオブジェクトのほか、showPopup の場合には、オブジェクトが表示されるときに移動するオフセットを把握しておく必要があります。
その他のリソース
ポップアップ UI アニメーションの API の使い方を示すコード例については、HTML アニメーション ライブラリのサンプルに関するページをご覧ください。
ポップアップ UI アニメーションの使用時のデザインのベスト プラクティスについては、「ポップアップ UI アニメーションのガイドラインとチェック リスト」をご覧ください。