应用转场动画

什么才是好的过场动画？

精心设计的转场动画应具有以下特征：

遵循无障碍设置

大多数平台都设有简化的动画设置，以帮助对动作敏感的用户。如果启用该设置，过渡应该：

• 使用微妙的淡入淡出动画，而不是强烈的滑动或缩放动画
• 禁用视差或形状变形等装饰效果

持续性

持续应用正确的过渡类型有助于让应用程序感觉具有凝聚力并且使用起来可预测。

稳定的布局

使用框架加载，以便 UI 元素在转换过程中保持连贯和稳定。避免内容在加载时移动位置或立即弹出。这可能会分散注意力并让人感到沮丧。

避免突兀的跳切

跳切通常应避免作为默认设置，因为它们可能会让人感到困惑。从一个屏幕立即转换到另一个屏幕不会给用户提供任何线索来帮助他们自己定位。

如果纯粹的效率是首要考虑因素，比如在生产力应用程序中打开菜单，则可能优先选择跳转。

连贯一致的空间模型

过渡用于建立连贯的空间模型。这有助于用户了解应用程序的物理布局。

统一方向

过渡应具有统一的移动方向。元素被分组并沿着主轴移动，而不是朝独立的方向移动。只有像英雄图像这样的重要元素在整个过渡过程中保持不变。这有助于引导用户的注意力。

利落的淡出

在淡入新内容之前完全淡出内容。这避免了部分透明元素的重叠而导致分散注意力和混乱的框架。

如果需要发生交叉淡入淡出，请保持快速并在过渡最快的部分将其隐藏。

当组件进入或退出时，不要让它们在其他内容之上慢慢淡出。这样会造成令人分心的交叉淡出帧。如果需要淡出，例如对话框进入屏幕中间，淡出应该使用较短的持续时间来隐藏过渡的这一部分。

简约风格

过渡效果不适用于高度风格化的动作。它们很频繁，通常占据屏幕的很大一部分，主要是为了帮助用户完成任务。

选择转场动画模式

请考虑以下内容，为给定的用例选择正确的转场方式：

容器切换

这种模式在创建元素之间的关系方面非常有效。从风格上讲，它也是最引人注目的模式，应该保留用于正确的上下文。考虑将其用于：

1. Hero moments 应该表达出来
2. 浅层次结构，可以展开元素以查看更多细节，然后折叠它
3. 在元素之间创建无缝连接

对于Hero moments 使用容器变换过渡，而不是前进和后退过渡。

向前和向后

Android 和 iOS 都应使用平台默认的前进和后退导航。它易于实现，并且随着平台的更新而保持最新。它们具有适合这种常见过渡的简单运动风格。

横向过渡

横向过渡用于浏览属于同一集合的对等内容，例如在媒体库的选项卡之间导航。通过水平滑动内容，它暗示能够滑动内容区域以在对等内容之间导航。

不要使用横向过渡来导航分层屏幕。对于高频过渡来说，将内容滑动到屏幕的整个宽度是多余的。它还意味着一种对等关系，这与屏幕的层次结构不符。

顶层过渡

点击导航栏、滑轨或抽屉时，会使用快速淡入淡出过渡到新目的地。顶层过渡的目的地不一定相关，因此该动作故意不会在屏幕之间建立联系。

不建议对此类导航使用横向过渡模式。这意味着您可以在顶层目的地之间滑动，这会与其他组件（如轮播或可滑动列表项）发生冲突。

进入和退出

此过渡模式用于在屏幕主 UI 上下文中引入组件。它可以是模态的，例如要求用户采取行动的对话框。或者它可以允许同时使用 UI 的两个区域，例如地图上的标准底部表单。

不要使用此模式来导航分层屏幕。将内容滑动到屏幕的整个高度是过度的，并且会导致屏幕之间的关系不明确。