lottie-web 加载失败:本页动画需要联网加载 CDN 播放器,请检查网络后刷新。

Text-to-Lottie

让 AI 编程代理,生成生产级 Lottie 动画的开源框架

通过 Claude Code、Codex 或任何支持「技能(Skills)」的编程代理,把一段提示词变成可直接上线的矢量动画。本页面中的所有动画,均由内嵌的 Lottie JSON 实时渲染 —— 它们正是这项技术的能力证明。

$ npx skills add diffusionstudio/lottie

本页内嵌 支 Lottie 动画 · 合计仅 · 60 FPS · 纯矢量渲染

SVG 渲染 · 无限缩放 60 FPS · 逐帧可控
快速开始

四步,从提示词到动画

安装技能后,让你的编程代理使用 text-to-lottie 来生成 Lottie 动画,剩下的交给它。

01

安装技能

在终端运行 npx skills add diffusionstudio/lottie,把技能装入你的代理环境。

02

描述你的动画

告诉代理你想要的画面与运动方式。附上 SVG、真实数据或截图,生成效果会明显更好。

03

代理自动搭建

代理会自动搭建工作区与内置播放器,每个动画在项目中以「场景(scene)」的形式存在。

04

实时预览精修

场景从 public/projects/<project>/<scene>/lottie.json 自动加载并实时更新到播放器 —— 边预览、边拖动进度、边精修。

示例提示词(Prompt)
根据 https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg 中的 SVG 路径创建一个 Lottie 动画。让动画沿路径的自然方向逐段展现路径。为路径应用高级感的 Apple 风格渐变。使用 ease-in-out(缓入缓出)的时间节奏、透明背景,并保留原始 SVG 的几何形状。
提示词指南

五条建议,写出更好的动画提示词

每张卡片上的小动画,同样是内嵌 Lottie JSON 实时渲染的。

TIP 01

给模型提供可靠依据

尽可能提供 SVG、真实数据或截图。当动画基于具体素材时,生成效果会明显更好。

TIP 02

使用运动设计术语

使用 ease-in(缓入)、ease-out(缓出)、ease-in-out(缓入缓出)等运动设计语言来描述时间与运动。

TIP 03

像摄像师一样思考

专业的动态图形通常依赖摄像机运动。在提示词中加入推镜(push)、摇镜(pan)、缩放(zoom)以及类似机位绑定的运动。

TIP 04

明确你需要的控制项

默认情况下,输出通常只暴露一个背景色控制项。如果你想自定义其他属性,请明确让代理为这些属性创建对应的控制项。

TIP 05

指定帧率(FPS)与时长

如果你的动画需要特定的帧率或长度,请在提示词中写明期望的 FPS 和总帧数。

BONUS

生成之后呢?

生成的动画可以直接作为 Lottie JSON 文件使用,也可以导入 After Effects 进行进一步优化。查看跨平台用法 →

能力演示

这就是 Lottie 的强大之处

不是 GIF,不是视频 —— 是可编程的矢量动画。下面的播放器、缩放演示与特性卡片,全部由 lottie-web API 驱动。

像操控时间一样,操控动画

lottie-web 暴露了完整的播放 API:播放 / 暂停、倍速、逐帧定位、分段播放、反向播放。拖动进度条,或点击阶段标签试试。

进度 0 / 240 帧0.00s
倍速

以上交互全部来自 lottie-web 原生 API:play() pause() setSpeed() goToAndStop() goToAndPlay() setDirection()。GIF 做不到这些。

一份 JSON,任何尺寸都锐利

Lottie 基于矢量渲染 —— 同一份动画文件,从 24px 的小图标到 4K 大屏,边缘始终锋利清晰。右侧三个实例使用完全相同的 JSON 数据,只是渲染尺寸不同。这是 GIF 与视频永远做不到的事。

这支星形动画的 JSON 仅有
64px
150px
300px

轻量如羽

动画即 JSON:体积极小、可 gzip 压缩、秒级加载,比 GIF / 视频省得多。

矢量渲染 · 无限缩放

SVG / Canvas 绘制,任何分辨率、任何缩放比下都保持锐利。

可编程控制

播放、暂停、倍速、逐帧 seek、分段循环 —— 一切由 API 掌控。

全平台通用

Web、iOS、Android、Flutter、React Native —— 一份动画,处处运行。

跨平台

使用生成的动画

生成的动画可以直接作为 Lottie JSON 文件使用,也可以导入 After Effects 进行进一步优化。以下代码摘自项目 README:

两行脚本引入 lottie-web,调用 loadAnimation 挂载 JSON 即可 —— 本页面的所有动画正是这样渲染的。

index.html
<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>