diffusionstudio/lottie · 上手攻略

• 仓库：diffusionstudio/lottie
• 链接：https://github.com/diffusionstudio/lottie
• 分类：multimodal · trending · research
• 作者：Jay
• 更新：2026-07-06

这是什么

lottie 是 Diffusion Studio 出品的开源 Skill（工具包），让 Claude Code 或 Codex 等 Coding Agent 通过自然语言指令直接生成可投产级别的 Lottie 动画 JSON 文件。

它的核心工作流是：你在对话中描述想要的动画效果（基于 SVG、截图或真实数据），Agent 调用 diffusionstudio/lottie skill，自动搭建运行环境，生成 .json 动画文件，你可以在浏览器/App/游戏/网页中直接使用。

简单说：用自然语言让 AI 帮你写 After Effects 级别的 Lottie 动画代码。

解决什么问题

Lottie 动画传统制作流程有三大障碍：1）需要 After Effects + Bodymovin 插件的专业知识；2）动画代码（Lottie JSON 格式）语法复杂，手写门槛极高；3）设计-开发之间的"翻译损耗"——设计师出图，开发再重实现。

lottie 的解法是让 AI agent 直接消费「动画意图」（"用 ease-in-out 缓动让路径沿自然方向展开，加一个高级苹果风格渐变"），然后生成符合 Lottie spec 的 JSON。你不需要懂 Lottie 格式规范，只需要描述运动感。

快速安装

前置要求

• Node.js 16+（skill 安装时需要）
• 一个支持 Skills 的 Coding Agent：Claude Code 或 Codex（或其他兼容 Skills API 的 Agent）

安装 skill

# 在终端/Codex/Claude Code 对话中执行
npx skills add diffusionstudio/lottie

安装完成后，在 Agent 对话中直接用自然语言描述你的动画需求即可。

核心用法

基本工作流

Step 1. 安装 skill：

npx skills add diffusionstudio/lottie

Step 2. 在 Agent 对话中用自然语言描述动画，例如：

Create a Lottie animation from the SVG path in
https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg.
Reveal the path with an animation that follows the natural path direction.
Apply a premium apple themed gradient to the path.
Use ease-in-out timing, a transparent background, and preserve the original SVG geometry.

Step 3. Agent 会： 1. 解析 SVG 内容 2. 搭建本地 Lottie player 环境（每个项目自动生成 public/projects/<project>/<scene>/lottie.json） 3. 生成 Lottie JSON 文件 4. 实时在 player 中预览，Agent 边改边刷新

Step 4. 完成后导出 lottie.json，集成到你的 App/网页。

生成文件结构

public/projects/<project-name>/
  <scene-name>/
    lottie.json    ← 主要动画文件
    player.html    ← 本地预览用

支持多种渲染方式

生成的 lottie.json 是标准 Lottie 格式，可用以下方式渲染：

网页（直接用 lottie-web）：

