mcpField
S
svg-assembly-animator

svg-assembly-animator

github.com/vibe-motion创意与媒体1.4k1.1k 次安装3 周前更新
代码仓库

关于 svg-assembly-animator

SVG Assembly Animator 是将静态 SVG 转换为 HTML5 组装动画的 Skill，并支持导出透明 PNG 序列帧。适用于制作带有零件飞入、主体显现和场景旋转效果的动画。

主要功能

  1. 01分析 SVG 主体与细节路径
  2. 02使用 GSAP 制作组装动画
  3. 03生成可在浏览器预览的 HTML
  4. 04导出透明 PNG 序列帧 ZIP

适用场景

  1. 01为静态 SVG 制作组装动效
  2. 02预览并调整零件飞入动画
  3. 03导出透明帧用于后续视频合成

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vibe-motion/skills --skill svg-assembly-animator

安装后在 Claude Code 中输入/svg-assembly-animator确认已加载。

附带文件assets/animation_template.htmlreferences/animation_logic.md

详细介绍

来自项目 README

SVG Assembly Animator

这个 Skill 专门用于将静态 SVG 转换为具有专业动效（Viscous & Dynamic 风格）的 HTML5 动画，并提供透明序列帧导出功能。

核心工作流

  1. 分析 SVG 结构：读取 SVG 文件，识别出主要的“船体/主体”（通常是第一个 path）和“细节零件”（剩余 path）。
  2. 准备 HTML 模板：
    • 使用 GSAP (TweenMax) 作为动画引擎。
    • 使用 JSZip 和 Canvas 实现纯前端透明帧导出。
    • 加载内置资产 assets/animation_template.html 作为基础。
  3. 实现动画逻辑（参考 references/animation_logic.md）：
    • 打散阶段：利用“反向逻辑”，将零件随机抛射到视口外，并进行极端的轴向缩放（ScaleX: 0.05, ScaleY: 4）以营造速度感。
    • 组装阶段：
      • 主体骨架率先以 elastic.out 效果浮现。
      • 零件以 stagger 随机顺序飞入，伴随 back.out 的过冲回弹（Overshoot）。
      • 整体场景伴随大角度旋转（180° 或 360°）和缩放。
  4. 生成与交付：生成 .html 文件，提示用户可以在浏览器中预览并点击导出按钮。

动画参数建议

  • 标准组装：duration: 1.2, ease: "back.out(2.5)"。
  • 力量组装：duration: 0.7, ease: "back.out(5)", rotation: -360。
  • 优雅组装：duration: 1.5, ease: "power4.out", stagger: 0.02。

导出说明

  • 默认导出 1080x1080 分辨率、30fps 的透明 PNG 序列帧 ZIP 包。
  • 如果用户需要合成视频，可建议使用以下 ffmpeg 命令： ffmpeg -framerate 30 -i frame_%04d.png -vcodec prores_ks -profile:v 4 -pix_fmt yuva444p10le output.mov

关联资源

  • 动画经验法则：references/animation_logic.md
  • HTML 基础模板：assets/animation_template.html

评论

支持 Markdown