Text-to-Lottie 上手用一句话生成 Lottie 动画的完整路径【免费下载链接】lottieGenerate production-ready Lottie animations with Claude Code or Codex项目地址: https://gitcode.com/gh_mirrors/lottie1/lottie产品要一个 3 秒的 loading 动画你打开 After Effects 还是直接描述给 AI 助手Text-to-Lottie 就是干这事的输入自然语言产出可直接交付的 Lottie 动画。它和传统做法差在哪传统链路AE 里摆时间轴、画关键帧用 Bodymovin 插件导出再自己搭个预览页客户端说主色换一下你得重新导出。Text-to-Lottie 把画和看这两个环节挪进了 AI 编码助手的对话里一句 promptagent 直接在工作目录写出lottie.json仓库自带的播放器实时渲染、拖帧、改参数。工具链从三件套缩成一句对话。 3 分钟跑通第一个动画先装技能npx skills add diffusionstudio/lottie再 clone 播放器项目并跑起来npm run dev会在终端打印实际端口git clone https://gitcode.com/gh_mirrors/lottie1/lottie cd lottie npm install npm run dev然后把下面这段最小 prompt 丢给助手用附件的 SVG logo 路径生成 Lottie 动画描边跟随路径方向逐渐显现苹果风渐变ease-in-out 缓动背景透明保留原始 SVG 几何。agent 会自己完成建场景、写 JSON、起服务验证产物落在public/projects/project/scene/lottie.json浏览器里即时可见。 拆解一句话是怎么变成 Lottie JSON 的链路分三段值得拆开看意图路由SKILL.md 只是一张薄路由表——识别你的意图logo 动画、loader、数据图表……后只加载对应的配方与动效参考不全量灌给模型。播放器契约场景必须落在public/projects/project/scene/lottie.json写完先校验 JSON再逐帧检查首帧、中点、末帧。槽位slot真正让产物能调的机制。槽位系统的设计JSON 顶层的slots对象声明可编辑参数具体属性用sid引用它。你在右侧属性面板把bgColor从黑改成深灰改动只写回这个槽位关键帧和图层结构分毫不动。槽位类型与面板控件一一对应槽位类型值的形式面板控件标量数字滑块颜色RGBA 数组0–1颜色选择器向量双数字数组两个数字输入框文本字符串文本输入框相机推拉、平移这类运镜不依赖任何特效靠组变换模拟原生文字图层只要把字体文件放进场景目录即可渲染文字内容同样可以抽成槽位。价值在哪一次生成整段动画改个主色就得重新来把颜色、位置、文案抽成参数后微调变成改参数。面板里开放什么由你在 prompt 里决定协作边界从发我 AE 工程变成改这几个参数。 让 AI 听懂你的行话❌做得高级一点 → ✅主体动画 ease-in-out结尾 overshoot 8% 后 150ms 回稳❌用我们的 logo → ✅附件 SVG 路径做描边显现保留 viewBox 比例背景透明❌镜头动一下 → ✅前 30 帧 1.2 倍缓慢推近标题末帧定格❌数据滚动快一点 → ✅60fps、总长 120 帧数字滚动 60 帧内完成循环一次后定格要面板可控的参数主色、数值、标题逐个点名要控件 落地到各端端库集成要点Weblottie-web默认 SVG 渲染器path指向 JSON 即可React NativeSkia 的 Skottie运行时可换资源、改属性iOS / Android官方 Lottie 库JSON 放进 bundle 直接播放Flutterlottie 包Lottie.asset加载 JSON注意场景里用到原生文字图层时字体文件要随 JSON 一起分发且 family name 必须对得上否则文本会整个消失。适合它loading、图标状态反馈、数据滚动、下三分之一、产品宣传这类结构化动态图形别用它粒子、流体、3D 场景那些请回专业工具。【免费下载链接】lottieGenerate production-ready Lottie animations with Claude Code or Codex项目地址: https://gitcode.com/gh_mirrors/lottie1/lottie创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Text-to-Lottie 上手：用一句话生成 Lottie 动画的完整路径
Text-to-Lottie 上手用一句话生成 Lottie 动画的完整路径【免费下载链接】lottieGenerate production-ready Lottie animations with Claude Code or Codex项目地址: https://gitcode.com/gh_mirrors/lottie1/lottie产品要一个 3 秒的 loading 动画你打开 After Effects 还是直接描述给 AI 助手Text-to-Lottie 就是干这事的输入自然语言产出可直接交付的 Lottie 动画。它和传统做法差在哪传统链路AE 里摆时间轴、画关键帧用 Bodymovin 插件导出再自己搭个预览页客户端说主色换一下你得重新导出。Text-to-Lottie 把画和看这两个环节挪进了 AI 编码助手的对话里一句 promptagent 直接在工作目录写出lottie.json仓库自带的播放器实时渲染、拖帧、改参数。工具链从三件套缩成一句对话。 3 分钟跑通第一个动画先装技能npx skills add diffusionstudio/lottie再 clone 播放器项目并跑起来npm run dev会在终端打印实际端口git clone https://gitcode.com/gh_mirrors/lottie1/lottie cd lottie npm install npm run dev然后把下面这段最小 prompt 丢给助手用附件的 SVG logo 路径生成 Lottie 动画描边跟随路径方向逐渐显现苹果风渐变ease-in-out 缓动背景透明保留原始 SVG 几何。agent 会自己完成建场景、写 JSON、起服务验证产物落在public/projects/project/scene/lottie.json浏览器里即时可见。 拆解一句话是怎么变成 Lottie JSON 的链路分三段值得拆开看意图路由SKILL.md 只是一张薄路由表——识别你的意图logo 动画、loader、数据图表……后只加载对应的配方与动效参考不全量灌给模型。播放器契约场景必须落在public/projects/project/scene/lottie.json写完先校验 JSON再逐帧检查首帧、中点、末帧。槽位slot真正让产物能调的机制。槽位系统的设计JSON 顶层的slots对象声明可编辑参数具体属性用sid引用它。你在右侧属性面板把bgColor从黑改成深灰改动只写回这个槽位关键帧和图层结构分毫不动。槽位类型与面板控件一一对应槽位类型值的形式面板控件标量数字滑块颜色RGBA 数组0–1颜色选择器向量双数字数组两个数字输入框文本字符串文本输入框相机推拉、平移这类运镜不依赖任何特效靠组变换模拟原生文字图层只要把字体文件放进场景目录即可渲染文字内容同样可以抽成槽位。价值在哪一次生成整段动画改个主色就得重新来把颜色、位置、文案抽成参数后微调变成改参数。面板里开放什么由你在 prompt 里决定协作边界从发我 AE 工程变成改这几个参数。 让 AI 听懂你的行话❌做得高级一点 → ✅主体动画 ease-in-out结尾 overshoot 8% 后 150ms 回稳❌用我们的 logo → ✅附件 SVG 路径做描边显现保留 viewBox 比例背景透明❌镜头动一下 → ✅前 30 帧 1.2 倍缓慢推近标题末帧定格❌数据滚动快一点 → ✅60fps、总长 120 帧数字滚动 60 帧内完成循环一次后定格要面板可控的参数主色、数值、标题逐个点名要控件 落地到各端端库集成要点Weblottie-web默认 SVG 渲染器path指向 JSON 即可React NativeSkia 的 Skottie运行时可换资源、改属性iOS / Android官方 Lottie 库JSON 放进 bundle 直接播放Flutterlottie 包Lottie.asset加载 JSON注意场景里用到原生文字图层时字体文件要随 JSON 一起分发且 family name 必须对得上否则文本会整个消失。适合它loading、图标状态反馈、数据滚动、下三分之一、产品宣传这类结构化动态图形别用它粒子、流体、3D 场景那些请回专业工具。【免费下载链接】lottieGenerate production-ready Lottie animations with Claude Code or Codex项目地址: https://gitcode.com/gh_mirrors/lottie1/lottie创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考