---
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** 下拉菜单提供五个选项：

- **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)。