SuperAPI AI 工具集

creator-plugin-development

编程与开发

查看项目

更新于 10-16 00:01

技能介绍

用途:在创建或修改 LottieFiles Creator 插件时使用 Creator Plugin API,开发扩展 LottieFiles Creator 动画应用的插件。

架构:插件分为两部分。插件沙箱(plugin/plugin.ts)在隔离环境运行,可访问 creator 全局 API,能操作场景、图层、形状、关键帧,但不能发起网络请求。UI(src/)是运行在 iframe 中的 React 应用,可用 fetch 发起网络请求,但不能访问 creator API。两部分只能通过消息传递通信。

主要能力:初始化并展示 UI(creator.ui.show)、访问场景(activeScene 的尺寸、时长、帧率、图层)、创建形状图层与填充、导入 LOTTIE/SVG/IMAGE/AUDIO 资源、为属性添加关键帧与缓动、读取选择集并监听 selection:nodes 事件、按节点类型分支处理。

使用方式:用 npm create @lottiefiles/creator-plugin@latest my-plugin 脚手架新插件;在插件目录运行 npm run dev 启动带 HTTPS 热重载的开发服务器,npm run build 执行 TypeScript 检查与 Vite 生产构建,npm exec tsc -- -b 做类型检查。在 Creator 中通过 Plugins > Develop > New plugin 输入本地 localhost URL 加载。

消息传递:UI 到插件必须包装为 { pluginMessage: {...} } 后用 parent.postMessage 发送;插件通过 creator.ui.onMessage 接收未包装消息。插件到 UI 用 creator.ui.postMessage 发送,无需包装;UI 侧从 event.data.pluginMessage 读取。建议定义共享消息类型并带 messageId 做请求响应跟踪。

限制与注意:插件沙箱不能 fetch,网络请求须放到 UI 代码;沙箱 iframe 禁用 localStorage/sessionStorage,改用 creator.clientStorage;访问类型专有属性前必须检查 node.type;音频图层没有 transform;有 keyframes 时设置 staticValue 无效;形状需 fill 或 stroke 才可见;scale 为百分比(100=100%),opacity 为 0-100,颜色通道为 0-255;应尽早调用 creator.ui.show(),并在 UI 就绪握手后再发消息。

完成前检查:运行 npm exec tsc -- -b 修复类型错误,测试消息双向流转,确认网络请求在 UI 侧,核对 pluginMessage 包装正确。更多细节见 skills.sh 上的参考文件。