UI のアニメーション化 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
Windows に用意されている一連のアニメーションのアニメーション ライブラリを使って、Windows 8 の見た目や操作感を自分の Windows ストア アプリに取り入れることができます。ここでは、アニメーションの概要と、アニメーション ライブラリで対処できる通常のシナリオ例について説明します。
アニメーション ライブラリのアニメーションを使うと、次のような利点があります。
- Windows ストア アプリ アニメーションの原則に従った動き
- ユーザーの気をそらさずに必要な情報を伝える、UI 状態の高速で滑らかな切り替え
- わかりやすい画面遷移
たとえば、ユーザーがリストに項目を追加すると、新しい項目が即座に表示されてリストが瞬間的に更新されるのではなく、新しい項目が動きを伴ってリストの中に入り、他のリスト項目が移動されて、追加のためのスペースが確保されます。瞬間的な画面遷移とは異なり、ユーザーは操作についてはっきりと理解することができます。
ListView コントロール、FlipView コントロール、Flyout コントロール、AppBar コントロールなど、Windows 8 のコントロールにはすべて、アニメーション ライブラリのアニメーションが使われています。こうしたコントロールを利用することで、Windows ストア アプリ アニメーションの見た目や操作感を自分でプログラミングしなくてもアプリに取り入れることができます。
すべてのシナリオに対応するアニメーションがアニメーション ライブラリに用意されているわけではありません。独自のブランドを反映したカスタム アニメーションを自分で作ることが必要になる場合もあります。アニメーション ライブラリを逸脱したアニメーションを使う場合は、慎重に検討する必要があります。ブランドを印象付ける機会として必要であるときや、ニーズに合ったアニメーションがライブラリに存在しないなど、明確な理由がある場合以外は避けてください。
このトピックで説明した API を使ったコード例については、HTML アニメーション ライブラリのサンプルをご覧ください。
ライブラリに用意されているアニメーション
アニメーション ライブラリには、次のアニメーションが用意されています。アニメーションの名前をクリックすると、主な使用シナリオ、アニメーションを実行する機能、アニメーション例の詳しい情報が表示されます。
- ページ切り替え: ページの内容をアニメーション化して画面に表示したり、画面から消したりします。
- コンテンツ切り替え: コンテンツの断片やまとまりをアニメーション化して画面に表示したり、画面から消したりします。
- フェード イン/アウト: 一時的な要素またはコントロールを表示します。
- クロスフェード: コンテンツ領域を更新します。
- ポインター アップ/ダウン: タイルでのタップまたはクリックの視覚的なフィードバックを提供します。
- 展開/折りたたみ: 追加のインライン情報を表示します。
- 位置の変更: 要素を新しい位置に移動します。
- ポップアップの表示/非表示: コンテキストに沿った UI を画面上に表示します。
- エッジ (端) UI の表示/非表示: 端に基づく UI をスライドさせて画面に表示したり、画面から消したりします。
- パネルの表示/非表示: 端に基づく大きなパネルをスライドして画面に表示したり、画面から消したりします。
- リストへの追加/リストからの削除: リストに項目を追加したり、リストから項目を削除したりします。
- 検索リストへの追加/検索リストからの削除: 検索結果をフィルター処理するときに、項目をリストに追加またはリストから削除します。
- プレビュー: タイルのコンテンツを更新します。
- バッジの更新: 数字バッジを新しい値で更新します。
- ドラッグの開始/終了と項目間へのドラッグの開始/終了: ドラッグ アンド ドロップ操作中に視覚的なフィードバックを提供します。
- スワイプ ヒント: タイルがスワイプ操作をサポートしていることを示唆します。
- スワイプ選択/選択解除: タイルをスワイプで選択した状態に切り替えます。
ページ切り替え
ページ切り替えは、ページの内容をアニメーション化して画面に表示したり、画面から消したりします。これには、スプラッシュ画面後のアプリの最初のページの表示とアプリのページの切り替えの両方が含まれます。
次のビデオは、コンテンツのページを表示するアニメーションのデモです。
次のビデオは、コンテンツの 2 つのページを切り替えるアニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「ページ切り替えアニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
コンテンツ切り替え
コンテンツ切り替えアニメーションを使って、コンテンツの断片やまとまりを移動して現在の画面に表示したり、画面から消したりします。ページ上の要素に関連するコンテンツ切り替えと、ページ全体を切り替えるページ切り替えとを混同しないでください。たとえば、コンテンツ切り替えアニメーションは、ページが最初に読み込まれたとき、またはページの 1 セクションのコンテンツを変更したときに表示できなかったコンテンツを表示する場合に使われます。
次のビデオは、既にあるコンテンツを消した後、新しいコンテンツを表示するアニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「コンテンツ切り替えアニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
フェード イン/アウト
フェード イン/アウト アニメーションを使って、一時的な UI またはコントロールを表示したり、非表示にしたりします。たとえば、ユーザーの操作により新しいコントロールが表示されるアプリ バーでこのアニメーションを使います。また、一定期間ユーザーの入力が検出されないとフェード アウトする一時的なスクロール バーとパン インジケーターにもこのアニメーションが適用されます。アプリで、コンテンツが動的に読み込まれてプレースホルダー項目から最終項目に切り替わるときにもフェード イン アニメーションが使われます。
次のビデオは、コンテンツのフェード インとフェード アウトを行うアニメーションのデモです。画面の下部でフェード イン、フェード アウトするスクロール バーに注目してください。
UX と使い方のガイダンスについて詳しくは、「フェード アニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
クロスフェード
クロスフェード アニメーションを使って、画面の現在のコンテンツを更新している場合など項目の状態が変化しているときにスムーズに切り替えます。
クロスフェード アニメーションのデモは、次のビデオでご覧いただけます。
UX と使い方のガイダンスについて詳しくは、「フェード アニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript: このアニメーションを実行するには、次の API を使います。
ポインター アップ/ダウン
ポインター アップ アニメーションとポインター ダウン アニメーションを使って、タイルでのタップやクリックが正常に行われたことについてユーザーにフィードバックを提供します。たとえば、ユーザーがタイルを下にクリックまたはタップすると、ポインター ダウン アニメーションが再生されます。クリックまたはタップが解放されると、ポインター アップ アニメーションが再生されます。
次のビデオは、ポインター ダウン アニメーションとポインター アップ アニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「ポインター アニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
展開/折りたたみ
展開アニメーションを使って、画面のコンテンツにスペースを追加し、追加のインライン情報を表示します。たとえば、エラー メッセージが表示されると、画面上の他のコンテンツが移動し、スペースが確保されます。折りたたみアニメーションは、この追加されたコンテンツを非表示にして、特定の項目に関する詳しい情報を隠します。折りたたみアニメーションは通常ユーザーの操作でトリガーされます。
展開と折りたたみのアニメーションのデモは、次のビデオでご覧いただけます。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
位置の変更
位置の変更アニメーションを使って、要素を新しい位置に移動します。たとえば、パノラマ ビューでヘッダーを動かすと、位置の変更アニメーションが適用されます。
位置の変更アニメーションのデモは、次のビデオでご覧いただけます。
UX と使い方のガイダンスについて詳しくは、「位置の変更アニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript: このアニメーションを実行するには、次の API を使います。
ポップアップ UI の表示/非表示
ポップアップ UI の表示/非表示アニメーションを使って、コンテキストに沿った UI を現在の画面に表示したり、画面から消したりします。たとえば、特定の要素の項目について、ポップアップ UI で詳しい情報を表示できます。カスタムのコンテキスト メニューやポップアップを表示するときには、ポップアップ UI の表示/非表示アニメーションを使います。
次のビデオは、ポップアップ UI の表示と非表示を行うアニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「ポップアップ UI アニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
エッジ (端) UI の表示/非表示
エッジ (端) UI の表示/非表示アニメーションを使って、端に基づく小さい UI をスライドして画面に表示したり、画面から消したりします。たとえば、画面の下部にカスタムのアプリ バーを表示したり、画面の上部にエラーや警告の UI サーフェスを表示したりするときに、これらのアニメーションを使います。
次のビデオは、端に基づく UI の表示と非表示を行うアニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「端に基づくアニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
パネルの表示/非表示
パネルの表示/非表示アニメーションを使って、カスタムのキーボードや作業ウィンドウなど端に基づく大きな UI であるパネルを表示したり、非表示にしたりします。これらのアニメーションを、エントリ ポイントや終了ポイントとして端を利用する小さい UI 要素で使われるエッジ (端) UI の表示/非表示アニメーションと混同しないでください。
次のビデオは、パネルの表示と非表示を行うアニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「端に基づくアニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
リストへの追加/リストからの削除
リストへの追加アニメーションとリストからの削除アニメーションは、既にある 1 次元リストまたは 2 次元リスト内で項目を追加または削除するときに使います。リストへの追加アニメーションでは、最初にリスト内の既にある項目の位置が変更され、新しい項目用のスペースが確保されてから、新しい項目が追加されます。リストから削除アニメーションでは、リストから項目が削除され、必要に応じて、削除する項目が削除された後に他のリスト項目の位置が変更されます。
次のビデオは、リストに項目を追加したりリストから項目を削除したりするアニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「リスト アニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
検索リストへの追加/検索リストからの削除
検索リストへの追加アニメーションと検索リストからの削除アニメーションは、検索時にリスト内の項目をすばやく変更するときに使います。検索リスト アニメーションは、標準のリスト アニメーションよりも速くなります。たとえば、ユーザーが検索対象の単語を入力して、リストの結果をリアルタイムでフィルター処理している場合、フィルターで除外される項目には検索リストから削除アニメーションが使われます。反対に、ユーザーが文字列を検索した後に、バックスペースを使って 1 文字削除する可能性もあります。その結果、項目が検索結果のリストにもう一度追加されるため、検索リストへの追加アニメーションが使われます。
次のビデオは、検索リストに項目を追加したり検索リストから項目を削除したりするアニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「リスト アニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
プレビュー
プレビュー アニメーションを使って、タイルが画像とテキストの両方を同時に表示できる大きさではない場合にタイルで画像の表示とテキストの表示を切り替えるときにタイルを更新します。また、タイル上の画像のセットを順番に表示するときにもこのアニメーションを使います。
プレビュー アニメーションのデモは、次のビデオでご覧いただけます。
JavaScript: このアニメーションを実行するには、次の API を使います。
バッジの更新
バッジの更新を使って、数値を表示するバッチを更新します。たとえば、未読メールの件数を示すメール アプリでは、バッジの更新アニメーションを使ってこの値を更新します。
バッジの更新アニメーションのデモは、次のビデオでご覧いただけます。
JavaScript: このアニメーションを実行するには、次の API を使います。
ドラッグの開始/終了と項目間へのドラッグの開始/終了
ドラッグ アニメーションを使って、ユーザーが項目をドラッグ アンド ドロップするときに視覚的なフィードバックを提供します。ユーザーが項目のドラッグを開始するときに、ドラッグの開始アニメーションを使います。ユーザー項目をドロップするときに、ドラッグの終了アニメーションを使います。
オプションで、項目間へのドラッグの開始/終了アニメーションを使って、リストでドロップした項目の前後の項目の位置が変更されることをユーザーに示すことができます。このアニメーションを使うと、ユーザーは項目を現在の位置にドロップしたときに、項目がリスト内のどの位置に配置されるかを把握できるため便利です。項目間へのドラッグの開始/終了アニメーションでは、ドラッグしている項目を、リストの他の 2 つの項目間にドロップできること、およびそれらの項目は移動することを視覚的なフィードバックで示します。
次のビデオは、ドラッグ アンド ドロップ操作に関連したアニメーションのデモです。
UX と使い方のガイダンスについて詳しくは、「ドラッグ アンド ドロップ アニメーションのガイドラインとチェック リスト」をご覧ください。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
スワイプ ヒント
スワイプ ヒント アニメーションを使って、タイルがスワイプ操作をサポートしていることを示唆します。ユーザーは下にスワイプしてタイルを選ぶことができます。ユーザーは、タイルでスワイプできるかどうかわからない場合、タイルで長押しジェスチャを行うと、スワイプ ヒント アニメーションが再生されて、スワイプでタイルを操作する必要があることが示唆されます。
スワイプ アニメーションのデモは、次のビデオでご覧いただけます。
JavaScript: このアニメーションを実行するには、次の API を使います。
スワイプ選択/選択解除
スワイプ選択アニメーションは、スワイプ操作を使って項目が選択されたときに、タイルが選択状態に移行したことを示したり、タイルをその定位置に戻したりする際に使います。スワイプ選択解除アニメーションは、選択されているタイルがスワイプ ジェスチャで選択解除されるときに使います。
次のビデオは、スワイプ選択アニメーションとスワイプ選択解除アニメーションのデモです。
JavaScript コードでこのアニメーションを実行するには、次の API を使います。
アニメーションとカスタム コントロールの使用
カスタマイズしたシステム制御を作るときに、どのアニメーションを使う必要があるかについての推奨事項を次に表にまとめます。
| UI の種類 | 推奨されるアニメーション |
|---|---|
| ダイアログ ボックス | fadeIn および fadeOut |
| ポップアップ | showPopup および hidePopup |
| ヒント | fadeIn および fadeOut |
| コンテキスト メニュー | showPopup および hidePopup |
| コマンド バー | showEdgeUI および hideEdgeUI |
| 作業ウィンドウまたは端に基づくパネル | showPanel および hidePanel |
| 各種 UI コンテナーのコンテンツ | enterContent および exitContent |
| コントロールに対して (または他に該当するアニメーションがない場合に) 適用する | fadeIn および fadeOut |