Lottie Creator 界面六区——浏览器里也能做动效
Creator 是什么
Lottie Creator 是 LottieFiles 提供的浏览器端动效制作工具，不需要安装任何桌面软件——打开 creator.lottiefiles.com 就能用。它的定位是：不会 After Effects 的设计师也能从零创作专业级的 Lottie 动效，同时支持 AI 辅助、状态机交互、Motion Tokens 数据绑定等高级功能。
界面六区
Lottie Creator 的界面组织成六个核心区域，理解了它们的分工就能快速上手：
1. 顶部工具栏（Header Toolbar）
- 文件操作：新建 / 打开 / 导入（支持拖拽 JSON、dotLottie、SVG）/ 保存。
- 预览控制：播放、暂停、逐帧前进/后退、循环模式切换。
- 画布缩放：100%、适应窗口、滑块缩放。
2. 左侧面板（Left Panel）
图层列表、形状库、SVG 导入区。在这里创建新的形状图层、导入外部矢量素材、管理图层层级关系。和 AE 的时间轴图层区位置相同，思路也一致。
3. 画布（Canvas）
动效的实时预览区域——你在这里拖动物体、调整变换参数、预览动画效果。和 AE 的合成预览窗口功能相同。
4. 右侧面板（Right Panel）
属性编辑器——选中画布上的某个物体后，这里显示它的形状、填充、描边、渐变、变换等属性。和 AE 的效果控制面板功能相同。
5. 时间轴（Timeline）
整个动画的关键帧编辑器。在时间轴上添加关键帧、调整关键帧位置、用 Graph Editor 调整缓动曲线。这是动效设计的核心操作区。
6. 播放控件（Player Controls）
画布底部的小型播放条——时间输入框、播放/暂停、循环开关。快速预览动效时用，精确时间导航比顶部工具栏方便。
和 After Effects 的对比
| 维度 | After Effects | Lottie Creator |
|---|---|---|
| 运行位置 | 桌面软件 | 浏览器 |
| 安装 | 需要购买 + 下载 | 免安装、LottieFiles 账号登录即可 |
| 关键帧 | 完整支持，表达式强大 | 基础关键帧 + Graph Editor，无表达式 |
| 图层类型 | 形状、位图、3D、调节、文本 | 形状、SVG、文本（有限）、位图 |
| 导出 | Bodymovin → JSON | 直接导出 JSON / dotLottie |
| AI 辅助 | 无 | Motion Copilot（AI 文本生成动效） |
| 状态机 | 不支持（需要在 SDK 端写） | 原生支持 |
| 费用 | Adobe 订阅 | LottieFiles 订阅（有免费试用） |
快速上手路径
- 打开 creator.lottiefiles.com，注册 LottieFiles 账号。
- 点 "Create New Animation"。
- 从左侧面板创建形状（矩形 / 椭圆 / 路径）。
- 在时间轴上选中第 0 帧，在右侧面板改一个属性（比如位置 X），然后点 "Add Keyframe"。
- 跳到第 30 帧，改同一个属性，自动生成第二个关键帧。
- 点播放按钮预览，保存后导出 JSON 或 dotLottie。