ページ切り替え効果

  • [アーティクル]

ページ切り替え効果により、ユーザーがアプリ内のページ間を移動するため、ページ間の関係がフィードバックされます。 ページ切り替え効果により、ナビゲーション階層の最上位にいるのか、兄弟ページ間を移動しているのか、またはページ階層をより深く移動しているのかを、ユーザーが理解しやすくなります。

アプリ内のページ間のナビゲーションについて 2 つの異なるアニメーション (ページの更新およびドリル) が提供されており、NavigationTransitionInfo のサブクラスとして表されています。

例

WinUI 2 ギャラリー
WinUI Gallery

WinUI 2 ギャラリー アプリがインストールされている場合は、ここをクリックしてアプリを開き、ページ切り替えの動作を確認してください。

ページの更新

ページの更新は、受信したコンテンツのスライド アップ アニメーションとフェード イン アニメーションの組み合わせです。 ページの更新は、ユーザーがナビゲーション スタックの最上位に移動したときに使用します (タブ間や左側のナビゲーションの項目間の移動など)。

ユーザーが処理を開始したという意識を持てるようにします。

page refresh animation

ページの更新のアニメーションは、EntranceNavigationTransitionInfoClass で表されます。

// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());

注: フレームは自動的に NavigationThemeTransition を使用して 2 つのページ間のナビゲーションをアニメーション化します。 既定では、アニメーションはページの更新です。

Drill

ドリルは、項目を選択した後で詳細情報を表示するなど、ユーザーがアプリ内でより深く移動するときに使用します。

ユーザーがアプリ内をより深く移動したという意識を持てるようにします。

drill animation

ドリルのアニメーションは、DrillInNavigationTransitionInfo クラスで表されます。

// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());

横方向のスライド

横方向のスライドを使用して、兄弟ページが隣り合って表示されるようにします。 NavigationView コントロールは、このアニメーションをトップ ナビゲーションに自動的に使用しますが、独自の横方向のナビゲーションエクスペリエンスを構築している場合は、SlideNavigationTransitionInfo を使用して横方向のスライドを実装できます。

ユーザーが互いに隣り合っているページ間を移動しているという意識を持てるようにします。

// Navigate to the right, ie. from LeftPage to RightPage
myFrame.Navigate(typeof(RightPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight } );

// Navigate to the left, ie. from RightPage to LeftPage
myFrame.Navigate(typeof(LeftPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft } );

Suppress

ナビゲーション中にアニメーションの再生を回避するには、SuppressNavigationTransitionInfo を他の NavigationTransitionInfo サブタイプの代わりに使用します。

// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());

アニメーションの抑制は、接続型アニメーションまたは暗黙的な表示/非表示アニメーションを使用して独自の切り替え効果を作成している場合に役立ちます。

後方ナビゲーション

Frame.GoBack(NavigationTransitionInfo) を使用して逆方向に移動するときに特定の切り替え効果を再生することができます。

これは、たとえば応答性の高いリスト/詳細シナリオなど、画面サイズに基づいて移動動作を動的に変更する場合に役立ちます。