过渡动画需响应系统的减弱动效偏好
别名: 减弱动效 · prefers-reduced-motion
概念解释
主流操作系统与浏览器都提供"减弱动态效果"（reduced motion）设置，用户开启它是在声明"我需要更少的运动"。图表的过渡动画（数据更新的位移动画、元素飞入飞出、视差滚动）应当读取这个偏好并作出响应：减弱模式下用淡入淡出或直接切换替代大幅位移。尊重系统偏好意味着用户不需要在每个应用里重复声明自己的需求——一次设置，全系统生效，前提是应用真的读取了它。
机制
响应偏好的机制是条件化的动效策略：技术上通过媒体查询（prefers-reduced-motion）或系统 API 检测设置，据此切换动效方案。设计上的关键是"减弱"的正确语义：减弱动效不等于移除全部反馈——位置位移、缩放、视差这类前庭刺激性动效被替换或移除，而透明度渐变（淡入淡出）这类低运动刺激的过渡通常可以保留，因为它们传达状态变化而不引发运动不适。完全静默切换（无任何过渡）是可接受的简化，但可能损失"新旧状态的关联"（延伸至同组的跳动干扰），淡入淡出是在"无运动"与"有连续性"之间的平衡点。实现上的常见错误是把偏好检测写成一次性判断而忽略运行时变更（用户在使用中开启减弱动效应即时生效），或者只处理了 CSS 动画而遗漏了 JS 驱动的动画（图表库的动画引擎往往绕过 CSS 媒体查询），后者需要显式把偏好传给动画引擎。
边界
减弱动效的适用边界是"非必要动效"：传达信息必需的运动（拖拽时元素跟随指针、滑块的直接操作反馈）是交互本身的组成部分，不属于可减弱范围；可减弱的是装饰性与过渡性动效。动效信息等价的原则仍然适用（延伸至同组的静态等价）：减弱模式下如果动效承载的信息无法通过其他途径获得（进度动画表示的处理进度），需要提供文本或静态替代。偏好的默认值问题也值得注意：未设置偏好不等于"用户喜欢全部动效"，只是"用户未声明"——设计应保证即使全动效模式也在舒适范围内，偏好设置是针对特殊需求的增强而非达标线。
怎么落地
- 图表库与自定义动画统一接入 prefers-reduced-motion：减弱模式下位移类过渡替换为淡入淡出或直接切换。
- 处理运行时偏好变更（监听变化事件），减弱动效即时生效。
- 审计 JS 驱动的动画引擎（canvas 图表库），确保偏好信号传入，而非只依赖 CSS。
- 验证：开启系统减弱动效后检查图表的数据更新过渡；仍出现大幅位移动画即未正确响应偏好。