nolangz/pixel2motion

AI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.

它解决了什么

Pixel2Motion 简化了将静态栅格徽标（PNG、JPG、WebP）转化为专业动画 SVG 徽标的过程。它消除了重新手动创建矢量徽标并编排其运动的繁琐工作，提供了一套结构化的 AI 辅助品牌运动设计工作流。

它如何工作

该项目作为 AI 模型（如 Claude、Codex）的“skill”运行，引导模型完成多步骤管线：

  1. 矢量化：将栅格徽标转换为干净、语义化的 SVG，使徽标的不同部分（标记、点、文字标）可被定位。
  2. 匹配与 QA：使用 Python 脚本将矢量候选与原始栅格源叠加，以确保精确对齐、比例和笔触粗细。
  3. 编舞：生成针对 SVG ID 的 CSS 动画，创建“徽标揭示”或运动序列。
  4. 交付：将最终结果导出为无依赖的 HTML 展示，并附带 GIF/视频预览和运动 QA 证据。

适用人群

  • 品牌设计师：需要快速原型化动画徽标。
  • 开发者：寻找开发者友好的 HTML/CSS 动画工作流。
  • AI 动画设计师：使用大语言模型协助创建品牌资产。

亮点

  • QA 验证的匹配：使用 IoU 诊断和几何叠加，确保矢量版本忠实重建原始图像。
  • 确定性帧捕获：包含脚本捕获特定运动帧以进行质量保证。
  • 语义化 SVG 结构：确保输出 SVG 专为动画而构建，而非仅是平面描摹。
  • 交互式 HTML 演示：生成独立的 HTML 文件，带有速度控制和重放功能，便于审阅动画。