---
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**: Только стандартная анимация push.
- **Navigate back**: Воспроизводит переход, который использовался при переходе на текущий экран, но в обратном порядке и без задержки. Если при переходе анимации не было, то и при возврате её не будет.
- **Close Flow**: Собственной анимации нет. Ваше приложение отвечает за переход между флоу и нативным интерфейсом.

## Типы анимации \{#animation-types\}

Выпадающий список **Animation** в действии **Navigate to Screen** содержит пять вариантов:

- **Push**: Новый экран въезжает с одного края и вытесняет текущий экран в противоположную сторону.
- **Slide in**: Новый экран появляется поверх текущего, скользя и постепенно проявляясь, тогда как текущий экран немного смещается в том же направлении.
- **Slide out**: Текущий экран скользит в сторону и исчезает, открывая новый экран, который находился под ним.
- **Fade through**: Новый экран плавно проявляется поверх текущего.
- **None**: Новый экран мгновенно заменяет текущий.

## Настройка перехода \{#customize-a-transition\}

Изменить анимацию можно только в действии **Navigate to Screen**.

1. Выберите элемент, который запускает навигационное действие.
2. На панели **Interactions** нажмите на навигационное действие.
3. Если действие — **Navigate Next**, выберите **Navigate to Screen** из выпадающего списка **Action**. Затем укажите следующий экран в поле **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).