尊重「减少动态效果」

操作系统提供了一个无障碍偏好:减少动态效果 (Reduce Motion)。开启它的用户往往对大幅运动敏感—— 前庭功能障碍者会因屏幕上的滑动、缩放、旋转产生眩晕与恶心 (晕动反应)。Web 端通过 matchMedia('(prefers-reduced-motion: reduce)') 读到这一偏好。负责任的降级不是 关掉一切动画,而是去掉大幅位移 / 缩放 / 旋转,保留必要的状态反馈——通常退化为温和的 opacity 淡入,或对极敏感场景直接瞬时到位 (set)。下面以同一个入场效果对照两种模式。

检测中…

同一张卡片入场:完整模式 slide + scale + spin,减少模式按策略降级

生效模式 — 本次动画 —

降级 ≠ 静止:开启「减少动态效果」的用户依然需要知道发生了什么。直接删掉过渡会让界面状态突变、丢失因果线索。正确做法是保留必要反馈 (淡入 / 颜色变化 / 短促 opacity),只移除让人眩晕的 大幅运动 (长距离 translate、整体 scale、rotate、视差)。其一,把入场从「滑入 + 缩放」改为「淡入」; 其二,对极敏感的循环 / 抖动动画,可直接 set 到终态而不播放。

matchMedia(query) 返回的 MediaQueryList 不只能即时读 .matches, 还能监听变化:用户在系统设置里切换偏好时,change 事件会触发,界面应据此即时调整后续动画。本页用一个 toggle 模拟该偏好 (系统设置不一定方便临时改),但上方徽标始终显示真实 matchMedia 的检测结果——二者取「或」:任一为真即走减少模式。

@vega/anim — 检测偏好并选择降级分支

相关:决定降级后淡入「节奏」的曲线见缓动;完整模式里 slide + scale + spin 的多属性编排见关键帧。