首先介绍一下背景,Lottie 是由 Airbnb 开源的一套工具。其本质是一份描述矢量动效的 JSON 文件。
由于以下优点,如今无论是移动端还是 Web 端,制作小型动画时开发者通常优先选用 Lottie:
- 文件体积小,一个 loading 动画仅需几 KB 到几十 KB
- 基于矢量绘制,任意缩放均不模糊
- 一份 JSON 文件可跨平台通用,iOS、Android、Web 均能直接渲染
- 支持代码控制:暂停、倒放、绑定滚动条、响应点击等交互操作
日常使用 App 时常见的启动动画、点赞爱心、下拉刷新小人、空状态插画等,十有八九都基于 Lottie 实现。尤其在海外应用中,它几乎成为标配。
但说实话,真正将其投入实际应用,门槛并不低。
传统的标准流程是:设计师首先在 After Effects 中制作动效,然后通过 Bodymovin 插件导出 JSON,最后开发人员将 JSON 集成到代码中。流程冗长,沟通成本居高不下。
进入 AI 时代后,业界共同思考一个问题:如何让 AI 直接生成基于 Lottie 的动画效果?
今天要介绍的这个开源项目,正是为了攻克这一难题而诞生。
01. Text-to-Lottie 是什么
这个开源项目由 diffusionstudio (YC F24 批次的公司)开发。项目本身的名称也是 Lottie,但对外更常用的称呼是 Text-to-Lottie。
其核心目标是让 AI Agent(如 Claude Code、Codex 等工具)能够生成可直接用于生产环境的 Lottie 动效。


经过几次测试,效果确实出来了,不过部分细节仍可见瑕疵,这可能与我随意选用的 SVG 素材也有关。
随后又测试了一个提示词:“用 text-to-lottie 制作一个动效,效果是苹果 logo 晃来晃去,最后弹跳一下并缩成一个点消失。”
02. 它与直接让 AI 编写 JSON 有何不同
你可能会问,如果只是让 Claude 直接生成一段 Lottie JSON,岂不是更简单?
区别非常大。直接拿到 JSON,你得到的只是一段代码。想要查看效果,需要自行搭建页面、集成 lottie-web、打开浏览器、反复调试。最关键的是,AI 无法看到自己生成的内容实际运行的效果,出错也无法自行修正。
Text-to-Lottie 则实现了完整的闭环。
内置官方播放器
它配套提供了一个完整的播放器项目,基于 Vite + SolidJS + Skia WASM 渲染。只需执行一行 npm run dev 命令,即可启动本地预览页面。Agent 生成完 JSON 后,浏览器中能立即看到效果,省去了手动搭建环境的繁琐步骤。
Agent 可自行查看播放状态
这是整个设计中最精妙的一处。播放器在本地启动了一个 /__context 端点,Agent 可以直接读取当前播放的场景、帧数进度以及总帧数。这意味着 Agent 完成动效编写后,能够自行检查结果,而非依赖用户截图反馈。
像设计师一样逐帧审阅
在 URL 中添加 ?frame=60 参数后,画面会直接跳转到第 60 帧并暂停,方便截图检查。Agent 修改完动效后,可以自行锁定某一帧查看效果,不满意再调整,如同设计师手动审稿般自然。
文件变动实时重载
Agent 修改 lottie.json 后,浏览器会立刻刷新,迭代闭环极短。
这套机制组合起来,将 AI 从“盲写”转变为“看着写”,生成质量自然得以提升。
03. 官方提示词五条心法
项目的 README 文件中提供了五条实用的提示词建议,现直接列出供参考:
以真实素材为基础
能够提供 SVG、数据或截图时,尽量提供具体素材。AI 基于实际素材生成的效果会显著更好。
使用动效专业术语
使用 ease-in、ease-out、ease-in-out 等术语,AI 能够准确理解。避免仅说“自然一点”这类模糊描述。
像摄影师一样思考
专业动效常常依赖镜头运动。将推、拉、摇、移、变焦等动作写入提示词中,AI 会利用 group 变换来模拟实现。
明确声明所需控制项
默认生成的动画通常只暴露背景色一个控制参数。如果需要颜色、大小、透明度等均可调节,请直接在提示词中明确说明。
指定帧率与总帧数
若需要特定时长或帧率,请明确写出。例如:“60 FPS,3 秒”。
复杂动效仍需手动调优
必须承认,AI 目前还无法做到一键完美。对于粒子、精细形变、复杂物理动效等,AI 可以帮你打好基础,但最终调整仍需手动完成。话说回来,Lottie 本身也不擅长粒子这类效果,因此这并非它的不足。
过去十几年,动效制作基本是“设计师 + After Effects”的专属领域。AE 工具的学习曲线较为陡峭,工程师和独立开发者通常较少涉及。此外,协作链路过长,每次修改一帧都需要设计师回到源文件进行修改并重新导出。手动编写 Lottie JSON 更是不切实际。
个人认为,今天推荐的这一开源项目,或许是现阶段一个相当可行的解决方案。
