动画效果

运动机理

物体的运动能够传递自身的体积、质量、形变自由度等信息，帮助用户了解与掌控界面。质感设计借助运动体现空间关系和界面功能，表达设计意图，带来如意、流畅的使用体验和美观的视觉体验。

功能作用

充实联系

动画能够预示、揭示、解释界面的变化，进一步说明界面的空间形态和层次体系。

转场动画提示了转场后层面的层级。

过渡动画提示了菜单弹出是点击特定按钮的结果。

反馈状态

动画是界面对用户输入的确认和输出，并指示着界面的状态信息。

涟漪动画触发表示用户点击有效。

边缘动画触发既表示用户滑动有效又表示滚动到达终端。

引导用户

动画能够指引用户进一步推动程序进程，牵引用户的注意力，避免用户因其它非目标进程分心。动画还能减少等待进程的感知时间，增强进程间的连贯性。

跟随滑动进程的动画鼓励用户继续操作推动刷新进程。

界面元素的运动既强调了提示文字，又指示了用户滑动操作的方向。

装饰界面

动画的加入使界面变得生动有趣，富有情绪。同时动画也是传达品牌形象的途径。

图标动画点缀了界面。

重复出现、贯穿流程的转场效果形成、丰富了产品形象。

时长

无论何种动画都应保持合适的时长。特别是对于如界面转场、状态反馈等功能性动画，既不能太慢，使动画阻碍操作进程或分散用户注意力而起负面作用；又不能太快，使动画难以被用户感知而失去作用。

动态时长

由于界面元素物理量的不同，用户输入同样的力，能够改变界面元素运动状态的程度（变化速率、达到指定程度用时）也就不同。基于时长的动画设计系统可以通过控制时长表现这种规律。

因此，当元素移动或转换时，变化幅度越大，动画时长则越长。对于手机尺寸的屏幕或窗口，通常：

  • 较小范围的变化需要200ms
  • 中等范围的变化需要300ms
  • 较大范围的变化需要400ms

动画时长超过500ms可能显得拖沓，短于100ms可能难以被看清。

动画时长因位移距离长短而异。

进场元素需要吸引用户的注意力，因此动画时长偏长；退场元素无需用户继续注意，因此动画时长偏短。另外，为了给一组动画的每个环节分配足够的注意时长，参与元素越多、变化形式越多的动画组时长越长；反之越简单的动画组时长越短。

对比手机，可穿戴设备屏幕更小，界面元素变化幅度更小，动画时长可以更短；平板设备屏幕更大，界面元素变化幅度更大，动画时长可以更长。桌面设备虽然屏幕较大，但多进程和高频的操作环境不允许过于复杂的过渡动画，因此动画时长通常较短。

动画时长因变化区域大小、进退关系、复杂程度而异。

速率变化

在现实世界中，物体的受力多种多样。比如推动石块需要克服摩擦力，压缩弹簧需要克服弹力——向相对运动发展的速率是渐进提升的过程。滚动的石块会因为阻力停下，压实的弹簧会因为恢复力恢复原状——向相对静止发展的速率也是渐进降低的过程。

因此，界面元素唐突地以恒定速率移动或伸缩会显得非常不自然。基于时长的动画设计系统可以通过控制动画的速率曲线，调整进度与时长的关系表现加速或减速。

由于物体受各种力的时间和大小不同，状态变化的加速度大小也就不同。具有不同快慢的加速和减速过程可以使位移或伸缩动画效果更加自然。

预设速率曲线

标准曲线

界面元素动画的变化速率通常遵循标准曲线。该曲线表示变化速率先快速增大后缓慢减小。

曲线描述：cubic-bezier(0.4, 0, 0.2, 1)

减速曲线

若界面元素要进入、淡入视窗或凭空伸展出现，可以施用减速曲线。该曲线表示变化速率从满速缓慢减小至零。

曲线描述：cubic-bezier(0, 0, 0.2, 1)

加速曲线

若界面元素要退出、淡出视窗或收缩至消失，可以施用加速曲线。该曲线表示变化速率从零缓慢增大至满速。

曲线描述：cubic-bezier(0.4, 0, 1, 1)

对称标准曲线

若界面元素要暂时退至屏幕边缘，可以施用对称标准曲线。该曲线表示变化速率快速增大和减小。

曲线描述：cubic-bezier(0.4, 0, 0.6, 1)

恒定曲线

对于不受阻力或受用户恒定输入影响的变化，可以施用恒定曲线。

曲线描述：cubic-bezier(0, 0, 1, 1)