html-to-cocos-anim
https://github.com/chhmomoyu/html-to-cocos-anim
把 HTML/CSS（或 AI 生成的网页动画）转成 Cocos Creator 3.8 的 AnimationClip（.anim）。
适合交给 AI：你只给 HTML 和「要哪一段效果」，由脚本写出可拖进 assets/ 的 clip。不要手写 .anim 里的 _tracks，也不要为了转动画去装编辑器扩展。
本仓库是一份标准 Cursor Skill：根目录有 SKILL.md，和 scripts/ 同级。拷到 .cursor/skills/html-to-cocos-anim/ 即可。
它解决什么问题
网页动画是 CSS @keyframes / transform / opacity。Creator 的 .anim 是带 cc.animation.VectorTrack 的 JSON，字段多、容易写坏。
思路是加一层转接：
-
你（或 AI）只从 HTML 抽出运动 JSON（位移、缩放、旋转、透明度、颜色）
-
scripts/write-anim.js负责坐标系、缓动、轨道格式 -
写出标准
.anim，Creator 刷新后挂到Animation上就能播
它不是编辑器扩展，不启动 Creator，不走场景 IPC。就是 Node 脚本 + 文件。
HTML 关键帧 → 运动 JSON → write-anim.js → .anim 拖进 assets/ → Animation 播放
接到 Cursor
mkdir -p .cursor/skills
git clone https://github.com/chhmomoyu/html-to-cocos-anim.git .cursor/skills/html-to-cocos-anim
在对话里 @ 你的 HTML，说清只要哪一段效果。提示词见 USAGE.md。坐标和缓动细节见 reference.md。
环境
-
Cocos Creator 3.8（在 3.8.7 上验证）
-
Node.js 18+（脚本无第三方依赖，不用
npm install）
自己跑脚本
node .cursor/skills/html-to-cocos-anim/scripts/write-anim.js examples/popup-in.json html-ai-anim/弹窗入场/popup_in.anim
把生成目录整包拖进工程 assets/。节点加 Animation，把 clip 拖上去。子节点名字必须和 JSON 里的 path 一致。
有透明度轨道再加 UIOpacity；有颜色轨道再加 Sprite。
能转 / 不能单文件保真
| 能进同一份 .anim | 不能保真 |
|—|---|
| 位移、缩放、旋转、透明度、颜色 | filter、模糊、复杂遮罩 |
粒子：用户点名才生成 .plist + 贴图，优先 copy particleImage/，对不上再画。和 .anim 放进同一个中文目录。
交付约定
-
文件夹用中文，文件用英文
-
只放 Creator 要用的
.anim/ 贴图 /.plist/ 短README.md -
不要把中间运动 JSON、生成脚本交给用户