Motion翻译站点

ADADAD固定广告位图片或标题，点击入驻固定广告位图片或标题，点击入驻固定广告位图片或标题，点击入驻

Motion 是一个面向 React、JavaScript 和 Vue 的生产级动画库，由 Framer Motion 独立而来，提供混合引擎、硬件加速和树摇支持。2024 年 11 月正式独立并更名为 Motion，官网为 motion.dev。Motion 采用 MIT 开源许可证，完全免费用于商业项目，同时提供付费 Motion+ 套餐：个人版 $399 一次性付费，商业版 $249/席位/年。开发者可免登录浏览官方文档和 110+ 教程。

核心动画 API：animate 与 timeline

animate 函数用于创建单一元素动画，支持 duration、easing、delay 等参数，并返回 Promise，方便在动画完成后执行回调。timeline 函数则用于编排多步序列动画，通过 offset 控制每一步的起始位置，实现复杂的连续动效。这两个核心 API 覆盖了从简单到复杂的动画需求，且体积小巧：mini animate 函数压缩后约 2.3KB，完整 animate 函数约 18KB。

滚动驱动动画：scroll

scroll 功能允许将动画进度与滚动位置联动，支持 viewport 进入/离开检测。开发者可以轻松实现视差滚动、元素进入动画等效果，无需手动计算滚动偏移。该功能基于 Web Animations API 和 ScrollTimeline 构建，利用浏览器原生能力保证性能。

timeline

Motion 为 React 提供 motion 组件，可直接在 JSX 中声明动画属性。AnimatePresence 支持进入/离开动画，layout 动画实现元素布局变化时的平滑过渡。手势动画包括 hover、tap、drag 等，为交互提供丰富反馈。这些组件与 React 的声明式范式紧密结合，降低了动画实现的门槛。2025 年 3 月，Motion 正式支持 Vue，包含 variants、scroll、layout 动画等功能。Vue 开发者可以使用与 React 类似的 API 编写动画，同时享受 Vue 的响应式系统集成。这一扩展使 Motion 成为少数同时覆盖三大主流前端框架的动画库之一。

与 GSAP 迁移对比

Motion 提供从 GSAP 迁移的官方指南，帮助开发者对比两者差异并逐步替换。GSAP 是成熟的商业动画库，而 Motion 作为开源替代，在体积、框架集成和现代 API 设计上具有优势。对于已使用 Framer Motion 的项目，迁移到 Motion 几乎无缝，因为 Motion 继承了其核心概念并进行了优化。Motion 被 Framer 和 Figma 用于其数百万用户的网站，npm 周下载量超过 3000 万，社区活跃度高。