Windows ストア アプリのアニメーション パターン
.png "ページ間の移動を示す Windows ストア アプリ UI")
目的性のあるアニメーションを使って、ユーザー エクスペリエンスに視覚的連続性とストーリー性を持たせる方法を説明します。 情報を伝えるために作られた、Windows 8 のシナリオ固有のアニメーションは、何が起こるのかわかるようにしたり、安心感を与えたりすることができます。「UI のアニメーション化」セクションの詳しいガイドラインと方法のトピックをご覧ください。
アプリの起動
アプリの最初のページを表示します。
JavaScript: 使うもの: enterPage
XAML: 使うもの: EntranceThemeTransition
「アニメーション ライブラリによる切り替え効果のアニメーション化」もご覧ください。
ページの切り替え
アプリのページ間を移動します。
JavaScript: 使うもの: exitPage の後に enterPage
XAML: 使うもの: EntranceThemeTransition
「アニメーション ライブラリによる切り替え効果のアニメーション化」もご覧ください。
コンテンツの切り替え
ページ内の領域のコンテンツを切り替えます。
JavaScript: 使うもの: exitContent の後に enterContent
XAML: 使うもの: ContentThemeTransition
「アニメーション ライブラリによる切り替え効果のアニメーション化」もご覧ください。
タッチとクリックのフィードバック
ユーザーがタイルをタッチまたはクリックしたときにその視覚的なフィードバックを表示します。
JavaScript: 使うもの: pointerDown、pointerUp
XAML: 使うもの: PointerDownThemeAnimation と PointerUpThemeAnimation
「アニメーション ライブラリによるポインターのアニメーション化」もご覧ください。
一時的な UI またはコントロールの表示
一時的な UI またはコントロールを表示または非表示にします。
JavaScript: 使うもの: fadeIn、fadeOut
XAML: 使うもの: FadeInThemeAnimation と FadeOutThemeAnimation
「アニメーション ライブラリによる UI 要素のアニメーション化」もご覧ください。
更新
コンテンツを更新するか、既にあるページのレイアウトの変更をアニメーションで表示します。
JavaScript: 使うもの: crossFade
XAML: 使うもの: FadeOutThemeAnimation と FadeInThemeAnimation
「アニメーション ライブラリによる UI 要素のアニメーション化」もご覧ください。
追加のコントロールまたはコンテンツのインライン表示
スペースを確保して、追加のコントロールまたはコンテンツを既にある UI 内に表示します。
JavaScript: 使うもの: createExpandAnimation、createCollapseAnimation
XAML: なし
リスト項目の追加または削除
既にあるリストに 1 つまたは複数の項目を追加します。または、これらを削除します。
JavaScript: 使うもの: createAddToListAnimation、createDeleteFromListAnimation
XAML: 使うもの: AddDeleteThemeTransition
「アニメーション ライブラリによるリストとリスト項目のアニメーション化」もご覧ください。
検索時のリストのフィルター処理
検索時にリストに複数の項目をすばやく追加します。または、これらを削除します。
JavaScript: 使うもの: createAddToSearchListAnimation、createDeleteFromSearchListAnimation
XAML: なし
「アニメーション ライブラリによるリストとリスト項目のアニメーション化」もご覧ください。
コマンドまたはメッセージ バーの表示
画面の端にコマンドまたはメッセージ バーを表示します。または、これらを非表示にします。
JavaScript: 使うもの: showEdgeUI、hideEdgeUI
XAML: 使うもの: EdgeUIThemeTransition
「アニメーション ライブラリによる UI サーフェスのアニメーション化」もご覧ください。
作業ウィンドウの表示
画面の端にタスク ウィンドウまたはその他の大きな UI コンテナーを表示します。または、これらを非表示にします。
JavaScript: 使うもの: showPanel、hidePanel
XAML: 使うもの: PaneThemeTransition
「アニメーション ライブラリによる UI サーフェスのアニメーション化」もご覧ください。
ポップアップ UI の表示
ポップアップ、コンテキスト メニューなどのポップアップ UI を表示します。または、これらを非表示にします。
JavaScript: 使うもの: showPopup、hidePopup
XAML: 使うもの: PopInThemeAnimation と PopOutThemeAnimation
「アニメーション ライブラリによる UI サーフェスのアニメーション化」もご覧ください。
ドラッグ
項目をドラッグして、リストの並びを変更します。
JavaScript: 使うもの: dragSourceStart、dragSourceEnd, dragBetweenEnter、dragBetweenLeave
XAML: 使うもの: DragItemThemeAnimation、DropTargetItemThemeAnimation、および DragOverThemeAnimation
「アニメーション ライブラリによるリストとリスト項目のアニメーション化」もご覧ください。
スワイプによるタイルの選択
ユーザーがスワイプ ジェスチャを行った後にタイルが元の位置に戻る動作をアニメーションで表示します。
JavaScript: 使うもの: swipeSelect、swipeDeselect
XAML: 使うもの: SwipeBackThemeAnimation
スワイプのサポートの表示
タイルがスワイプ ジェスチャをサポートしていることをアニメーションで表示します。
JavaScript: 使うもの: swipeReveal
XAML: 使うもの: SwipeHintThemeAnimation
タイルの更新
タイル上のすべてのコンテンツを更新します。または、タイルに追加の情報を一時的にプレビュー表示します。
JavaScript: 使うもの: createPeekAnimation
XAML: なし
バッジの更新
数字バッジを新しい値で更新します。
JavaScript: 使うもの: updateBadge
XAML: なし
位置の変更
UI またはコンテンツの位置を変更します。
JavaScript: 使うもの: createRepositionAnimation
XAML: 使うもの: RepositionThemeTransition
「アニメーション ライブラリによる UI 要素のアニメーション化」もご覧ください。