AI生成Lottie动效开源项目Text-to-Lottie 一键生成轻量动画

Text-to-Lottie是YC孵化的开源项目，让AI Agent如Claude Code通过自然语言生成生产级Lottie动效。自带本地预览播放器和调试闭环，支持逐帧审查与实时反馈，适合开发者和独立设计师快速制作矢量动画，无需After Effects。

Tags:

• Lottie
• AI生成动效
• 开源项目
• 开发者工具
• 动效设计

Lottie 是 Airbnb 开源的一个东西，本质是一份描述矢量动效的 JSON 文件。

因为下面这些优点，现在很多移动端和 Web 上做小动画都用这个开源工具。

• 体积小，一个 loading 动画通常几 KB 到几十 KB
• 矢量绘制，放大不糊
• 一份 JSON 多端适用，iOS、Android、Web 等都能直接渲染
• 能用代码控制：暂停、倒放、绑滚动条、响应点击都行

你日常刷 App 看到的启动动画、点赞的爱心、下拉刷新的小人、空状态的插画。

十有八九都是它，尤其是国外的 APP。

 但是 Lottie 用起来，门槛不低。

正经流程是：设计师在 After Effects 里把动效做出来 → 用 Bodymovin 插件导出 JSON → 开发把 JSON 接到代码里

到了 AI 时代，大家都在想办法。怎么让 AI 来直接生成基于 Lottie 的动画效果？

今天要聊的这个项目，就是想解决这个问题。

01

Text-to-Lottie 是啥

这个开源项目是 diffusionstudio 开源的，也叫 Lottie。 但是对外叫 Text-to-Lottie。

diffusionstudio 是 YC F24 批次的一家公司。

这个开源项目就是让 AI  Agent，比如 Claude Code、Codex 这类工具能生成生产级的 Lottie 动效。

用法很简单，一行命令装好 Skill：

npx skills add diffusionstudio/lottie

然后你在 Claude Code 里直接说话，比如：

"用 text-to-lottie 把桌面的 hello 的SVG 路径做成 Lottie 动画，沿路径自然方向揭示，套个 Apple 风格渐变，ease-in-out，透明背景"。

可以看到还是有一些瑕疵的，可能是这个 SVG 是我随便找的。

我又试了一个："用 text-to-lottie 制作一个动效。效果是苹果的 logo 晃来晃去，最后跳一下缩成一个点消失了。"

02

它和直接让 AI 写 JSON有什么不同

如果只是让 Claude 写一段 Lottie 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 改完动效，自己锁一帧看看，不满意再改。

文件改动 live reload

Agent 改了 lottie.json，浏览器立刻刷新，迭代闭环很短。

这套机制加起来，把 AI 从盲写变成了看着写，质量自然就上来了。

03

官方 Prompt 五条心法

项目 README 里给了五条提示词建议，挺实用的，挑出来给你看：

给真实素材做地基

能提供 SVG、数据、截图就别空着说。AI 基于具体素材做出来的效果好得多。

用动效术语

说 ease-in、ease-out、ease-in-out，AI 听得懂。别光说自然一点。

像摄影师思考

专业动效很多靠镜头运动。推、拉、摇、移、变焦，写进 prompt 里，AI 会用 group 变换模拟出来。

显式声明要哪些控制项

默认生成的动画通常只暴露背景色一个控制。你想要颜色、大小、透明度都能调，就直接说出来。

指定 FPS 和总帧数

需要特定时长或帧率，写清楚。比如"60 FPS，3 秒"。

复杂动效仍需手动微调

AI 现阶段还做不到一键完美。

粒子、精细形变、复杂的物理动效，AI 能打个底，但收尾还是要手动调。Lottie 本身也不擅长粒子这类效果，这点不算它的锅。

动效过去十几年基本是 设计师 + After Effects 的专属领地。AE 这套工具学习曲线挺陡的，工程师和独立开发者基本不会用。

而且协作链路长，改一帧都要设计师回到源文件改完再重新导出。

手写 Lottie JSON 也不现实。今天推荐的这个开源项目可能就是一个解决方案吧。

04
点击下方卡片，关注逛逛 GitHub
这个公众号历史发布过很多有趣的开源项目，如果你懒得翻文章一个个找，你直接关注微信公众号：逛逛 GitHub ，后台对话聊天就行了：