动效可访问与性能分诊

大理论

动效不是最后加上的装饰层，而是用户理解状态、空间和反馈的一部分。它也可能带来眩晕、注意力抢夺、性能抖动、焦点错乱和生命周期泄漏。动效治理要把每个动画放进 inventory：目的、触发方式、持续时间、属性、库、reduced-motion 分支、用户控制和验证证据。

小知识点

1. 先给动效分类：orientation、state feedback、causal transition、progress、delight、decorative loop。装饰循环默认优先削减。
2. 触发方式决定风险：load/auto-play 比 hover/tap 风险更高，scroll/scrub 比普通 transition 更需要性能和可跳过路径。
3. reduced-motion 不是把 duration 设成 0 的单一动作；大位移可改为 opacity/crossfade，视差可改为静态 poster，自动视频可停止 autoplay。
4. WCAG 2.3.3 关注用户交互触发的非必要动画能否禁用；2.2.2 关注自动开始、超过 5 秒且与内容并行的移动/闪烁/滚动内容能否暂停、停止或隐藏。
5. 性能优先 transform、opacity、clip-path 和 CSS variables；持续动画避免 width、height、top、left、filter blur 和大量 box-shadow。
6. 库治理要包含 cleanup：Motion 检查 stable key 和 AnimatePresence 边界，GSAP 检查 context/revert，Lenis/ScrollTrigger 检查实例销毁和 refresh。

设计判断

如果关闭动效后用户仍能理解状态变化，而开启动效后空间关系、反馈或品牌节奏更清楚，这个动效是健康的；如果用户必须等待动画、无法暂停循环、reduced-motion 仍有大幅运动，或动画只让页面显得忙，它就是风险。

实现建议

建立 motion triage record：selector/component、purpose、trigger、duration/easing、animated properties、library、essential/non-essential、reduced-motion behavior、pause/stop/hide control、performance risk、cleanup path、desktop/mobile evidence。React 中优先使用 useReducedMotion 或 MotionConfig；GSAP 用 gsap.matchMedia() 分支；CSS 使用 @media (prefers-reduced-motion: reduce)；Lottie/视频/循环背景提供静态替代。

反例/风险

整页卡片同时飞入、后台工具页循环粒子背景、loading 只靠 Lottie 没有文字状态、scroll scrub 控制核心说明且不能跳过、pointermove 每帧 setState、组件卸载后 ScrollTrigger/Lenis 继续监听。

案例分析

Motion 的 useReducedMotion 文档建议把可能引发不适的 x/y 位移动效替换成 opacity、禁用背景视频 autoplay 或关闭 parallax；GSAP 的可访问动效指南用 gsap.matchMedia() 分别处理 no-preference 和 reduce，并提醒大幅 x/y 运动可能触发前庭不适；WCAG 对交互动效和自动移动内容分别设定禁用与暂停/停止/隐藏要求。可学习点是：可访问动效不是“不要动画”，而是为同一状态变化提供更低风险的表达。

来源链接

Motion useReducedMotion: https://motion.dev/docs/react-use-reduced-motion GSAP Accessible Animation: https://gsap.com/resources/a11y/ WCAG Animation from Interactions: https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html WCAG Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html MDN prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion