一句文本生成Lottie动画：开源项目让动效设计进入AI时代

你有没有遇到过这样的困境：产品经理说”按钮点击加个动效”，设计师丢来一个 After Effects 源文件，你得打开 AE、装 Bodymovin 插件、调参数、导出 JSON，然后祈祷它在移动端不要卡顿——整个过程动辄一两个小时。对于动效设计来说，这几乎是每个前端开发者的日常痛点。

但如果告诉你，现在只需要一句话——”帮我做一个带弹性效果的加载动画，30fps，150帧，透明背景”——AI 就能直接给你一个生产可用的 Lottie JSON 文件呢？

这就是 diffusionstudio/lottie 要做的事情。

项目核心：AI 智能体 + Skia 渲染器 = 即时动画生成

[diffusionstudio/lottie](https://github.com/diffusionstudio/lottie) 是一个开源技能工具包，它在 GitHub 上已获得 1438 颗星，由 Diffusion Studio 团队开源。项目的本质是一个”Agent Harness”——它为 Claude Code、Codex 等 AI 编码助手提供了一套完整的技能（Skill）和本地播放器环境，使 AI 能够直接编写符合 Lottie 规范的 JSON 动画文件，并即时在浏览器中预览效果。

与传统的”AI 生成动效”概念不同，这个项目不依赖任何生成式视觉模型或扩散模型。它走的是程序化生成路线：AI 智能体读取一个精心编写的 `text-to-lottie` 技能定义，该技能包含了 Skia/Skottie 渲染引擎对 Lottie JSON 的格式要求、图层结构规范、关键帧动画语法、贝塞尔缓动曲线定义，以及 Sketch 原生”Slots”可编辑属性的声明方式。智能体根据这些规则，配合用户的自然语言描述，直接编写出结构正确、可渲染的 Lottie JSON 代码。

技术栈上，项目使用 React + shadcn/ui + TypeScript 构建控制界面，底层依赖 Skia CanvasKit 的 Skottie 模块（WebAssembly）进行动画渲染。与网页端常用的 `lottie-web` 库不同，Skottie 是 Google Skia 图形引擎的原生 WASM 实现，渲染性能远优于 JS 方案，对复杂矢量路径、渐变、遮罩的支持也更加完整。项目内置的 Vite 开发服务器会监听 `public/lottie.json` 文件变化，保存即自动热更新——这意味着 AI 智能体每写入一个新的动画文件，浏览器立即刷新呈现，形成”描述→生成→预览→调整”的极短反馈闭环。

安装过程极其简单：

npx skills add diffusionstudio/lottie

这一行命令会将 `text-to-lottie` 技能注册到 AI 编程助手中。随后只需对 Claude Code 或 Codex 说”帮我用 text-to-lottie 生成一段动画”，智能体就会自动创建项目、安装依赖、编写 JSON 并启动本地预览服务器。当然，也可以手动克隆仓库，执行 `npm install && npm run dev` 完成搭建。

为什么 Lottie + AI 是一个值得关注的组合？

要理解这个项目的价值，得先明白 Lottie 格式为什么重要。

Lottie 是 Airbnb 开源的一种动画格式，本质上是 JSON 描述的矢量动画数据。它由 Adobe After Effects 的 Bodymovin 插件导出，文件体积极小——一个几十 KB 的 JSON 文件就能替代数 MB 的 GIF 或视频。更关键的是，Lottie 基于矢量图形，无限缩放不失真，且被 iOS、Android、Web、React Native 等全平台原生支持。正因如此，它已成为移动应用微交互、加载动画、品牌动效的事实标准——LottieFiles 平台上已有超过 25 万设计师和开发者使用该格式。

但问题的关键在于生产流程的门槛：传统上，一个 Lottie 动画需要设计师在 After Effects 中逐帧制作，然后通过 Bodymovin 导出，再交付给开发者。这个过程不仅要求设计师掌握 After Effects，还涉及到沟通成本、版本管理、反复调整等一系列协作摩擦。对于没有动效设计师的团队，或者需要快速迭代的场景，这个流程过于笨重。

diffusionstudio/lottie 把这个流程压缩成了一条指令。你不需要打开 After Effects，不需要了解 Bodymovin 的参数配置，甚至不需要会画矢量图——只要有清晰的需求描述，AI 就能直接输出可用的 Lottie JSON。

使用场景、对比与适用边界

这个项目的目标用户非常明确：前端工程师、移动端开发者，以及需要快速产出微动效的产品团队。典型场景包括：

– 应用引导页和空状态：一个有趣的加载动画比静态占位图更能留住用户；

– 按钮与交互反馈：点击、滑动、提交成功等微交互的动效增强；

– 品牌 Logo 动效：让品牌标志以动效方式呈现，提升仪式感；

– 数据可视化：将实时数据（如股票蜡烛图）转化为动态演进的 Lottie 图表；

– 社交媒体内容：快速生成带节奏感的动画片段用于社媒传播。

在实际效果上，社区反馈相当热烈。有用户实测后评价：”你可以一次就生成生产级动画，完全不需要动效软件”；另一位用户说：”等了这么久的东西终于来了 🔥”。项目作者也公开分享了提示词指南——提供 SVG 素材、使用缓动术语（ease-in/out）、指定帧率和时长、要求开放 Skottie Slots 实现调色盘等可编辑属性——这些技巧能大幅提升生成质量。

当然，它并非万能。项目文档明确指出了边界：text-to-lottie 最适合短小精悍的单场景动效和 SVG 动画。如果需要多镜头合成、音频轨道、视频输出，应该选择 Remotion（React 驱动的视频合成框架）而不是这个项目。两者的分工很清晰——Lottie 走轻量、矢量、程序化路线，Remotion 走完整视频制作路线。

与 LottieFiles 的 AI 生成工具相比，diffusionstudio/lottie 的优势在于完全开源、本地运行、无 API 限制。LottieFiles 的 AI 功能需要接入其云端服务，而 diffusionstudio/lottie 的所有能力都跑在本地——AI 智能体 + Skia WASM 渲染器 + 热更新开发服务器，没有任何外部依赖。对于注重数据隐私、需要离线使用或希望深度定制流程的团队来说，这无疑是更优选择。

在不到半年的时间里，这个项目从零积累到 1438 颗星、23 次提交，社区关注度仍在快速增长。它证明了一件事：AI 编程智能体不只会写业务代码——它正在进入创意工具领域，让动效设计从”少数人的专业技艺”变成”人人都能调用的基础设施”。对于任何需要在产品中加入动效的开发者来说，这无疑是一个值得立刻尝试的开源利器。

— END —
LC 智趣厅 · 科技与生活的交点
ihygg.cn