SuperAPI AI 工具集

creator-plugin-development

编程与开发

查看项目

更新于 10-16 00:01

技能介绍

用途:在开发 LottieFiles Creator 插件时使用,基于 Creator Plugin API 构建扩展 Creator 动画应用的插件。

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

项目结构:plugin/ 含 manifest.json(id、name、apiVersion、entry、ui)、plugin.ts 及可选 helper;src/ 含 main.tsx、app.tsx、components/;另有 vite.config.ts、tsconfig.json、tsconfig.plugin.json(沙箱,无 DOM)、tsconfig.app.json(UI,DOM+JSX)、index.html、package.json。

开发命令:pnpm create-plugin my-plugin 脚手架;在插件目录运行 pnpm dev 启动 HTTPS 热重载,pnpm build 做类型检查与生产构建,pnpm exec tsc -b 类型检查。在 Creator 中通过 Plugins > Develop > New plugin 输入 localhost URL 加载。

消息传递:UI 到插件必须包在 pluginMessage 对象中,parent.postMessage({ pluginMessage: {...} }, '*');插件用 creator.ui.onMessage 接收未包装消息。插件到 UI 直接 creator.ui.postMessage,UI 通过 event.data.pluginMessage 接收。建议定义共享消息类型并用 messageId 跟踪请求响应。

主要 API:creator.ui.show({ width, height }) 初始化;creator.activeScene 获取场景尺寸、时长、帧率、图层;createShapeLayer、createRectangle、createFill 创建形状;scene.import 导入 LOTTIE/SVG/IMAGE;position.addKeyframes 添加关键帧与缓动;creator.selection.nodes 与 selection:nodes 事件处理选择;按 node.type 区分 SHAPE_LAYER、IMAGE_LAYER、SCENE_LAYER、TEXT_LAYER。

限制与陷阱:沙箱不能 fetch,网络请求须放 UI;沙箱禁用 localStorage/sessionStorage,改用 creator.clientStorage;操作前须检查节点类型;有动画关键帧时设 staticValue 无效;形状需 fill 或 stroke 才可见;scale 为百分比(100=100%),opacity 为 0-100,颜色为 0-255;creator.ui.show() 应尽早调用;UI 未就绪时发消息会丢失,需用 ui-ready 握手。完成前运行 pnpm exec tsc -b 并验证消息流与网络请求位置。