我们早期的GUI其实只有视觉和交互设计，直到近几年的硬件技术发展成熟，动效才开始出现并逐渐模糊了与传统动画之间的界限。
动效的主要作用是表现UI元素间的关系、引导用户的操作；同时，动效还可以为界面里的图标、Logo和插画等赋予性格特点。
不过，在我们追求界面表现力之前，我们需要先保证界面的可用性。以下，我们会从一些 基础的 过渡动效开始讲解。
过渡动效的设计关键在于简单和一致性。因此我们可将其形式分为2种：容器内过渡，非容器过渡。
如果过渡对象是一个容器（比如按钮、卡片或列表等等），那么过渡的动效会基于这个容器的边缘进行设计，这种形式可以分为3步来实现：
1. 首先是 容器形态的过渡变化。如下图，从一个圆形按钮过渡转变成一个铺满界面的矩形。
2. 其次是 容器内元素的同步缩放。元素需顶部固定于容器再进行缩放，才能在容器与元素之间建立一个清晰的联系。
3. 最后是让 退出的元素随着容器加速而淡出，并在容器减速时，淡入输入的新元素。让元素的淡化与其移动的速率相等，可以让这个过渡效果无缝衔接。
将这种运动模式应用到所有涉及容器的过渡中，可以让我们的用户建立统一的界面理解。
同时由于这种动效的承接，可以 对模块“从哪来”“到哪去”有更清晰的表述。为了显示这种模式的灵活性，这里将它应用于五种不同的场景:
还有些容器的过渡只是单纯从屏幕的上方滑进，不过它们 滑动的方向都是由与它相关的组件位置决定的。
如下图中，点击左上角的导航按钮，导航栏会从界面的左侧滑进：
如果一个容器是在屏幕中淡入并放大出现的（如弹窗），那它 放大的过程其实是从95%开始而不是从0%开始放大，因为这样可以避免这个过渡过程引起用户太多的注意。
所以像这种缩放动效，是从运动曲线的峰值开始，再慢慢减速到静止的状态。
值得注意的是，这些 容器的退出只会进行淡化而不会再缩放，以便于用户将注意力集中在新的内容上。
如果过渡对象并不是一个成形的容器（比如点击底部导航栏切换整个页面等等），我们可以分2步来设计过渡动效：
2. 当进入的对象淡入时，也是逐渐放大的过程。注意这种缩放动效只适用于进入的对象（退出的对象只需淡出），这样更有助于强调新进入对象的内容。
如果在界面中，退出与进入的对象之间已经有清晰的空间或逻辑关系，那么“ 共享运动路径”可以帮我们强化这种关系表现。
比如下图对步骤的导航，每个退出与进入的对象都是共享一段垂直的滑动路径。（退出与进入对象在其运动路径的中间进行淡出淡入，而不是从路径的开头就开始运动）
考虑到导航栏的使用率很高，其过渡动效设计更需要考虑功能而不是样式。
但这并不说明这些过渡动效不可以有风格化的设计，只是我们需要 确保这些风格是建立在其品牌基础上。通常，一些吸引眼球的动效设计会被应用在图标、Logo、加载动画或空状态中。
不过像上图这些过渡动效，虽然不会吸引用户太多的注意力，但可以让一个App的可用性得到提升。
导航的过渡不能太慢，它需要让用户快速进入对应的功能；但也不能太快，这会让用户在操作过程中迷失方向。
过渡动效持续的时间是由过渡对象的占屏比决定的。由于导航的过渡通常是包含整个页面的切换，所以运动的持续时间为300ms较为合适。相较之下，如果像开关这种小组件的过渡，只需要持续100ms即可。
如果你觉得过渡得太快或太慢，可以以25ms为单位进行调整，直到达到适当的平衡。
缓动描述的是运动对象加速、减速的速率。大多数情况下，过渡动效需遵循Material’s standard easing规律，其实这是一种 不对称的缓动形式：
运动对象经过快速加速后，再缓缓减速的过程。 这种缓动形式能让运动对象更加真实，因为我们现实生活中的物体运动也不会突然开始或停止。
如果选择了对称或线形的缓动形式，那将会让我们的过渡动效显得特别僵硬。
以上介绍的运动模式与实例应用，可以为我们的产品 塑造出实用且微妙的动效表现。
一旦这些过渡动效处理好了，我们就可以开始为界面赋予一些性格化的表现。而这通过简单的动效是远远不够的，我们需要用到一些动画技巧才能实现它。
+++++
本文由 SDL艺术实验室 公众号原创，未经许可，禁止转载。
原文链接：https://mp.weixin.qq.com/s/HXgElfAmRNg2_-UT9FHGCA
