SuperAPI AI 工具集

text-to-lottie

设计与创作

查看项目

更新于 10-24 16:22

技能介绍

Text To Lottie 是一个面向本地 Skia Skottie 官方播放器的 Lottie JSON 动画创作技能,用于创建、编辑或修复 Lottie/Bodymovin 动画。其核心原则是:交付物是在播放器中可渲染的场景,而不是孤立的 JSON 文件;验证必须在官方 Skia Skottie 播放器中完成,不得手写自定义查看器或切换渲染器。

用途方面,该技能覆盖文本转 Lottie、SVG/标志/字体动画、加载器与图标、状态提示、UI 微交互、下三分之一字幕条、图表与数据动画、产品发布与社交宣传、长文本分章与转场、视觉特效、相机运动与场景运动、技术示意图等。技能会根据用户意图路由到对应的参考文档,例如标志动画读取 recipe-logo.md、motion-taste.md 与 design-taste.md,排版动画读取 recipe-typography.md 等,混合提示则选取一个主配方并叠加辅助参考。

主要能力上,技能提供设计默认规则:高级感来自做减法,默认不添加卡片、边框、分隔线、阴影或发光;容器预算默认为零;使用单一背景色调,避免两层近黑或近白叠加;分隔线统一一种粗细与颜色。场景需包含 v、fr、ip、op、w、h、nm、assets、layers 等顶层字段,op 视为独占值。全画幅独立合成需带可见背景层及 bgColor 槽位与 controls.json 条目;标志、图标、加载器、覆盖层、下三分之一及 SVG 派生资源默认透明。应使用有目的的缓动与分层时序,避免统一线性运动。重要可编辑值放入 slots,并在 controls.json 中提供标签与范围。

使用方式上,场景文件位于 public/projects/<project>/<scene-N>/lottie.json。目标场景的解析优先级为:显式文件路径优先,其次是浏览器 URL 路由,再次是已知项目/场景,否则创建新安全场景;/__context 仅用于发现、验证或播放状态。覆盖前需重新读取当前文件,因为 UI 可能将槽位编辑写回源文件。原生 Lottie 文本(ty:5)在场景附带字体时可渲染:将 .ttf/.otf/.ttc 放在 lottie.json 旁,在 fonts.list 中以与字体内嵌家族名匹配的 fFamily 声明,并从文本文档引用。仅在有意的路径效果(描边、字形变形、手写)时才使用矢量/形状文本。

验证步骤包括:确认目标路径、用 node 命令校验 JSON 语法、确认官方播放器运行且场景出现在 GET /__context 中、在浏览器中检查帧 0、中点与 op-1、确认背景策略、检查空白画布、缺失资源、层级顺序、缓动、时序、裁剪、文本溢出与 SVG 瑕疵。只有动画渲染干净且感觉有意图时才可结束。

适用场景包括品牌标志动画、标题与文字揭示、加载器与图标、成功/错误/警告状态、UI 微交互、SVG 动画、相机跟随与缩放、技术示意图、数据统计图表、产品宣传、长文本分章与转场等。限制方面:资料未提供具体收费标准、平台兼容范围、性能指标或最大文件尺寸等信息,暂未提供;该技能依赖官方 Skia Skottie 播放器项目,且强调可移植性,避免在技能指令中使用宿主特定命令。