2018-11-22
适度的动态效果能让页面更生动，但动效一旦滥用，反而会干扰阅读、拖慢加载。关键在于明白动效应该服务于什么目的。
动效的三个正当用途
其一是引导视线，当用户完成某个操作后，通过位置变化提示结果出现在哪里；其二是表达层级，例如展开菜单时的位移让结构关系一目了然；其三是提供反馈，按钮按下、表单提交过程中的状态变化可以减少不确定感。
控制出现的位置
整页普遍加动的做法容易让人疲劳。把动效集中在关键交互节点，其余位置保持静态，页面整体反而显得克制而清晰。
时长与节奏
单次过渡一般在两百到四百毫秒之间较为舒适，过短难以察觉，过长则显得拖沓。多个元素依次出现时，间隔保持一致，避免节奏忽快忽慢。
优先使用性能友好的属性
位移、缩放、透明度这三类属性的合成开销较小，应尽量以它们为主。频繁改动布局类属性会触发重排，在配置一般的设备上容易出现卡顿。
尊重系统的减弱动效设置
部分用户出于健康原因在系统中关闭了动画效果，网页应当读取该偏好并相应降级，这既是体验考量，也是无障碍要求的一部分。
移动端要额外谨慎
手机处理器性能差异大，滑动过程中同时运行的动画容易掉帧。可以简化移动端版本的效果，或改为静态呈现。
最后，任何动效上线前都应在低端设备与低速网络下测试一次。效果好坏，最终由访客的实际感受决定。
