让 AI 编程代理,生成生产级 Lottie 动画的开源框架
通过 Claude Code、Codex 或任何支持「技能(Skills)」的编程代理,把一段提示词变成可直接上线的矢量动画。本页面中的所有动画,均由内嵌的 Lottie JSON 实时渲染 —— 它们正是这项技术的能力证明。
npx skills add diffusionstudio/lottie
本页内嵌 — 支 Lottie 动画 · 合计仅 — · 60 FPS · 纯矢量渲染
左侧两张来自项目官方演示;右侧两支,则是本页面用 lottie-web 实时渲染的 Lottie 动画 —— 不是 GIF,不是视频,而是可编程的矢量。


安装技能后,让你的编程代理使用 text-to-lottie 来生成 Lottie 动画,剩下的交给它。
在终端运行 npx skills add diffusionstudio/lottie,把技能装入你的代理环境。
告诉代理你想要的画面与运动方式。附上 SVG、真实数据或截图,生成效果会明显更好。
代理会自动搭建工作区与内置播放器,每个动画在项目中以「场景(scene)」的形式存在。
场景从 public/projects/<project>/<scene>/lottie.json 自动加载并实时更新到播放器 —— 边预览、边拖动进度、边精修。
根据 https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg 中的 SVG 路径创建一个 Lottie 动画。让动画沿路径的自然方向逐段展现路径。为路径应用高级感的 Apple 风格渐变。使用 ease-in-out(缓入缓出)的时间节奏、透明背景,并保留原始 SVG 的几何形状。
每张卡片上的小动画,同样是内嵌 Lottie JSON 实时渲染的。
尽可能提供 SVG、真实数据或截图。当动画基于具体素材时,生成效果会明显更好。
使用 ease-in(缓入)、ease-out(缓出)、ease-in-out(缓入缓出)等运动设计语言来描述时间与运动。
专业的动态图形通常依赖摄像机运动。在提示词中加入推镜(push)、摇镜(pan)、缩放(zoom)以及类似机位绑定的运动。
默认情况下,输出通常只暴露一个背景色控制项。如果你想自定义其他属性,请明确让代理为这些属性创建对应的控制项。
如果你的动画需要特定的帧率或长度,请在提示词中写明期望的 FPS 和总帧数。
不是 GIF,不是视频 —— 是可编程的矢量动画。下面的播放器、缩放演示与特性卡片,全部由 lottie-web API 驱动。
lottie-web 暴露了完整的播放 API:播放 / 暂停、倍速、逐帧定位、分段播放、反向播放。拖动进度条,或点击阶段标签试试。
以上交互全部来自 lottie-web 原生 API:play() pause() setSpeed() goToAndStop() goToAndPlay() setDirection()。GIF 做不到这些。
Lottie 基于矢量渲染 —— 同一份动画文件,从 24px 的小图标到 4K 大屏,边缘始终锋利清晰。右侧三个实例使用完全相同的 JSON 数据,只是渲染尺寸不同。这是 GIF 与视频永远做不到的事。
这支星形动画的 JSON 仅有 —动画即 JSON:体积极小、可 gzip 压缩、秒级加载,比 GIF / 视频省得多。
SVG / Canvas 绘制,任何分辨率、任何缩放比下都保持锐利。
播放、暂停、倍速、逐帧 seek、分段循环 —— 一切由 API 掌控。
Web、iOS、Android、Flutter、React Native —— 一份动画,处处运行。
生成的动画可以直接作为 Lottie JSON 文件使用,也可以导入 After Effects 进行进一步优化。以下代码摘自项目 README:
两行脚本引入 lottie-web,调用 loadAnimation 挂载 JSON 即可 —— 本页面的所有动画正是这样渲染的。
<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 Skia 的 Skottie 模块渲染 Lottie 动画。它支持 iOS、Android 和 Web,并允许你在运行时自定义动画属性、素材和字体排版。
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 库。
val view = findViewById<LottieAnimationView>(R.id.animationView) view.setAnimation(R.raw.animation) view.loop(true) view.playAnimation()
在 Flutter 中使用官方 lottie 包,一行代码加载动画。
# pubspec.yaml dependencies: lottie: ^1.0.0 // main.dart import 'package:lottie/lottie.dart'; Lottie.asset('assets/animation.json')