svg-mascot-animator

用途

SVG Mascot Animator 用于把静态的 SVG 吉祥物、Logo、图标或角色转换为动画。它的特点在于动画时机来自物理方程和求解器，例如抛物线运动路径、按长度计算周期的单摆、由求解器算出稳定时间的弹簧，而不是依靠逐帧微调关键帧来获得。

主要能力

• 双轨道输出：运行时轨道由 Anime.js 驱动，支持时间线、弹簧、运动路径、描边绘制、形变、交错、拖拽，适用于对滚动、悬停、指针或状态作出反应的场景；静态轨道把 Anime.js 的缓动与弹簧采样后烘焙为 CSS 关键帧，嵌入自包含的 SVG，适用于 <img> 加载、脚本不执行的场景。
• 物理域动画设计：内置多种运动类型及对应钩子，包括抛射与回弹、单摆、阻尼弹簧、自由落体与堆叠、跳跃循环与跑步机、轨道与漂移、惯性拖拽、揭示与构建、形变。
• 绑定与变换层级：先规范化画布原点，再按水平位置、垂直位置、旋转、缩放分层嵌套变换，避免手调。
• 时间线与次级运动：支持带明确位置的 createTimeline、弹簧自定时长，以及由角色自身高度驱动的接触阴影、与速度关联的挤压拉伸、短接触帧、6%–10% 偏移的跟随滞后、预备动作和过冲。
• 质量与规范校验：输出前检查角色描述、ARIA 关联、ID 与关键帧命名前缀、减少动态偏好的回退、深色变体等资产约定。

使用方式

1. 安装引擎：bash scripts/setup.sh（执行 npm install animejs 并验证版本与导出）。无构建步骤的浏览器环境可固定导入：import { animate, createTimeline, spring, svg, utils } from 'https://esm.sh/animejs@4.5.0';
2. 用 python3 scripts/inspect_svg.py <path-to-svg> 读取源文件的 viewBox、包围盒、可独立寻址形状数量与归一化支点。
3. 选择轨道（运行时或静态），按物理域提出三个一句话故事供选择。
4. 搭建变换层级并构建时间线；静态轨道通过 scripts/bake.mjs 生成关键帧，纯弹道场景可用 scripts/physics.py。
5. 叠加次级运动，应用资产约定。
6. 交付前校验：python3 scripts/check_asset.py <output.svg> 或 python3 scripts/check_asset.py --runtime <scene.html>。

适用场景

文档站、落地页、产品界面、演示与制品等可交互场景，以及 README 图片、徽章等无脚本加载场景。文件命名采用小写连字符的“主体-动作”形式，循环时长建议 3 到 6 秒，viewBox 通常宽 320 到 480 单位。

限制

单一 path 的吉祥物无法独立活动四肢和眼睛，只能做整体层面的挤压、拉伸、弧线、旋转，需要拆分路径才能实现步态和反应。产出需满足无障碍与命名空间约定；静态轨道要求零 JavaScript、零外部引用、零网络字体。本资料未提供收费、价格或平台支持等信息。