转场动画模式

转场动画是连接应用程序各个元素或全屏视图的简短动画。它们是优秀用户体验的基础，因为它们可以帮助用户了解应用程序的工作原理。设计精良的转场动画能让用户感受到高品质的体验和丰富的表现力。对于一个强大的动作执行来说，它们应该是重中之重。

以下是六种常见的转换模式：

1. 容器转换
2. 向前和向后
3. 横向切换
4. 顶层过渡
5. 进入和退出
6. 框架加载

容器切换

此模式用于无缝转换元素以显示更多细节，如卡片扩展到详细信息页面。

• 常用于：卡片、列表、图库、搜索框、表单、FAB 和芯片
• 阅读更多： 用户体验研究、指南、Android 实施

持久元素用于无缝连接过渡的开始和结束状态。最常见的持久元素是容器，即用于表示封闭区域的形状。它也可以是一个重要元素，例如图像。在所有过渡模式中，这种模式在元素之间建立了最强的关系。它也被认为是最具表现力的。

全屏视图

在同一屏幕内

向前和向后

此模式用于在连续的层次结构的屏幕之间导航，例如从收件箱导航到消息线程。

• 常用：列表、卡片、按钮、链接
• 阅读更多：指南、Android 实施

水平滑动表示在屏幕之间向前或向后移动。Android 和 iOS 具有不同的默认样式：

1. Android在屏幕滑动时使用淡入淡出效果。这样可以减少动作量，因为屏幕不必滑动到设备的整个宽度。
2. iOS使用视差效果，这意味着背景滑动的速度比前景慢。这也会减少运动量。

横向切换

此模式用于在同一层次结构的对等内容之间导航，例如在内容库的选项卡之间滑动。

• 常用于： 标签、轮播和图片库
• 阅读更多： 指南

横向切换使用类似于前后模式的滑动动作，但不使用淡入淡出或视差效果。相反，元素被分组并一起滑动，从而形成强大的同级关系。这也暗示能够通过手势滑动元素进行导航。

顶层过渡

此模式用于在应用程序的一级导航栏之间进行顶层过渡，例如点击导航栏中的目的地。

• 常用于：导航栏、导航栏和导航抽屉
• 阅读更多： 指南、Android 实施

退出屏幕快速淡出，然后进入屏幕淡入。由于一级导航栏内容不一定相关，因此动作有意不使用分组或持久元素来在屏幕之间创建强关系。

进入和退出

此模式用于在屏幕上引入或者移除组件。组件可以在屏幕边界内进入和退出，例如应用上方显示的对话框。它们还可以通过跨越屏幕边界进入和退出，例如在屏幕上滑动的抽屉式导航栏或底部操作条。

在屏幕范围内

• 常用于： FAB、对话框、菜单、信息栏、时间选择器和工具提示
• 阅读更多： 指南

Android组件在进入和退出时会沿 x 轴或 y 轴展开和折叠。应避免缩放和 z 轴运动，因为它们会暗示海拔变化，这与 M3 的缩小海拔模型不匹配。

iOS组件在进入和淡出时均匀缩放。

超出屏幕边界

• 常用于： 应用栏、横幅、导航栏、导航栏、导航抽屉和表格

Android组件在屏幕上滑动时会沿 x 轴或 y 轴展开和折叠。这突出了它们的形状，使原本简单的过渡更具表现力。

iOS组件在屏幕上滑动时不会改变形状。

侧边栏等组件也可以在与主内容相同的高度进入和退出。剩下的会缩小内容的可用区域。

位置组件的进入和退出有助于建立应用程序的整体空间模型：

1. 通知从顶部进入，表示通知抽屉也可以从顶部下拉
2. 左侧导航抽屉可帮助用户了解其在屏幕外的位置
3. 底部工作表和键盘从屏幕底部进入。这是工作表进入的合理默认位置，因为屏幕底部最容易触及。

框架加载

此模式用于从临时加载状态转换到完全加载的 UI。

框架加载是一种 UI 抽象，用于提示内容加载后会出现在何处。它们与其他过渡结合使用，以减少感知延迟并在内容加载时稳定布局。

框架加载有一个微妙的脉动动画来表示不确定的进度。它从屏幕的左上角开始，然后向下移动到右下角。

一旦内容加载完成，它就会快速淡入框架加载的顶部。