跳转到使用指南
text-to-lottie作者 diffusionstudio

Text to Lottie Skill.

以真实播放器为准创建和修复 Lottie 动画,而不只是生成格式有效的 JSON。Text to Lottie 面向仓库中的本地 Skia Skottie 预览,并将重要参数开放为可编辑控件。

  • Lottie
  • 动效
  • Skottie
源文件解读 · text-to-lottieSKILL.md
任务 创建和编辑 Lottie 动画 JSON。 产出 • 场景的 lottie.json • 可选的可编辑控件 • 在本地播放器中逐帧检查 开始前的准备 使用上游播放器项目,并提供场景所需的字体或画稿。
编辑总结 · 源码复核于 2026-11-02 · 并非实际渲染演示

01 功能说明

制作播放器真正能够渲染的动画

源文档将动画创作与官方本地 Skottie 播放器连接起来。JSON 校验只是一项检查,不能证明场景的视觉结果正确。

基于来源的工作流并非执行基准测试

工作方法

该 Skill 在播放器项目中编写场景的 lottie.json,并在需要时编写 controls.json。它先为请求的任务选择主要方案,再仅阅读字体、SVG 转换、动画结构或控件所需的补充参考。

编辑首先要确定目标场景。明确提供的路径优先于浏览器路由或发现的上下文。修改现有文件前,智能体必须重新读取文件,因为用户通过播放器编辑的参数可能已回写至同一份 JSON。

预期交付物

  • 位于指定项目和场景目录中的 Lottie JSON 场景
  • 可选控件,用于带标签的可调动画参数
  • 在本地 Skottie 播放器中对代表性帧的检查
查看示例简报

从简报到审查

  1. 01
    确定场景

    写入前明确项目与场景。自动发现用于查找上下文,不代表可以覆盖无关动画。

  2. 02
    选择方案与素材

    确认动画任务,并提供所需 SVG 或字体文件。对于标志、加载动画和叠加层,源文档默认使用透明背景。

  3. 03
    开放需要调整的参数

    为重要可编辑参数使用槽位与控件,提供有用的标签和范围。满画幅背景必须能编辑背景颜色。

  4. 04
    检查实际画面帧

    校验 JSON,打开本地播放器,检查首帧、中间帧和最后可见帧。检查素材缺失、裁切、图层顺序与时序。

02 适用场景

适合什么场景

此流程依赖上游的本地播放器项目。字体与导入画稿必须能被该项目访问;其他 Lottie 运行环境可能有不同表现。

适合的场景

  • 可编辑的品牌动效适合需要在初版后修改颜色和时序的标志显现动画或加载动画。
  • 修复现有场景适合 JSON 动画可以加载,但在 Skottie 中出现字体缺失、画稿裁切或图层顺序错误的情况。

需要检查的限制

  • 不保证所有播放器表现一致这些指令面向官方本地 Skottie 播放器。承诺同一文件在另一个目标运行环境中渲染一致前,先单独检查该环境。
  • 不会自动包含素材文本需要可用字体文件及匹配的字体元数据。导入的 SVG 画稿仍需规范化和视觉检查。

请提供这些输入

  • 目标场景提供项目与场景路径,并说明是创建新场景还是编辑现有场景。
  • 画稿与字体文件提供获授权使用的 SVG 或标志及所需字体,说明哪些图形或文字必须保持可编辑。
  • 动效需求指定时长、画布尺寸、透明度、循环行为,以及后续希望调整的参数。

03 关键决策

影响结果的关键选择

  1. 有效文件也可能渲染为空白场景

    源文档除 JSON 校验外还要求实际检查播放器。成功解析不能发现所有缺失字体或不可见图层。

  2. 最后可见帧位于 op 之前

    Lottie 的出点不包含在可见范围内。建议用 op 减一检查末帧,不将出点视为可见内容。

  3. 控件会改变编辑流程

    由于播放器控件可能将更改写回源文件,重新读取文件可避免智能体用旧参数覆盖用户最新编辑。

04 示例任务

从一份具体的需求开始

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

检查播放器配置

阅读上游源码及仓库配置说明。下方是源文件链接,不是安装命令。

上游源文件
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md

修改现有项目文件前,先使用独立测试场景。

描述一个动画

运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。

示例简报
使用 text-to-lottie 为我提供的 SVG 标志创建一个四秒循环动画。在我指定的测试项目中新建名为 logo-loop 的场景,不要覆盖其他场景。保持透明背景并保留标志比例。将强调色开放为带标签的控件。使用经过设计的缓动,而不是匀速线性运动。校验 JSON,打开官方本地 Skottie 播放器,检查第零帧、中间帧和最后可见帧。报告素材缺失、裁切或循环不连续的问题,并区分已经执行的检查与仍待复核的检查。

检查渲染后的画面帧

根据以下可观察标准检查实际输出。

  • 使用了正确的新场景,现有编辑保持完整。
  • 在检查的各帧中,标志可见且未被裁切,背景透明。
  • 强调色控件修改了预期参数,并已在实际播放器中检查循环。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
diffusionstudio
技能文件
SKILL.md
许可证
MIT
已审查的快照
2026-11-02 · 3c72912fad54
编辑来源摘要
基于源文件梳理 Text to Lottie 的工作流程,涵盖场景定位、Lottie 创作、可编辑控件及本地 Skottie 播放器验证。本条目未实际执行动画示例。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前可能想问

有效的 Lottie JSON 能保证正确渲染吗?

不能。源文档要求在本地播放器中检查实际画面帧。字体加载、图层顺序和裁切仍可能导致错误结果。

可以在任意 Lottie 播放器中使用此文件吗?

已复核的指令面向本地 Skottie 播放器。假定支持程度相同前,应在目标运行环境中测试导出的动画。

动画颜色可以编辑吗?

可以。源文档要求智能体为重要可调参数使用槽位与控件,并提供标签和范围。具体控件取决于场景。

OpenDesign

将动画与需求说明放在一起。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程前,请检查其自身的设置说明。

上游源文件
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md