Windows ストア アプリのアニメーション パターン

ページ間の移動を示す Windows ストア アプリ UI

目的性のあるアニメーションを使って、ユーザー エクスペリエンスに視覚的連続性とストーリー性を持たせる方法を説明します。 情報を伝えるために作られた、Windows 8 のシナリオ固有のアニメーションは、何が起こるのかわかるようにしたり、安心感を与えたりすることができます。「UI のアニメーション化」セクションの詳しいガイドラインと方法のトピックをご覧ください。

アプリの起動

アプリの最初のページを表示します。

|

JavaScript: 使うもの: enterPage

XAML: 使うもの: EntranceThemeTransition

アニメーション ライブラリによる切り替え効果のアニメーション化」もご覧ください。

ページの切り替え

アプリのページ間を移動します。

|

JavaScript: 使うもの: exitPage の後に enterPage

XAML: 使うもの: EntranceThemeTransition

アニメーション ライブラリによる切り替え効果のアニメーション化」もご覧ください。

コンテンツの切り替え

ページ内の領域のコンテンツを切り替えます。

|

JavaScript: 使うもの: exitContent の後に enterContent

XAML: 使うもの: ContentThemeTransition

アニメーション ライブラリによる切り替え効果のアニメーション化」もご覧ください。

タッチとクリックのフィードバック

ユーザーがタイルをタッチまたはクリックしたときにその視覚的なフィードバックを表示します。

|

JavaScript: 使うもの: pointerDownpointerUp

XAML: 使うもの: PointerDownThemeAnimationPointerUpThemeAnimation

アニメーション ライブラリによるポインターのアニメーション化」もご覧ください。

一時的な UI またはコントロールの表示

一時的な UI またはコントロールを表示または非表示にします。

|

JavaScript: 使うもの: fadeInfadeOut

XAML: 使うもの: FadeInThemeAnimationFadeOutThemeAnimation

アニメーション ライブラリによる UI 要素のアニメーション化」もご覧ください。

更新

コンテンツを更新するか、既にあるページのレイアウトの変更をアニメーションで表示します。

|

JavaScript: 使うもの: crossFade

XAML: 使うもの: FadeOutThemeAnimationFadeInThemeAnimation

アニメーション ライブラリによる UI 要素のアニメーション化」もご覧ください。

追加のコントロールまたはコンテンツのインライン表示

スペースを確保して、追加のコントロールまたはコンテンツを既にある UI 内に表示します。

|

JavaScript: 使うもの: createExpandAnimationcreateCollapseAnimation

XAML: なし

リスト項目の追加または削除

既にあるリストに 1 つまたは複数の項目を追加します。または、これらを削除します。

|

JavaScript: 使うもの: createAddToListAnimationcreateDeleteFromListAnimation

XAML: 使うもの: AddDeleteThemeTransition

アニメーション ライブラリによるリストとリスト項目のアニメーション化」もご覧ください。

検索時のリストのフィルター処理

検索時にリストに複数の項目をすばやく追加します。または、これらを削除します。

|

JavaScript: 使うもの: createAddToSearchListAnimationcreateDeleteFromSearchListAnimation

XAML: なし

アニメーション ライブラリによるリストとリスト項目のアニメーション化」もご覧ください。

コマンドまたはメッセージ バーの表示

画面の端にコマンドまたはメッセージ バーを表示します。または、これらを非表示にします。

|

JavaScript: 使うもの: showEdgeUIhideEdgeUI

XAML: 使うもの: EdgeUIThemeTransition

アニメーション ライブラリによる UI サーフェスのアニメーション化」もご覧ください。

作業ウィンドウの表示

画面の端にタスク ウィンドウまたはその他の大きな UI コンテナーを表示します。または、これらを非表示にします。

|

JavaScript: 使うもの: showPanelhidePanel

XAML: 使うもの: PaneThemeTransition

アニメーション ライブラリによる UI サーフェスのアニメーション化」もご覧ください。

ポップアップ UI の表示

ポップアップ、コンテキスト メニューなどのポップアップ UI を表示します。または、これらを非表示にします。

|

JavaScript: 使うもの: showPopuphidePopup

XAML: 使うもの: PopInThemeAnimationPopOutThemeAnimation

アニメーション ライブラリによる UI サーフェスのアニメーション化」もご覧ください。

ドラッグ

項目をドラッグして、リストの並びを変更します。

|

JavaScript: 使うもの: dragSourceStartdragSourceEnd, dragBetweenEnterdragBetweenLeave

XAML: 使うもの: DragItemThemeAnimationDropTargetItemThemeAnimation、および DragOverThemeAnimation

アニメーション ライブラリによるリストとリスト項目のアニメーション化」もご覧ください。

スワイプによるタイルの選択

ユーザーがスワイプ ジェスチャを行った後にタイルが元の位置に戻る動作をアニメーションで表示します。

|

JavaScript: 使うもの: swipeSelectswipeDeselect

XAML: 使うもの: SwipeBackThemeAnimation

スワイプのサポートの表示

タイルがスワイプ ジェスチャをサポートしていることをアニメーションで表示します。

|

JavaScript: 使うもの: swipeReveal

XAML: 使うもの: SwipeHintThemeAnimation

タイルの更新

タイル上のすべてのコンテンツを更新します。または、タイルに追加の情報を一時的にプレビュー表示します。

|

JavaScript: 使うもの: createPeekAnimation

XAML: なし

バッジの更新

数字バッジを新しい値で更新します。

|

JavaScript: 使うもの: updateBadge

XAML: なし

位置の変更

UI またはコンテンツの位置を変更します。

|

JavaScript: 使うもの: createRepositionAnimation

XAML: 使うもの: RepositionThemeTransition

アニメーション ライブラリによる UI 要素のアニメーション化」もご覧ください。

関連トピック

Windows ストア アプリの UX ガイドライン
UI のアニメーション化

 

 

表示:
© 2014 Microsoft