构建优秀的Web应用不仅需要华丽的视觉表现，更需要包容的交互体验。当我们在React中为组件添加各种位移、缩放或旋转动画时，往往会忽略一部分特殊用户的需求。患有前庭功能障碍的用户在观看大幅度移动的元素时，可能会产生眩晕甚至呕吐感。为了照顾这些用户，现代操作系统提供了减弱动态效果的选项。作为开发者，我们需要在React应用中敏锐地捕捉这一系统偏好，并提供相应的动画降级方案。
理解动画减弱偏好与底层媒体查询原理
动画减弱并非是要完全消除所有的过渡效果，而是要将那些可能引起不适的大范围位移、闪烁或视差效果替换为简单的淡入淡出或瞬间切换。在Web标准中，这一需求通过CSS媒体查询特性prefers-reduced-motion来实现。当用户在系统设置中开启相关选项时，该媒体查询条件就会匹配成功。
在传统的纯CSS方案中，我们可以直接在样式表中使用这个特性。通过将具有高强度的动画属性覆盖为较为温和的属性，甚至直接禁用动画。这种做法简单直接，适用于纯样式驱动的交互动效。
@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none;
transition: opacity 0.01ms ease-in-out;
}
}然而，随着前端工程化的发展，许多复杂动画逻辑已经脱离了纯CSS的范畴，转而由JavaScript甚至专门的动画库来驱动。此时，仅仅依赖CSS媒体查询就显得力不从心了，我们需要在React的JavaScript层面获取这一系统状态。
在React中监听系统偏好状态
要在React组件中动态获取用户是否开启了动画减弱功能，我们需要借助浏览器提供的window.matchMedia接口。这个接口允许我们在JavaScript代码中查询特定的媒体查询规则，并监听其状态变化。通过构建一个自定义Hook，我们可以将这一逻辑完美地封装起来，使其在各个组件中复用。
下面是一个名为useReducedMotion的自定义Hook实现。它首先检查当前环境是否支持matchMedia，然后针对prefers-reduced-motion: reduce规则进行匹配。通过添加change事件监听器，我们能够实时响应用系统偏好的切换，并在组件卸载时妥善清理监听器，避免内存泄漏。
import { useState, useEffect } from 'react';
export function useReducedMotion() {
const [reducedMotion, setReducedMotion] = useState(false);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) {
return;
}
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
setReducedMotion(mq.matches);
const handler = (event) => {
setReducedMotion(event.matches);
};
mq.addEventListener('change', handler);
return () => {
mq.removeEventListener('change', handler);
};
}, []);
return reducedMotion;
}这个Hook返回一个布尔值，表示当前是否需要减弱动画。当用户在系统设置中切换状态时，React组件会自动重新渲染，从而应用最新的动画策略。这种基于状态的响应式处理方式，完美契合了React的函数式编程理念。
结合React组件实现动态动画降级策略
获取到系统偏好状态后，下一步就是在组件中实施具体的降级策略。如果项目使用的是内联样式或动态类名，我们可以根据Hook的返回值直接条件渲染。例如，当isReducedMotion为真时，我们将过渡时间设为0，或者将复杂的位移动画改为透明度的变化。
对于使用流行动画库如Framer Motion的项目，处理起来更加优雅。Framer Motion内部其实已经对prefers-reduced-motion进行了支持，但为了更精细的控制，我们仍然可以结合自定义Hook来覆盖默认行为。我们可以配置MotionConfig组件，强制在检测到偏好时禁用所有动画。
import { motion, MotionConfig } from 'framer-motion';
import { useReducedMotion } from './hooks/useReducedMotion';
export function AnimatedBox() {
const shouldReduceMotion = useReducedMotion();
return (
<MotionConfig reducedMotion={shouldReduceMotion ? 'always' : 'user'}>
<motion.div
animate={{ x: shouldReduceMotion ? 0 : 100, opacity: 1 }}
initial={{ x: 0, opacity: 0 }}
transition={{ duration: shouldReduceMotion ? 0 : 0.5 }}
>
尊重用户偏好的内容
</motion.div>
</MotionConfig>
);
}除了引入第三方库，我们在处理路由切换或列表项增删时，也可以利用这个状态。在动画减弱模式下，原本复杂的退场动画可以被简化为直接卸载，这不仅提升了性能，更从根本上尊重了用户的生理需求。通过这种从底层原理到组件实践的全面覆盖，我们的React应用将变得更加友好和健壮。