# Lottie Animation

> 一句话让 Claude Code 生成轻量 Lottie 动画动效。内置 Prompt 优化层：在调用 text-to-lottie 生成前， 自动基于五条心法（FPS/帧数、控制项、素材、缓动、镜头运动）优化你的 prompt，展示优化版让你修改确认后再生成。 基于 diffusionstudio/lottie (YC F24)。Trigger keywords: Lottie 动画, Lottie animation, 生成动效, 动画动效, text-to-lottie, 轻量动画, SVG 动画, 启动动画, 点赞动效, 微动效, motion graphics, 做个小动画, 生成一个动画, 帮我做个动效, 生成 Lottie, lottie json, 矢量动效。

- Skill: `zhouyinlong-lab/lottie-animation` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add zhouyinlong-lab/lottie-animation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhouyinlong-lab/lottie-animation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: zhouyinlong-lab (https://skillmd.com/u/zhouyinlong-lab)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhouyinlong-lab/lottie-animation

---


# Lottie 动画生成 + Prompt 优化层

> 用一句话让 Claude Code 生成轻量 Lottie 动画动效。内置 Prompt 优化层，确保每次生成前你的 prompt 都经过五条心法打磨。

## 背景：什么是 Lottie / text-to-lottie

**Lottie** 是 Airbnb 开源的一种矢量动效格式——本质是一份描述矢量动画的 JSON 文件，一份 JSON 多端适用（iOS / Android / Web）。你日常刷 App 看到的启动动画、点赞爱心、下拉刷新小人、空状态插画，十有八九都是它。

**text-to-lottie**（diffusionstudio，YC F24）解决了传统动效开发的核心痛点：
- **传统流程**：设计师 AE 做动效 → Bodymovin 导出 JSON → 开发接代码。链路长、改一帧都要回到源文件
- **text-to-lottie**：Agent 生成 Lottie JSON → 本地浏览器实时预览 → Agent 自己读播放状态 → 不满意再改，闭环极短

它配套了完整的播放器项目（Vite + SolidJS + Skia WASM 渲染），支持 live reload、逐帧审查（Agent 可以直接读当前第几帧/总帧数/在播哪个场景）。

**安装上游 skill**：`npx skills add diffusionstudio/lottie`

---

## 核心工作流：Prompt 优化 → 确认 → 生成

本 skill 在 text-to-lottie 之上增加了一个 **Prompt 优化层**。每次生成动画前，先优化你的 prompt，确认后再执行。

### 完整流程

```
用户描述想要的动效
       │
       ▼
┌──────────────────────┐
│ ① Prompt 分析与优化   │  基于五条心法，自动补全缺失信息
│    输出：优化版 prompt │
└──────────┬───────────┘
           │
           ▼
┌──────────────────────┐
│ ② 用户审阅            │  ← AskUserQuestion
│    · 确认：直接生成    │    展示优化版 prompt
│    · 修改：手动调整    │    等用户决定
│    · 取消：重新描述    │
└──────────┬───────────┘
           │
           ▼  (用户确认后)
┌──────────────────────┐
│ ③ 调用 text-to-lottie│  用最终 prompt 生成 Lottie 动画
│    生成 + 预览        │
└──────────────────────┘
```

---

## 五条 Prompt 优化心法

收到用户的动效需求后，按以下五条规则逐项检查和优化：

### 规则 1：指定 FPS 和总帧数

> "60 FPS，3 秒"、“30 FPS，2 秒循环”

- 如果用户没说帧率，默认补上 **60 FPS**
- 如果用户没说时长，根据动效复杂度推断：简单动效 2 秒，中等 3 秒，复杂 4-5 秒
- 如果是要循环播放的，加上 "loop"

### 规则 2：显式声明要哪些控制项

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

- **颜色**：主色、辅色、背景色、渐变方向
- **大小**：缩放比例、尺寸约束
- **透明度**：淡入淡出、闪烁
- **位置**：居中、偏移、跟随路径
- 如果用户没指定，根据动效内容合理推断并补上

### 规则 3：能提供素材就别空着说

> AI 基于具体素材做出来的效果好得多。

- 用户提到了 SVG 路径？提取出来放进 prompt
- 用户提到了品牌 logo？提醒用户可以提供 SVG 文件
- 用户描述了具体形状？保留描述，补充"请基于以下形状生成：[描述]"
- 如果没有素材，用精确的几何描述替代模糊描述

### 规则 4：缓动函数术语化

> 说 ease-in、ease-out、ease-in-out，AI 听得懂。别光说"动画"。

- "慢慢开始" → `ease-in`
- "慢慢结束" → `ease-out`
- "平滑过渡" → `ease-in-out`
- "弹性效果" → `spring` 或 `bounce`
- "匀速" → `linear`
- 如果用户没指定，根据动效类型推荐合适的缓动

### 规则 5：镜头运动写入 prompt

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

- **推**：镜头推进，主体变大 → "zoom in / scale up"
- **拉**：镜头拉远，主体变小 → "zoom out / scale down"
- **摇**：水平旋转 → "pan horizontally / rotate Y"
- **移**：平移 → "translate / move from A to B"
- **变焦**：焦点切换 → "focus shift / blur to sharp"
- 如果用户描述了空间运动，翻译成镜头术语

---

## 优化版 Prompt 输出模板

每次优化后，用以下格式展示给用户：

```
## 🎯 优化版 Prompt

[经过五条心法优化后的完整 prompt]

---

### 📋 优化明细

| 规则 | 原始 | 优化后 |
|------|------|--------|
| 1. FPS/帧数 | [原始或"未指定"] | [优化后] |
| 2. 控制项 | [原始或"未指定"] | [优化后] |
| 3. 素材 | [原始或"未指定"] | [优化后] |
| 4. 缓动 | [原始或"未指定"] | [优化后] |
| 5. 镜头 | [原始或"未指定"] | [优化后] |

---

请选择：
1. ✅ **确认生成** — 用优化版 prompt 开始生成
2. ✏️ **我要修改** — 告诉我你想调整什么
3. ❌ **取消** — 重新描述需求
```

---

## 生成阶段

用户确认后，提示用户执行：

```
请在你的 Claude Code 终端中运行：
npx skills add diffusionstudio/lottie

然后用以下 prompt 生成动画：

[最终确认的 prompt]
```

如果 text-to-lottie skill 已安装，直接引导调用。

---

## 使用示例

### 示例 1：模糊需求 → 优化 → 生成

**用户**：帮我做一个心跳的动效。

**Skill 优化后**：
> 生成一个心跳动画 Lottie：一个心形图标以 60 FPS 循环缩放，模拟心跳节奏——快速放大（0.1s）→ 快速缩小（0.1s）→ 暂停（0.3s）→ 重复。使用 ease-in-out 缓动。心形颜色为红色 #FF2D55，背景透明。总时长 2 秒循环。允许控制心形颜色和缩放幅度。

### 示例 2：有素材的优化

**用户**：把桌面 hello.svg 做成动画。

**Skill 优化后**：
> 读取桌面的 hello.svg 路径，做成 Lottie 动画：沿路径自然方向逐笔揭示文字，套用 Apple 风格渐变（#007AFF → #00C7BE），ease-in-out 节奏，透明背景。60 FPS，3 秒。允许控制渐变起始色、线宽、动画速度。

### 示例 3：品牌动效

**用户**：苹果 logo 晃来晃去最后消失。

**Skill 优化后**：
> 制作一个 Lottie 动效：Apple logo 以弹簧物理效果左右晃动（振幅递减），最后跳一下（快速 scale up 1.2x）缩成一个点消失（scale to 0 + opacity to 0）。60 FPS，2.5 秒。使用 spring 缓动用于摇晃，ease-in 用于消失。深色背景 #1a1a1a。允许控制 logo 颜色、晃动强度、动画时长。