一、动效规范 1. 原则与概念
informative 富于信息
Motion shows spatial and hierarchical relationships between elements, which actions are
available, and what will happen if an action is taken.
focused 焦点化
Motion focuses attention on what's important without creating unnecessary
distraction.
expressive 表现性
Motion celebrates moments in user journeys, adds character to common interactions,
and expresses a brand’s personality and style.
屏与屏之间的切换因为动效而显得更加连贯，交互的上下文逻辑也因为动效的加持而更加清 晰。动效对于产品和用户而言，都是一个不可多得的重要组成部分。总而言之，动效体现了层 级、反馈&状态、用户引导以及产品特色，而动效使得UI具有表现性并且易用。
2.基础元件
Persistent element 持续元件/多次重复出现的元件
一个持续的元件形态，比如导航icon、开始和结束按钮。
Outgoing element 外显元件
An outgoing element, such as a title, exits the screen by fading out.
Incoming element 内显元件
An incoming element, such as each of these action items, enters the screen by fading
in.
Static element 恒定元件 一个恒定元件，比如永不变形的总菜单(overflow menu)
3.动效的表现连贯性
Motion guides user attention in a smooth, unbroken fashion. When a UI changes appearance, motion provides continuity between the placement and appearance of elements before and after a transition.
主要有以下三种表现形式:
渐变(t weening)
淡入/淡出(f ading)
变形(shape t ransf ormat ion)
二、基本动效设计规则
1.用户忍耐时间(动效持续时⻓) 1.1 动效持续时⻓
当元素的位置和状态发生改变的时候，动效的速度应该足够慢，维持足够⻓的时间，让用户能 够注意到变化，但是同时，又不能慢到需要用户去等待。大量的研究表明，动效的最佳持续时 ⻓是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来 的。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来。而超过1 秒的动效会让人有迟滞感。
因此，我们可以得到合适的持续时⻓速度，按照material design的官方建议，以下列举了部分 已经实证的用户忍耐时间数据，其对应的也就是动效持续时⻓:
勾选(select ion cont rol):100ms
对话框淡入/淡出(f ade in/f ade out ):150ms/70ms
变形(shape changes):200ms
带有具体动效的图标(icon wit h det ailed animat ion):200ms
侧栏拉出/关闭(nav drawer opens over/closes over):250ms/200ms
卡片栏打开/收回(card expands over/collapses over):300ms/250ms
开关(swit ch animat ion):100ms
底栏拉出/收回(bot t om sheet expands/collapses):250ms/200ms
(chip):250ms/200ms
卡片放大/收回(card expands/collapses):300ms/250ms
固定⻚放大/收回(persist ent sheet expands/collapses):300ms/250ms
1.2 动效持续时⻓影响条件
以上数据都是来自移动端，而除此之外，相比于移动端中的动效速度，网⻚中的速度会快上一 倍，换句话说，就是动效的持续时⻓应该在150~200毫秒之间。如果持续时间太⻓，用户会忍 不住觉得网⻚卡住了。 动效的持续时⻓绝不是单纯取决于屏幕尺寸和运动距离，还取决于平台特征、元素大小、功能 设定等等。较小的元素或者较小的变化，对应元素大小和运动距离，相应的动效应该更快一 点。因此，大而复杂的元素动效持续时间更⻓，看起来也更舒服一点。
因此，影响动效的条件有如下所示:
屏幕尺寸 元素大小
运动距离 平台特征 功能设定 特效设计
1.3 特殊设计
除此之外，我们还有一些需要特殊注意的地方。
避免碰撞特效，除非是特定场景 动效的运动规律要符合物理规律，当元素运动到边界，发生碰撞的时候，碰撞的「能量」最终
是要均匀分摊下来的，而弹跳的特效在多数情况下是不适合的，仅在特殊情况下适合使用。
尽量不在动效中使用模糊效果 元素的运动过程应该是清晰的，尽量不要在运动中使用模糊的效果(比如AE 的模糊动效爱好
者们)，模糊的动效不适合在 UI界面中使用。
列表项之间的延迟应在20-25ms之间
列表项(新闻列表、邮件列表等)所使用的动效，在实际运动的过程中，项和项之间应该有轻 微的延迟，元素之间的延迟应该控制在20~25毫秒之间，如果持续时间再⻓，可能会给人一种 迟滞的观感。
2.缓动
Easing is a way to adjust an animation’s rate of change. Easing allows transitioning elements to speed up and slow down, rather than moving at a constant rate.
In the real world, things don’t start or stop moving instantaneously. They take time to speed up and slow down. Easing makes elements move as though influenced by natural forces like friction.(Material Design)
缓动指的是物体在物理规则下，渐进加速或减速的现象。在动效中加入缓动的效果能够 让运动显得更加自然，这是运动的基本原则之一。为了避免看起来像是不受任何作用力 的直线迅速运动(迅速直线运动也会使用在颜色改变/背景改变等等预设条件下)，使动 效看起来更加接近生活，通常在UI设计里会有以下几种缓动模式:
2.1 缓动动效分类 标准缓动
在这种曲线之下，物体从静止开始加速，到达速度最高点之后开始减速直到静止。这种类型的 元素在 UI界面中最为常⻅，当不知道要在动效中使用哪种运动方式的时候，标准曲线就是第 一选择。
减速缓动曲线 当元素从屏幕外运动到屏幕内的时候，动效应该遵循这类曲线的运动特征。从全速进入屏幕开
始，速度降低，直到完全停止。
减速曲线
减速曲线可以适用于多种不同的 UI控件和元素，包括从屏幕外进入屏幕内的的卡片、条目 等。
加速缓动曲线 加速曲线
当物体加速⻜出屏幕的时候，可以使用这种加速曲线，比如界面中被用户使用滑动手势甩出去 的卡片。但是请记住，只有当运动对象需要完全离开界面的时候才会这么使用，如果它还需要 再回来的话，则不行
2.2 缓动动效设计规则
除了分类之外，还有一些在缓动当中需要注意的地方。 非对称运动
根据 Material Design 的规范，最好使用不那么对称的增速和减速的过程，让动效看起来更加 真实。同时大家会更加在意运动的结果，曲线的末端，也就是运动结束的过程最好进行适当的 强调，换句话说就是减速过程持续的时⻓最好超过开始加速的时⻓，用户将会更加清楚地观察 到运动的最终结果，从而更好地明白运动的终止状态。
元素移动 当元素从屏幕的一个位置移动到另外一个位置的时候，最好使用这种标准的缓动曲线，这个过
程中，尽量不要让动画效果引人注意，不要使用戏剧化的效果。 元素隐藏/消失
当元素从屏幕上消失的时候，采用了相同的不对称缓动曲线，用户同样可以通过滑动回到之前 的位置。这个环节使用了抽屉式导航控件。
2.3 缓动曲线
⻉赛尔曲线函数 cubic-bezier()是用来描述曲线的，它的名字前面之所以带有 Cubic 是因 为每个⻉赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点(0，0)和终点 (1，1)在坐标轴上的位置是已经事先确定的。
为了简化对于⻉赛尔曲线的理解，推荐网站分别是 easings.net 和 cubic-bezier.com ，前者 包含了最常⻅的曲线的列表，可以复制到你的原型工具中;第二个网站提供了不同曲线的参 数，可以直接在其中查看各种对象的移动方式。
3.动态特效编排
动画效果也是需要编排的，它的主要目的是让元素从一个状态切换到下一个状态，自然过渡， 让用户的注意力自然地被引导过去。编排有两种不同的方式，一种是均等交互，另一种是从属 交互。同时，也需要注意变形和焦点元素。
3.1 Sequencing
均等交互 simple sequencing 均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。
比如，所有的卡片都遵循着一个方向来引导用户的注意力，自上到下地次第加载。相反，没有 按照这样清晰的规则来加载，用户的注意力会被分散，元素的外观排布也会显得比较糟糕。
用户的注意力应该沿着一个流向来引导 表格形式下，更偏向于沿着对⻆线引导
从属交互 complex sequencing 从属交互指的是使用一个中心对象作为主体，来吸引用户的注意力，而其他的元素从属于它来
逐步呈现。这样的动画设计能够创造更强的秩序感，让主要的内容更容易引起用户的注意。
不成比例地改变对象外观的时候，运动轨迹应该是弧线的
成比例变化大小的时候，应该沿着直线运动
元素按照弧线展开的时候，最终方向应该和主轴重合
在运动过程中，元素不应彼此穿越，而应该互相留出空间(这一点不是一成不变的。在比
较拥挤的界面当中，某个元素可以「越过」其他的元素，它同样没有穿过其他的元素消 失)
3.2 Transfomations 变形
简单变形 simple transformation
简单变形包括所有变形为下一个状态的属性
复杂变形 complex transformation
