运行时 · 32
减少动态效果
Reduced motion · reduced-motion尊重系统偏好，去掉空间位移，仍用轻微淡入保留状态反馈。
把整页动画全关掉，状态变化可能变得难察觉；只减慢动画，也没有消除大幅空间移动。更合适的是让位移、缩放立即到位，让透明度在很短时间内变化。演示开关模拟这一偏好，不改你的系统设置。
公式
if reducedMotion: positional properties → instant opacity → short fade else: position + scale + opacity → full transition
参数
| 本页默认 | 成熟实现 | |
|---|---|---|
| position | 模拟偏好时立即到位 | Motion：位置类键 type: false |
| opacity | 180 ms | Motion：仍按原过渡设置动画 |
| preference | prefers-reduced-motion | — |
怎样做好
- 区分空间变化与透明度。Motion 在减少动态效果时仅把位置类属性设为即时，透明度和颜色仍可动画。motion/packages/motion-dom/src/animation/interfaces/visual-element-target.ts:135–145; motion/packages/motion-dom/src/render/utils/keys-position.ts
- 读系统偏好，也响应运行中的偏好变更。www-motion/rewrite/lib/motion-kit.js:316
- 静止状态仍要完整呈现打开或关闭的结果；不能靠动画本身传达唯一信息。motion/packages/motion-dom/src/animation/interfaces/visual-element-target.ts:135–145
在我们的案例里
15 个案例显式处理减少动态效果。质量记录另标记了 65 个案例缺少这一处理；dimension 与 morph 的重写都读取了系统偏好，说明这项策略需要进入通用运行时，而非只补在单个动画里。
65 / 69 个案例 · 未处理或只部分处理减少动态效果来自 Codex 逐案质量标记（按关键词归类，近似值）
出现在 15 个案例
参考实现 · basics.js
/** Respect the OS setting, and react when it changes mid-session. */
export function reducedMotion(onChange) {
const mq = matchMedia('(prefers-reduced-motion: reduce)');
if (onChange) mq.addEventListener('change', e => onChange(e.matches));
return mq.matches;
}