无障碍性

动画可能会对可用性产生严重影响，甚至在某些人身上引起晕动病。

所有现代操作系统都提供一个名为“减少动态效果”的设置，人们可以在其中表明他们更喜欢较少的物理动态效果，无论是出于个人偏好还是因为他们可能会遭受晕动病。

已经有一些关于*为什么*以及*如何*设计无障碍动画的优秀指南，例如以下网站上的指南A List Apart和Smashing Magazine。主要要点是，对于启用“减少动态效果”的用户，我们应该保留教育性过渡效果，但要注意晕动病。

这意味着用不透明度过渡替换大型元素上的 transform 动画，禁用自动播放视频，并禁用视差动画。

Motion for React 提供了 API，可以轻松地尊重这些用户的偏好。在本指南中，我们将学习如何使用 reducedMotion 选项和 useReducedMotion 钩子来使我们的动画更易于访问。

自动

reducedMotion 选项可以在 MotionConfig 上设置，以定义您希望如何遵守“减少动态效果”设置。

通过将 reducedMotion 设置为 "user"，所有 motion 组件将自动禁用 transform 和布局动画，同时保留其他值（如 opacity 和 backgroundColor）的动画。

import { MotionConfig } from "framer-motion"

export function App({ children }) {
  return (
    <MotionConfig reducedMotion="user">
      {children}
    </MotionConfig>
  )
}

Framer, 这个无代码网站构建器使用了此 API，并通过 站点设置 > 无障碍性 中的设置公开了它。

此外，您还可以允许用户仅针对您的站点覆盖“减少动态效果”，方法是根据他们的个人资料将 reducedMotion 设置为 "always" 或 "never"。

<MotionConfig reducedMotion={userSetting}>

手动

虽然 reducedMotion 是一个很好的通用工具，用于确保整个站点上的动画都易于访问，但可以使用以下工具创建更定制化的解决方案：的useReducedMotion钩子.

此钩子返回 true/false，具体取决于您的访问者是否启用了“减少动态效果”。

import { useReducedMotion } from "framer-motion"

// In your componentconst
shouldReduceMotion = useReducedMotion()

我们可以使用此布尔值来修复一些常见的无障碍性问题，例如以下问题。

用 opacity 替换 transform

当在 iOS 上启用“减少动态效果”时，操作系统仍然会在状态之间进行动画处理，以帮助用户在每个上下文之间进行过渡。但是，它不是使用默认的缩放和 x/y 动画，而是淡入和淡出内容。

我们可以在 Motion 中通过根据 useReducedMotion 是否返回 true 来将不同的值传递给 animate 来实现这一点。

function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  let animate

  if (isOpen) {
    animate = shouldReduceMotion ? { opacity: 1 } : { x: 0 }
  } else {
    animate = shouldReduceMotion
      ? { opacity: 0 }
      : { x: "-100%" }
  }

  return <motion.div animate={animate} />
}

禁用自动播放视频

useReducedMotion 不仅与 Motion 兼容。它返回一个简单的布尔值，因此您可以将其用于任何目的，例如禁用背景 video 元素的自动播放

function BackgroundVideo() {
  const shouldReduceMotion = useReducedMotion()

  return <video autoplay={!shouldReduceMotion} />
}

禁用视差

对于容易晕动病的人来说，视差动画可能会非常令人不适。

为了构建视差效果，我们通常从 useViewportScroll 获取 scrollY，并通过将其传递给 useTransform 来创建一个新的 MotionValue，这将随着滚动值的变化更新 motion 组件的 y 位置。

为了在减少动态效果设备上禁用此功能，我们可以有条件地将此 MotionValue 传递给动画元素。

function Parallax() {
  const shouldReduceMotion = useReducedMotion()
  const { scrollY } = useViewportScroll()

  const y = useTransform(scrollY, [0, 1], [0, -0.2], {
    clamp: false,
  })

  return (
    <motion.div style={{ y: shouldReduceMotion ? 0 : y }} />
  )
}

结论

我们已经学会了使用 Motion for React 来尊重用户的“减少动态效果”设置。 reducedMotion 选项使在整个站点上实施变得简单，而 useReducedMotion 可以帮助我们使用任何 React API 创建定制的无障碍性策略。