prefersReducedMotion: () =>
matchMedia("(prefers-reduced-motion: reduce)").matches,
prefersMotion: () =>
matchMedia("(prefers-reduced-motion: no-preference)").matches,
···
功能分析
prefersReducedMotion:
检测用户是否启用了减少动画或运动的偏好设置。
如果启用了,matchMedia("(prefers-reduced-motion: reduce)").matches
会返回 true。
表示用户希望减少不必要的动画或视觉运动。
prefersMotion:
检测用户是否没有特别的减少运动偏好(默认允许动画)。
如果没有特别偏好,matchMedia("(prefers-reduced-motion: no-preference)").matches
会返回 true。
表示用户对动画或视觉运动没有限制,可以正常显示动画。
使用 prefers-reduced-motion
的重要性(尤其是在 GSAP 或自定义动画中)
1. 提升用户体验
用户多样性: 有些用户(尤其是有视觉敏感或晕动症倾向的人)会对复杂动画感到不适。
如果忽视这些用户偏好,可能导致糟糕的用户体验,甚至用户放弃使用你的网站。
尊重用户设置: 使用 prefers-reduced-motion
确保动画适配用户需求。