<script src="https://unpkg.com/lottie-web/build/player/lottie.min.js"></script>
<div id="anim"></div>
<script>
  lottie.loadAnimation({
    container: document.getElementById('anim'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/animations/my-animation.json'
  });
</script>

React Native（用 Shopify Skia）：

import { Skia, Canvas, Skottie, useClock } from "@shopify/react-native-skia";
import { useDerivedValue } from "react-native-reanimated";

const animation = Skia.Skottie.Make(JSON.stringify(require("./animation.json")));

export default function Loader() {
  const clock = useClock();
  const frame = useDerivedValue(
    () => ((clock.value / 1000) % animation.duration()) * animation.fps()
  );
  return (
    <Canvas style={{ width: 200, height: 200 }}>
      <Skottie animation={animation} frame={frame} />
    </Canvas>
  );
}

iOS（用 lottie-ios）：

import Lottie

let animationView = LottieAnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
view.addSubview(animationView)
animationView.play()

Android（用 lottie-android）：

// build.gradle
dependencies {
    implementation("com.airbnb.android:lottie:latest")
}

// Kotlin
val view = findViewById<LottieAnimationView>(R.id.animationView)
view.setAnimation(R.raw.animation)
view.loop(true)
view.playAnimation()

提示工程技巧（获得更好结果）

官方文档给出了几条让 AI 生成更高质量动画的技巧：

1. 提供具体素材，不只描述："提供 SVG、真实数据或截图"比纯文字描述效果好得多。动画基于具体 asset 时，Agent 输出质量显著更高。

2. 用运动设计术语：描述时用 ease-in、ease-out、ease-in-out 等专业缓动术语，而非"快开始慢结束"这种模糊描述。

3. 加入摄像机语言：专业动态图形往往依赖镜头运动，提示中加入"camera push"、"pan"、"zoom"等术语可以让动画更专业。

4. 指定帧率和时长：需要精确控制时，在提示中加入目标 FPS 和总帧数，例如 "60fps, 180 frames total"。

5. 显式要求可定制属性：默认输出通常只暴露背景色控制，想要其他可配置项（如颜色、速度）需要在提示中明确要求 Agent 创建对应的控制参数。

6. 相机运动："Include camera pushes, pans, zooms, and rig-like motion" 这类提示对专业感提升显著。

典型适用场景

1. App 加载动画 / 空状态动画：设计师出图后，开发用 lottie 直接生成 Lottie JSON，不需要 After Effects。
2. 营销页交互动效：让 Claude Code 生成动画 JSON，嵌入到 React/Vue 等前端项目。
3. 游戏 UI 动画：Lottie 广泛用于游戏内 icon 动画、特效动画。
4. 跨平台动画复用：一次生成，iOS/Android/Web 多端使用。
5. 快速原型验证：产品经理描述动画意图，Agent 立即生成可运行的动画 demo。

坑与注意

1. Skill 需要 Node.js 环境：Node.js 16+ 是安装 skill 的前提，服务器环境需确认已安装。

2. Agent 输出质量依赖 prompt 质量：lottie 本身不决定动画好不好看，决定因素是描述是否具体清晰。同样是"做一个动画"，详细描述路径展开 + 渐变色 + 缓动参数，比"做一个好看的动画"效果好很多。

3. 生成的 JSON 仍需人工 review：AI 生成的 Lottie JSON 可能有微小的不规范之处，生产环境建议在 After Effects 或 LottieLab 等工具中预览后再集成。

4. 项目成熟度为 research：README 标注成熟度为 research，不建议在 mission-critical 生产流程中完全依赖其输出，建议保持人工审核环节。

5. 预览 player 依赖本地服务：Agent 生成的 player.html 需要本地 HTTP 服务才能预览，文件协议下 lottie-web 可能无法正常加载。

6. 复杂交互动画受限：纯展示性动画生成效果好，涉及复杂用户交互（如点击触发、分支动画）的 Lottie 场景仍需要手动编码。

7. SVG 质量决定动画基础：输入 SVG 的 geometry 质量直接影响动画效果，脏乱 SVG 生成的动画通常也不理想。

8. Gradient/Lottie 兼容性：Lottie 对某些复杂渐变和滤镜支持有限，Agent 生成的动画如果用了 Lottie 不支持的特性，可能在特定播放器中显示异常。

与同类对比

结论：diffusionstudio/lottie 的差异化在于Coding Agent 集成——你不需要打开任何图形工具，直接在终端或 IDE 对话中描述需求，动画就生成了。对于已经习惯用 Claude Code/Codex 编程的开发者，这是最高效的路径。缺点是目前 research 阶段，不适合对动画质量有严苛要求的商业项目。

一句话推荐结论

diffusionstudio/lottie 是 AI 编程时代生成 Lottie 动画的新姿势——用自然语言让 Agent 写动画代码，适合已经在用 Claude Code/Codex 的开发者快速出原型，但生产级项目仍建议人工 review 输出质量。