---
title: "画面遷移"
description: "ユーザーがフローを移動するときに、画面の表示・非表示をアニメーション化します。"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

画面間の遷移をアニメーション化できます。ある画面が消え、新しい画面が表示される際のアニメーションです。利用できるアニメーションは、特定のナビゲーションアクションによって異なります。

- [**Navigate to Screen**](onboarding-actions#navigate-to-screen): [アクション設定](#customize-a-transition)を開き、[アニメーションタイプの一覧](#animation-types)から選択します。ステップごとに異なるトランジションを使用できます。
- **Navigate Next**: デフォルトのプッシュアニメーションのみ使用できます。
- **Navigate back**: 現在の画面に遷移した際に使用したトランジションを逆再生し、遅延なしで実行します。到着時にアニメーションがなかった場合、戻る際もアニメーションはありません。
- **Close Flow**: 固有のアニメーションはありません。フローとネイティブ UI 間のトランジションはアプリ側で処理してください。

## アニメーションの種類 \{#animation-types\}

**Navigate to Screen** アクションの **Animation** ドロップダウンには、5つのオプションがあります。

- **Push**: 新しい画面が端からスライドインし、現在の画面を反対側へ押し出します。
- **Slide in**: 新しい画面が現在の画面の上にスライドしながらフェードインし、現在の画面は同じ方向へ少し移動します。
- **Slide out**: 現在の画面がスライドしながらフェードアウトし、下にある新しい画面が現れます。
- **Fade through**: 新しい画面が現在の画面の上にフェードインします。
- **None**: 現在の画面が即座に新しい画面に切り替わります。

## 画面遷移をカスタマイズする \{#customize-a-transition\}

画面遷移のアニメーションを変更できるのは、**Navigate to Screen** アクションのみです。

1. ナビゲーションアクションを起動する要素を選択します。
2. **Interactions** パネルで、ナビゲーションアクションをクリックします。
3. アクションが **Navigate Next** の場合は、**Action** ドロップダウンから **Navigate to Screen** を選択します。次に、**Destination** として次の画面を選択します。
4. **Animation** ドロップダウンからアニメーションを選択します。
5. アニメーションに **Direction**、**Easing**、**Duration** の設定がある場合は、それらを調整します。
6. アニメーション開始前に現在の画面を表示したままにするには、**Delay** フィールドに値を設定します。たとえば、ディレイを使って[ローディング画面](builder-loaders-and-progress-bars#loaders)を数秒間表示し続けることができます。[ナビゲーションの後に記載されているアクション](onboarding-actions#action-order)は、ディレイを待ちません。
7. 自分の画面でトランジションを確認するには、[デバイスでフローをテスト](paywall-device-compatibility-preview#preview-on-devices)してください。