动效规范—基于容器过渡的动效

什么是基于容器的过渡

在界面设计中，容器是指封闭区域的形状，可以通过是否有可见的形状边缘去识别，例如按钮、列表、卡片、抽屉等。容器过渡动效多用于在组件或全屏视图之间过渡，目的在于加强界面元素之间的关系，帮助用户更好的理解产品架构。

有四种不同类型的容器过渡动效：

1、容器转换，通常内容会跟随容器的缩放而转换

2、容器划入，通常容器大小不会变化，从屏幕一侧划入

3、容器呼出，通常用于浮层的出现

容器转换动效

容器转换动效专为包含容器在内的UI元素之间的转换而设计，其目的是在两个元素/元素与页面之间创建可见的连接，将一个界面元素平滑转换为另一个元素；它的特点是容器在开始到结束的过程中一直存在。例如，新增事项按钮转换为填写事项页面时，用户的注意力会被引导到理解填写事项页面是新增事项按钮的扩展页面。

开始设计

开始之前需要先了解两个概念：运动规律和持续时间，前者可以还原物理世界中我们对运动快慢的理解，让动效贴近用户认知，更加的自然；持续时间则影响了动效创造的界面连续性是否流畅清晰。

运动规律

借助简单的物理知识，物体的运动类型可以分为线性与缓动，缓动进一步细分，可以分为缓入、缓出、缓入缓出。当然，还有一些富有表现力的动画形式，比如弹性动画，这类型多用于表达品牌风格，不在我们当前的专题讨论范围。

加速缓动（Ease-in）：开始慢，结束快（常用于退场元素）

减速缓动（Ease-out）：开头快，结尾慢（常用于传入元素）

缓入缓出（Ease-both）：开头慢，结束慢

线性（No-ease/linear）：以恒定速度移动的物体

持续时间

平均而言，人类的视觉感知需要 230 毫秒，对于不同的人，它在 70 到 700 毫秒之间变化（更详细信息可以通过访问人类处理器模型从 Wikipedia 获取更多信息），这就是为什么短转换让我们感觉太突然，而长转换让我们感觉在等待。因此，我们需要根据动画的复杂程度调整持续时间，以产生自然清晰的过渡。

容器转换动效要点

了解了界面动效的基本要素之后，我们应该如何开始做容器转换动效？以文章最开始的案例为例，从三个步骤来分析：

1、容器动画

• 容器形状和大小的转换：容器的尺寸和圆角半径从圆形按钮转化到填充屏幕的矩形，且是个循环动画
• 容器转换运动类型分析：从用户心理预期来思考，触发添加按钮的操作后，应用应该平滑快速的切换到下个添加详情的页面，与用户预期一致的动效应该是容器快速加速然后缓慢减速以停止，这种缓动方式也是界面动效中最常用的，将用户的注意力引导到下一步的内容中。动画参数

  
  

• 容器动画

2、建立容器与元素之间的联系

案例中，“➕”图标和添加事项的页面都属于容器中的内容。容器的大小变化，带动容器内的内容同步缩放。

元素固定隐藏在容器内，以顶部为缩放中心，缩放容器中的内容以适应容器的宽度变化，这样，在容器和内部元素之间创建了清晰的连接。

容器与元素动画

容器与内容动画

3、通过淡入淡出平滑过渡容器内的元素

容器转化动效中，容器内包含两种类型的元素，分别是进入和退出两种；

过渡期间退出的元素不应该过度引起用户的注意，因此随着容器的加速快速淡出，会用到运动类型中的加速缓动（Ease-in）。相反，随着容器减速，进入的元素逐渐淡入，会用到运动类型中的减速缓动（Ease-out）。

容器内元素在快速缩放的过程中，通过不同时间段内传入和退场元素的淡入、淡出，实现不同元素的无缝对接，从而实现平滑的容器转换动效。

容器转换动效灵活的应用场景

将此模式应用于涉及容器的所有过渡可建立一致的风格，它还使动效开始和结束之间的元素关系变得清晰，因为它们由动画容器链接；它的应用场景非常的灵活性，例如下面另外两种不同的组合：

容器滑入动效

常见的还有另一种情况，一些容器只是通过界面元素从屏幕外滑入，它滑动的方向由它关联的元素所在位置来决定，运动中也要遵循快速加速然后缓慢减速以停止的运动规律；

例如，轻点左上角的导航抽屉图标，抽屉容器从左侧滑入屏幕。

扩展阅读：

《动画设计原则》https://uxdesign.cc/motion-in-ux-design-9-points-to-get-started-

《动效规范》e891974dc7eehttps://www.carbondesignsystem.com/guidelines/motion/overview/

若有收获，就点个赞吧

Powered by Froala Editor