Motion

Motion（前身为 Framer Motion）是一个面向现代 Web 开发的生产级动画库，支持 React、JavaScript 和 Vue。它采用混合引擎（JavaScript 与硬件加速浏览器 API 结合），在保持小体积的同时实现高性能动画。Motion 完全免费，基于 MIT 许可证开源，已被 Framer、Figma 等平台用于数十万个网站。

Motion 提供丰富的动画 API：独立变换（x、y、rotate、scale 可在同一元素上独立设置）、滚动驱动动画（利用 ScrollTimeline）、原生手势（悬停、按压、拖拽）、布局动画（自动处理两个布局间的过渡）、弹簧物理动画、退出动画（借助 AnimatePresence 让元素离开时保持动画）、时间线序列以及 Motion Values 实时驱动动画状态。此外，Motion 还内置了 AnimateView 组件，用于处理视图过渡动画。

Motion 附带大量现成示例（410+ 可复制粘贴的代码片段）和 Motion UI（预制的性能评级动画组件与区块，支持设计系统令牌继承）。AI Kit 功能允许开发者将 Motion 上下文传递给 AI 代理，帮助其理解 Motion API 并生成代码。

适用人群：Web 前端开发人员、React/Vue/JavaScript 开发者、UI/UX 设计师、需要高性能交互动效的团队。

使用方式：通过 npm 或 yarn 安装 motion 包，导入所需组件和钩子（如 motion、useMotionValue、scroll、gestures 等）。Motion 的 API 设计简洁，与 React 深度融合，官方文档提供各运行时（React、JavaScript、Vue）的入门指南。

注意事项：Motion 主要面向现代浏览器，对老旧浏览器可能缺乏完整支持。虽然核心库免费，但 Motion+（包含 AI Kit 和 Motion UI）为付费订阅产品。动画性能受硬件和设备影响，建议使用 MotionScore 进行性能审计。