# 运动 Motion 是一个适用于 React 和 JavaScript 的生产级动画库——以前称为 Framer Motion，现在独立并扩展为支持 vanilla JS 和其他框架。 ## 文档 * **文档**： ## 关键能力 * **声明性动画** ：“motion”组件通过“initial”、“animate”和“exit”属性进行动画处理 - 无需手动 DOM 操作 * **变体**：跨组件树共享命名动画状态，具有自动交错和编排功能 * **退出动画** : `AnimatePresence` 不断卸载 DOM 中的组件，直到它们的 `exit` 动画完成 * **布局动画** ： `layout` 属性使用 FLIP 技术自动为任何 CSS 布局更改设置动画 * **手势** ：内置 `whileHover`、`whileTap`、`whileDrag` 和 `whileFocus` 属性，具有完整的事件回调 * **运动值** ： `useMotionValue` 和 `useTransform` 创建可组合的、类似信号的值，这些值在 React 的渲染周期之外更新 * **命令式 API** ：用于编程控制的“animate()”函数和“useAnimate”挂钩，可在 React 外部使用 * **弹簧物理** ：默认过渡是基于弹簧的；配置 `type: "spring"`、`stiffness`、`damping`、`mass` * **滚动动画** ：`useScroll` 和 `useTransform` 用于不带滚动事件侦听器的滚动链接动画 ## 最佳实践 * **包现在是 `motion`，从 React 的 `motion/react` 导入** — 旧的 `framer-motion` 包仍然可以作为兼容性垫片，但新项目应该安装 `motion` 并从 `motion/react` 导入。切勿在同一项目中混合使用两个包的导入。 // 正确（新）从“运动/反应”导入{运动，AnimatePresence} // 旧的（仍然有效但已弃用）从“framer-motion”导入{motion，AnimatePresence} * **`AnimatePresence` 需要子级上不断变化的 `key` 属性 - 缺少 key 意味着退出动画永远不会触发** - `AnimatePresence` 通过子级的 `key` 来跟踪它们。如果关键点保持不变，Motion 将看不到卸载，并且完全跳过“退出”动画。总是给动画孩子一个与变化相关的钥匙。 // 错误 — 键永远不会改变，退出动画被跳过 <动画存在> {show && 你好} // 正确 - 内容更改时键也会更改 <动画存在> {show && 你好} * **使用“&&”进行条件渲染会绕过“AnimatePresence”** — 当您编写“{condition && component}”时，当“condition”为 false 时，React 会立即从树中删除该元素。 `AnimatePresence` 永远没有机会播放退出动画。始终将条件作为子项放置在“AnimatePresence”内部，而不是外部。 // 错误——组件在退出动画播放之前被移除 {可见&& ( <动画存在> )} // 正确 — AnimatePresence 控制卸载 <动画存在> {isVisible && } * **跨单独组件的布局动画需要 `LayoutGroup`** — `layout` 属性对元素自身的位置/大小变化进行动画处理。当一个组件中的布局更改应触发同级或不相关组件中的布局动画时，请将它们全部包装在“LayoutGroup”中。如果没有它，每个组件都会独立动画，并且效果看起来不连贯。从“motion/react”导入{LayoutGroup} <布局组> {/* 布局道具内部 */} {/* 内部的布局属性 - 将与侧边栏协调 */} * **`useMotionValue` 和 `useTransform` 值不会触发重新渲染 - 不要在渲染逻辑中读取它们** - 运动值同步更新并绕过 React 的协调器以提高性能。在渲染中使用“.get()”读取运动值会返回一个快照，该快照不会导致组件在更改时重新渲染。使用“useMotionValueEvent”或“useTransform”对更改做出反应，或使用“motion”组件道具将它们绑定到 DOM。 const x = useMotionValue(0) // 错误 — x.get() 不会触发重新渲染，显示的值将过时返回

位置：{x.get()}

// 正确 - 绑定到运动组件 prop； Motion 直接更新 DOM 返回 // 正确 — 使用 useMotionValueEvent 订阅更改 useMotionValueEvent(x, "更改", (最新) => console.log(最新)) * **`motion` 组件仅限 React； `animate()` 是与框架无关的命令式 API** — 仅在 React 组件树中使用 `motion.div`、`motion.span` 等。对于实用函数、vanilla JS 或外部 JSX 中的动画，请使用从“motion”（而不是“motion/react”）导入的“animate()”函数。 `useAnimate` 是一个 React hook，它为组件内的复杂序列提供范围内的命令式 API。 // React 组件——使用运动组件从“运动/反应”导入{运动} const Card = () => // Vanilla JS / 实用程序 — 使用“motion”中的 animate() 从“运动”导入 { animate } 动画（“#box”，{不透明度：1}，{持续时间：0.3}） // React 中的复杂序列——使用 useAnimate 从“运动/反应”导入{useAnimate} const [范围，动画] = useAnimate()

运动

包含技能