motion-react - 使用 Motion（原 Framer Motion）构建 React 动画
使用 Motion 库创建 React 动画，支持手势交互、滚动效果、弹簧物理、布局动画、退出动画及运动值。
标签
更新于: 2026-06-30能力
典型输入
典型输出
该技能可以做什么
- 创建 motion 动画组件
- 动画 CSS 属性值
- 配置弹簧与补间过渡
- 处理拖拽交互
- 创建悬停与点击手势
- 构建滚动联动动画
- 实现共享布局动画
- 通过 AnimatePresence 创建退出动画
- 管理运动值与变换
- 定义编排式动画变体
- 优化动画打包体积
输入
- React 项目
- motion npm 包
- CSS 或 Tailwind 样式文件
输出
- 动画化 React 组件
- 手势交互式 UI 元素
- 滚动触发动画效果
- 布局过渡动画
要求
- React 项目环境
- 通过 pnpm/npm 安装 motion 包
- Next.js App Router 需客户端渲染
- popLayout 模式下自定义组件需 forwardRef