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, 。