画面遷移
画面間の遷移をアニメーション化できます。ある画面が消え、新しい画面が表示される際のアニメーションです。利用できるアニメーションは、特定のナビゲーションアクションによって異なります。
- Navigate to Screen: アクション設定を開き、アニメーションタイプの一覧から選択します。ステップごとに異なるトランジションを使用できます。
- Navigate Next: デフォルトのプッシュアニメーションのみ使用できます。
- Navigate back: 現在の画面に遷移した際に使用したトランジションを逆再生し、遅延なしで実行します。到着時にアニメーションがなかった場合、戻る際もアニメーションはありません。
- Close Flow: 固有のアニメーションはありません。フローとネイティブ UI 間のトランジションはアプリ側で処理してください。
アニメーションの種類
Navigate to Screen アクションの Animation ドロップダウンには、5つのオプションがあります。
- Push: 新しい画面が端からスライドインし、現在の画面を反対側へ押し出します。
- Slide in: 新しい画面が現在の画面の上にスライドしながらフェードインし、現在の画面は同じ方向へ少し移動します。
- Slide out: 現在の画面がスライドしながらフェードアウトし、下にある新しい画面が現れます。
- Fade through: 新しい画面が現在の画面の上にフェードインします。
- None: 現在の画面が即座に新しい画面に切り替わります。
画面遷移をカスタマイズする
画面遷移のアニメーションを変更できるのは、Navigate to Screen アクションのみです。
- ナビゲーションアクションを起動する要素を選択します。
- Interactions パネルで、ナビゲーションアクションをクリックします。
- アクションが Navigate Next の場合は、Action ドロップダウンから Navigate to Screen を選択します。次に、Destination として次の画面を選択します。
- Animation ドロップダウンからアニメーションを選択します。
- アニメーションに Direction、Easing、Duration の設定がある場合は、それらを調整します。
- アニメーション開始前に現在の画面を表示したままにするには、Delay フィールドに値を設定します。たとえば、ディレイを使ってローディング画面を数秒間表示し続けることができます。ナビゲーションの後に記載されているアクションは、ディレイを待ちません。
- 自分の画面でトランジションを確認するには、デバイスでフローをテストしてください。