Ant Motion 动效原则

一、Motion 动效

界面动效能加强用户认知且增加活力。

1.1 动效价值

• 增加体验舒适度：让用户认知过程更加自然
• 增加界面活力：第一时间吸引注意力，突出重点
• 描述层级关系：体现元素之间的层级与空间关系
• 提供反馈、明确意向：助力交互体验

1.2 衡量动效意义

• 动效的存在是否合理
• 动效与性能：不能出现大幅度波动丢帧与卡顿现象，不能影响产品性能

二、Principle 原则

2.1 自然

自然运动规律，保证视觉连贯，让用户感知到动作是自然的。

2.2 高效

尽量节省过渡的时间，快速完成过渡的动画效果。

2.3 克制

做有意义的动效，不去做太多的修饰而干扰用户。

三、Speed 速度

速度的快或慢取决于时间与缓动，相同的距离，时间越短速度则越快，而缓动则是能将同一段时间划分快与慢的区域。

四、Space 空间

现实空间里，物体存在远小近大的原则，运动则有远慢近快。在动效设计时，处理和空间相关的话题时，我们需要考虑两方面的因素：

• 视差：例如汽车在公路上行驶，离汽车越近的物体，移动速度越接近汽车的速率。以行进中的汽车为例，汽车所在的点为 X 轴的基准点，离基准点越远时，速度就越慢。动效设计中同样存在这个原则，元素的空间距离会影响动画效果，从而影响动效设计的决策。
• 大小：遵循远处的物体小，近处的物体大的原则。

五、Combined 组合

组合动效是将多种动画效果组合起来运用在单个元素或者界面中的表现方式，吸引用户的注意，让用户快速了解信息的主次关系。ant design 最常用的组合动效有以下三种：

• 单元素组合动画：单元素组合动画是指将多个动画参数附加于一个元素上，通过不同的动画参数帮助用户实现自然的认知过程。
• 多元素列队动画：队列一般指同个区块里多个元素的进场或出场，根据元素的排列顺序，有序的进入或依次的退出，实现更为自然的视觉过渡。
• 多元素聚散动画：以中心点为主向外扩散或汇聚的一个效果，强调主体以及分支之间的关系，能够快速的让用户了解信息的关联性。