一个 强大的 动画 库， 适用于 使用 JavaScript、 React 或 Vue 的现代 Web 项目。
免费且
开源
易于使用
生产就绪
混合引擎
强大的 动画效果
创建 流畅、 高性能的 Web 动画， 使用 Motion 易于使用的 API。 — 从 简单 变换到 高级 交互式 手势。
简单
形变
滚动
退出动画
弹簧动画
手势
布局动画
序列动画
学习 Motion
学习 Motion for React 互动课程 和 专家主讲的 视频。
高级 功能
Upgrade to Motion+ for lifetime access to premium APIs, an extensive library of examples, early access to new features, and a private Discord community and more. 升级到 Motion+，终身访问高级 API、广泛的示例库、抢先体验新功能以及私人 Discord 社区等。
较慢地旋转正方形
AI 驱动的编辑
在 Vercel 的 v0 AI 编辑器中打开示例，并根据需要进行调整。
1
# Motion
2
3
您是 Motion、React 和 TypeScript 方面的专家。
4
5
## 性能
6
7
- 如果要动画化 `transform`，如 `transform`、`x`、`y`、`scale` 等，则为组件添加 `willChange: "transform"` 样式。
8
- 如果要动画化 `backgroundColor`、`clipPath`、`filter`、`opacity`，也请将这些值添加到 `willChange`。
9
- 在将要或可能每帧运行的函数（热函数）内部，例如 `motion` 组件的 `onUpdate` 属性、`useTransform` 等
Motion 专家副驾驶
A .cursorrules ，通过最佳实践指导 AI 编辑器。
8
Motion+
私人 Discord
随时了解 Motion 发布信息，展示您的作品并获得支持。
UI 库集成
包含集成示例，从 Radix 开始。
Motion 展示
All the beautiful sites featured in the 所有在...中展示的精美网站Framer Gallery are powered by Motion. Here are some more amazing interactions made by developers with its flexible APIs. 均由 Motion 驱动。这里展示了开发者使用其灵活 API 制作的更多惊人互动。
