尧图网站建设 
Pixel2Motion脚本工具链参考:11个辅助脚本的功能、参数与用法清单【免费下载链接】pixel2motionAI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.项目地址: https://gitcode.com/gh_mirrors/pi/pixel2motionPixel2Motion 是一个把像素 LogoPNG/JPG/WebP转换成平滑 SVG、再生成 SVG Logo 动画、HTML 动效演示和 GIF/视频预览的 AI 动画技能包。它的 scripts/ 目录内置了11 个辅助脚本覆盖几何拟合 → 动效生成 → 动效 QA的完整脚本工具链。本文给出每个脚本的功能说明、关键参数清单和典型用法帮助你快速上手这套 Pixel2Motion 脚本工具。工具链一览11个脚本各管什么先花 30 秒看全貌。所有脚本都围绕 SKILL.md 中定义的Pixel → Vector → Motion三阶段工作流#脚本所属阶段一句话功能1raster_logo_trace.pyPhase 2 几何位图 Logo 测量/初始描摹2render_overlay.pyPhase 2 几何渲染 SVG 青色叠加图 IoU 指标3fit_ribbon_centerline.pyPhase 2 几何闭合变宽丝带∞、花体字中心线拟合4svg_path_audit.pyPhase 2 几何Bezier 曲线平滑度审计5overlay_progress_strip.pyPhase 2 几何生成几何 QA 进展长条图6svg_to_js_html.pyPhase 3 动效SVG 转静态 JS 渲染 HTML中间检查7animate_svg_showcase.pyPhase 3 动效生成最终动画展示 HTML 交付物8animate_svg_html.pyPhase 3 动效极简动画 HTML调试/QA 兜底9capture_motion_frames.pyPhase 3 QA确定性截帧 胶片条 终帧对比10probe_motion_continuity.pyPhase 3 QA缓动探针 墨迹连续性扫描11export_claude_videos.mjs产出4K120 视频批量导出Node.jsPhase 2几何拟合与 QA 脚本1️⃣ raster_logo_trace.py位图 Logo 测量与初始描摹当 Logo 是不规则剪影、简单几何无法描述时用它从位图提取测量数据或起始遮罩。注意输出是测量辅助件不能直接当最终矢量。关键参数见 raster_logo_trace.py参数默认值说明input位置参数-位图 Logo 图片--outoutputs输出目录--colors6最大颜色桶数--simplify1.1路径简化容差--min-area16忽略小于该面积的色区--alpha-threshold/--bg-threshold12 / 24.0透明与背景判定阈值python3 scripts/raster_logo_trace.py source.png --out outputs2️⃣ render_overlay.py叠加图 IoU 指标一步到位Phase 2 使用频率最高的脚本用无头 Chrome 渲染 SVG在原始位图上生成青色拟合叠加图并计算 IoU 等几何指标。关键参数见 render_overlay.py参数说明svg/source位置参数拟合后的 SVG 与原始位图--out必填叠加图输出路径如outputs/fit_iterations/01_overlay.png--render-out同时保存纯 SVG 渲染 PNG即final_render.png--report输出 JSON 指标报告--fg-threshold前景判定阈值RGB 之和默认 720python3 scripts/render_overlay.py logo.svg source.png \ --out outputs/fit_iterations/01_overlay.png \ --render-out outputs/final_render.png \ --report outputs/fit_metrics.json 若 Chrome 不在默认路径先设置环境变量CHROME_BIN。3️⃣ fit_ribbon_centerline.py闭合丝带中心线拟合器专为自交叉变宽丝带设计——∞ 标记、花体签名、swoosh 等两条开放边界不存在的拓扑。流程Catmull-Rom 中心线支架 → 对位图自动再居中 → 宽度轮廓 → 亚像素边缘吸附 → 平滑贝塞尔轮廓。其报告会输出每个交叉弧段占比arc fractions正是 Phase 3 分体描线动画需要的切分参数方法详见 references/ribbon-fitting.md。关键参数见 fit_ribbon_centerline.py参数默认值说明source/--seeds- / 必填位图 Logo种子点 JSON闭环点序 排除圆--out-diroutputs/ribbon_fit输出目录含ribbon_path.txt、centerline_path.txt、fit_report.json、preview.svg--recenter3自动再居中迭代次数--lum-thresh170前景亮度阈值--mask-png/--roi无显式遮罩 / 限定拟合区域--min-width/--max-width1.8 / 40.0宽度测量合法范围python3 scripts/fit_ribbon_centerline.py source.png \ --seeds seeds.json --out-dir outputs/ribbon_fit4️⃣ svg_path_audit.pyBezier 平滑度审计复杂曲线看着不平滑时用它体检检测噪声控制柄、切线跳变、微小交替线段和阶梯状描边段——这些问题即使 IoU 很高也应判为失败。关键参数见 svg_path_audit.py参数说明svg位置参数待审计的 SVG--path-index指定 path 下标默认取黑色/最长路径--out-svg输出贝塞尔分段可视化 SVG默认bezier_segments.svg--report输出 JSON 审计报告默认bezier_audit.json--budget本标记允许的最大三次曲线段数--angle-threshold相邻切线夹角警告阈值默认 8°python3 scripts/svg_path_audit.py logo.svg \ --out-svg outputs/bezier_segments.svg --report outputs/bezier_audit.json5️⃣ overlay_progress_strip.py几何 QA 进展长条把源图 → 本轮各次叠加迭代 → 最终渲染拼成一张横向长条图作为几何拟合的证据链。官方仓库就展示了一张docs/process/ 下的 CueRecord 拟合序列。关键参数见 overlay_progress_strip.py参数说明overlays位置参数或--dir--pattern按迭代顺序传入叠加图或按 glob 扫描目录--source原始位图作为首格面板--final-image最终矢量渲染 PNG作为尾格面板--out输出长条图默认overlay_progress_strip.png--max-height/--gutter/--margin面板高度与间距控制python3 scripts/overlay_progress_strip.py \ --source source.png --dir outputs/fit_iterations \ --pattern *overlay*.png --final-image outputs/final_render.png \ --out outputs/overlay_progress_strip.pngPhase 3动画 HTML 与运动 QA 脚本6️⃣ svg_to_js_html.py静态 JS 渲染 HTML把 SVG 转成通过 JavaScript DOM 调用重建的独立 HTML。它是中间检查件用于验证 JS 重建管线参数极简参数说明svg位置参数输入 SVG--out输出 HTML默认logo.html--title页面标题默认 Vectorized Logopython3 scripts/svg_to_js_html.py logo.svg --out logo_static.html --title Logo7️⃣ animate_svg_showcase.py最终动画展示交付物 ⭐默认的交付物生成器。它把 SVG 转成 JS 重建结构、为动效 CSS 包上prefers-reduced-motion保护并套上展示模板外壳原子动效研究、原则条、重放按钮、慢动作开关、速度滑杆以及?tms寻址、?static1、window.__p2mReady等 QA 钩子。关键参数见 animate_svg_showcase.py参数说明svg/--css必填运动就绪的 SVG 主动画 CSS--out输出 HTML默认logo_motion.html--title/--background页面标题 / 背景色--duration-hint总编排时长 ms默认 1500存入data-p2m-duration供工具链读取python3 scripts/animate_svg_showcase.py logo.svg \ --css motion.css --out logo_motion.html \ --title Logo Motion --duration-hint 15008️⃣ animate_svg_html.py极简动画 HTML 兜底参数与上面几乎相同svg、--css、--out、--title、--background、--duration-hint见 animate_svg_html.py但不带原子动效和调节器只保留?tms暂停寻址、?static1跳终态、Replay 按钮等 QA 钩子。官方定位调试与 QA 兜底不是首选的面向用户的最终 HTML。python3 scripts/animate_svg_html.py logo.svg --css motion.css \ --out logo_motion_minimal.html --title Logo Motion --duration-hint 15009️⃣ capture_motion_frames.py确定性截帧 终帧契约检查基于?tms钩子在指定时刻暂停并截图不用墙钟抓拍保证可复现拼出带时间标签的胶片条并可选地把最后一帧与静态渲染做像素 diff验证Final Frame Contract动画终帧必须精确落在 QA 通过的静态矢量上。依赖 Playwright。关键参数见 capture_motion_frames.py参数默认值说明html/--times必填-带 QA 钩子的 HTML逗号分隔毫秒时间戳--outmotion_frames帧 PNG 输出目录--strip无输出带标签胶片条 PNG--compare-final无与静态渲染 diff 的对照图--viewport/--scale900x600 / 2.0视口与设备缩放--report无JSON 报告路径python3 scripts/capture_motion_frames.py logo_motion.html \ --times 0,300,700,1000,1250,1500 \ --out outputs/motion_frames --strip outputs/motion_strip.png \ --compare-final outputs/final_render.png probe_motion_continuity.py缓动探针 墨迹连续性扫描两种模式都构建在确定性?tms寻址之上需要 Playwright见 probe_motion_continuity.py模式参数抓什么计算样式探针--times 500,700,900--probe #draw-stroke:stroke-dashoffset验证浏览器实际运行的缓动你设计的缓动各时刻值若恰好等于线性占比说明 keyframe 里的var()时序函数被静默丢弃退化成 linear墨迹扫描--ink-sweep 850:1010:10每 ~10ms 统计墨色像素数差平台 跳变就是 stallpop 失效特征其他参数--threshold墨迹亮度阈值默认 120、--root默认#logo-root、--viewport、--scale、--report。python3 scripts/probe_motion_continuity.py logo_motion.html \ --times 500,700,900 \ --probe #draw-stroke:stroke-dashoffset,#pen-glint:offset-distance python3 scripts/probe_motion_continuity.py logo_motion.html \ --ink-sweep 850:1010:101️⃣1️⃣ export_claude_videos.mjs4K120 视频批量导出Node.js 脚本把 docs/index.html 中的 5 个内置 Logo 动画N、Focus、Continuum、Horizon、CueRecord以3840×2160 120fps逐帧渲染并合成视频支持透明背景导出。命令行标志见 export_claude_videos.mjs标志说明--onlyn,focus只导出指定动画按 slug 或名称--transparent透明背景导出--transparent-mov透明 MOV 格式--keep-frames保留中间帧目录node scripts/export_claude_videos.mjs --onlyhorizon,continuum快速上手环境要求清单按 README.md 的说明这套 Pixel2Motion 脚本工具链需要Python 3.10依赖Pillow与numpyChrome / Chromium几何渲染与 HTML 渲染不在默认路径时设CHROME_BINPlaywright确定性截帧与运动连续性 QApython3 -m venv .venv .venv/bin/pip install pillow numpy playwright .venv/bin/python -m playwright install chromium总结按阶段选脚本的最快路径你想做的事直接运行把位图 Logo 变成平滑可动 SVGraster_logo_trace.py→render_overlay.py→svg_path_audit.py拟合 ∞ / 花体自交叉标记fit_ribbon_centerline.py生成可交互动画 HTML 交付物animate_svg_showcase.py证明动效质量截帧 缓动 连续性capture_motion_frames.pyprobe_motion_continuity.py产出高清/透明视频export_claude_videos.mjs配合 SKILL.md 的三阶段工作流与 references/ 中的动画原则、揭示模式、HTML 交付模板等参考文档这 11 个脚本工具就构成了一条从像素 Logo 到可验收动效证据的完整流水线。【免费下载链接】pixel2motionAI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.项目地址: https://gitcode.com/gh_mirrors/pi/pixel2motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Pixel2Motion脚本工具链参考:11个辅助脚本的功能、参数与用法清单
Pixel2Motion脚本工具链参考:11个辅助脚本的功能、参数与用法清单【免费下载链接】pixel2motionAI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.项目地址: https://gitcode.com/gh_mirrors/pi/pixel2motionPixel2Motion 是一个把像素 LogoPNG/JPG/WebP转换成平滑 SVG、再生成 SVG Logo 动画、HTML 动效演示和 GIF/视频预览的 AI 动画技能包。它的 scripts/ 目录内置了11 个辅助脚本覆盖几何拟合 → 动效生成 → 动效 QA的完整脚本工具链。本文给出每个脚本的功能说明、关键参数清单和典型用法帮助你快速上手这套 Pixel2Motion 脚本工具。工具链一览11个脚本各管什么先花 30 秒看全貌。所有脚本都围绕 SKILL.md 中定义的Pixel → Vector → Motion三阶段工作流#脚本所属阶段一句话功能1raster_logo_trace.pyPhase 2 几何位图 Logo 测量/初始描摹2render_overlay.pyPhase 2 几何渲染 SVG 青色叠加图 IoU 指标3fit_ribbon_centerline.pyPhase 2 几何闭合变宽丝带∞、花体字中心线拟合4svg_path_audit.pyPhase 2 几何Bezier 曲线平滑度审计5overlay_progress_strip.pyPhase 2 几何生成几何 QA 进展长条图6svg_to_js_html.pyPhase 3 动效SVG 转静态 JS 渲染 HTML中间检查7animate_svg_showcase.pyPhase 3 动效生成最终动画展示 HTML 交付物8animate_svg_html.pyPhase 3 动效极简动画 HTML调试/QA 兜底9capture_motion_frames.pyPhase 3 QA确定性截帧 胶片条 终帧对比10probe_motion_continuity.pyPhase 3 QA缓动探针 墨迹连续性扫描11export_claude_videos.mjs产出4K120 视频批量导出Node.jsPhase 2几何拟合与 QA 脚本1️⃣ raster_logo_trace.py位图 Logo 测量与初始描摹当 Logo 是不规则剪影、简单几何无法描述时用它从位图提取测量数据或起始遮罩。注意输出是测量辅助件不能直接当最终矢量。关键参数见 raster_logo_trace.py参数默认值说明input位置参数-位图 Logo 图片--outoutputs输出目录--colors6最大颜色桶数--simplify1.1路径简化容差--min-area16忽略小于该面积的色区--alpha-threshold/--bg-threshold12 / 24.0透明与背景判定阈值python3 scripts/raster_logo_trace.py source.png --out outputs2️⃣ render_overlay.py叠加图 IoU 指标一步到位Phase 2 使用频率最高的脚本用无头 Chrome 渲染 SVG在原始位图上生成青色拟合叠加图并计算 IoU 等几何指标。关键参数见 render_overlay.py参数说明svg/source位置参数拟合后的 SVG 与原始位图--out必填叠加图输出路径如outputs/fit_iterations/01_overlay.png--render-out同时保存纯 SVG 渲染 PNG即final_render.png--report输出 JSON 指标报告--fg-threshold前景判定阈值RGB 之和默认 720python3 scripts/render_overlay.py logo.svg source.png \ --out outputs/fit_iterations/01_overlay.png \ --render-out outputs/final_render.png \ --report outputs/fit_metrics.json 若 Chrome 不在默认路径先设置环境变量CHROME_BIN。3️⃣ fit_ribbon_centerline.py闭合丝带中心线拟合器专为自交叉变宽丝带设计——∞ 标记、花体签名、swoosh 等两条开放边界不存在的拓扑。流程Catmull-Rom 中心线支架 → 对位图自动再居中 → 宽度轮廓 → 亚像素边缘吸附 → 平滑贝塞尔轮廓。其报告会输出每个交叉弧段占比arc fractions正是 Phase 3 分体描线动画需要的切分参数方法详见 references/ribbon-fitting.md。关键参数见 fit_ribbon_centerline.py参数默认值说明source/--seeds- / 必填位图 Logo种子点 JSON闭环点序 排除圆--out-diroutputs/ribbon_fit输出目录含ribbon_path.txt、centerline_path.txt、fit_report.json、preview.svg--recenter3自动再居中迭代次数--lum-thresh170前景亮度阈值--mask-png/--roi无显式遮罩 / 限定拟合区域--min-width/--max-width1.8 / 40.0宽度测量合法范围python3 scripts/fit_ribbon_centerline.py source.png \ --seeds seeds.json --out-dir outputs/ribbon_fit4️⃣ svg_path_audit.pyBezier 平滑度审计复杂曲线看着不平滑时用它体检检测噪声控制柄、切线跳变、微小交替线段和阶梯状描边段——这些问题即使 IoU 很高也应判为失败。关键参数见 svg_path_audit.py参数说明svg位置参数待审计的 SVG--path-index指定 path 下标默认取黑色/最长路径--out-svg输出贝塞尔分段可视化 SVG默认bezier_segments.svg--report输出 JSON 审计报告默认bezier_audit.json--budget本标记允许的最大三次曲线段数--angle-threshold相邻切线夹角警告阈值默认 8°python3 scripts/svg_path_audit.py logo.svg \ --out-svg outputs/bezier_segments.svg --report outputs/bezier_audit.json5️⃣ overlay_progress_strip.py几何 QA 进展长条把源图 → 本轮各次叠加迭代 → 最终渲染拼成一张横向长条图作为几何拟合的证据链。官方仓库就展示了一张docs/process/ 下的 CueRecord 拟合序列。关键参数见 overlay_progress_strip.py参数说明overlays位置参数或--dir--pattern按迭代顺序传入叠加图或按 glob 扫描目录--source原始位图作为首格面板--final-image最终矢量渲染 PNG作为尾格面板--out输出长条图默认overlay_progress_strip.png--max-height/--gutter/--margin面板高度与间距控制python3 scripts/overlay_progress_strip.py \ --source source.png --dir outputs/fit_iterations \ --pattern *overlay*.png --final-image outputs/final_render.png \ --out outputs/overlay_progress_strip.pngPhase 3动画 HTML 与运动 QA 脚本6️⃣ svg_to_js_html.py静态 JS 渲染 HTML把 SVG 转成通过 JavaScript DOM 调用重建的独立 HTML。它是中间检查件用于验证 JS 重建管线参数极简参数说明svg位置参数输入 SVG--out输出 HTML默认logo.html--title页面标题默认 Vectorized Logopython3 scripts/svg_to_js_html.py logo.svg --out logo_static.html --title Logo7️⃣ animate_svg_showcase.py最终动画展示交付物 ⭐默认的交付物生成器。它把 SVG 转成 JS 重建结构、为动效 CSS 包上prefers-reduced-motion保护并套上展示模板外壳原子动效研究、原则条、重放按钮、慢动作开关、速度滑杆以及?tms寻址、?static1、window.__p2mReady等 QA 钩子。关键参数见 animate_svg_showcase.py参数说明svg/--css必填运动就绪的 SVG 主动画 CSS--out输出 HTML默认logo_motion.html--title/--background页面标题 / 背景色--duration-hint总编排时长 ms默认 1500存入data-p2m-duration供工具链读取python3 scripts/animate_svg_showcase.py logo.svg \ --css motion.css --out logo_motion.html \ --title Logo Motion --duration-hint 15008️⃣ animate_svg_html.py极简动画 HTML 兜底参数与上面几乎相同svg、--css、--out、--title、--background、--duration-hint见 animate_svg_html.py但不带原子动效和调节器只保留?tms暂停寻址、?static1跳终态、Replay 按钮等 QA 钩子。官方定位调试与 QA 兜底不是首选的面向用户的最终 HTML。python3 scripts/animate_svg_html.py logo.svg --css motion.css \ --out logo_motion_minimal.html --title Logo Motion --duration-hint 15009️⃣ capture_motion_frames.py确定性截帧 终帧契约检查基于?tms钩子在指定时刻暂停并截图不用墙钟抓拍保证可复现拼出带时间标签的胶片条并可选地把最后一帧与静态渲染做像素 diff验证Final Frame Contract动画终帧必须精确落在 QA 通过的静态矢量上。依赖 Playwright。关键参数见 capture_motion_frames.py参数默认值说明html/--times必填-带 QA 钩子的 HTML逗号分隔毫秒时间戳--outmotion_frames帧 PNG 输出目录--strip无输出带标签胶片条 PNG--compare-final无与静态渲染 diff 的对照图--viewport/--scale900x600 / 2.0视口与设备缩放--report无JSON 报告路径python3 scripts/capture_motion_frames.py logo_motion.html \ --times 0,300,700,1000,1250,1500 \ --out outputs/motion_frames --strip outputs/motion_strip.png \ --compare-final outputs/final_render.png probe_motion_continuity.py缓动探针 墨迹连续性扫描两种模式都构建在确定性?tms寻址之上需要 Playwright见 probe_motion_continuity.py模式参数抓什么计算样式探针--times 500,700,900--probe #draw-stroke:stroke-dashoffset验证浏览器实际运行的缓动你设计的缓动各时刻值若恰好等于线性占比说明 keyframe 里的var()时序函数被静默丢弃退化成 linear墨迹扫描--ink-sweep 850:1010:10每 ~10ms 统计墨色像素数差平台 跳变就是 stallpop 失效特征其他参数--threshold墨迹亮度阈值默认 120、--root默认#logo-root、--viewport、--scale、--report。python3 scripts/probe_motion_continuity.py logo_motion.html \ --times 500,700,900 \ --probe #draw-stroke:stroke-dashoffset,#pen-glint:offset-distance python3 scripts/probe_motion_continuity.py logo_motion.html \ --ink-sweep 850:1010:101️⃣1️⃣ export_claude_videos.mjs4K120 视频批量导出Node.js 脚本把 docs/index.html 中的 5 个内置 Logo 动画N、Focus、Continuum、Horizon、CueRecord以3840×2160 120fps逐帧渲染并合成视频支持透明背景导出。命令行标志见 export_claude_videos.mjs标志说明--onlyn,focus只导出指定动画按 slug 或名称--transparent透明背景导出--transparent-mov透明 MOV 格式--keep-frames保留中间帧目录node scripts/export_claude_videos.mjs --onlyhorizon,continuum快速上手环境要求清单按 README.md 的说明这套 Pixel2Motion 脚本工具链需要Python 3.10依赖Pillow与numpyChrome / Chromium几何渲染与 HTML 渲染不在默认路径时设CHROME_BINPlaywright确定性截帧与运动连续性 QApython3 -m venv .venv .venv/bin/pip install pillow numpy playwright .venv/bin/python -m playwright install chromium总结按阶段选脚本的最快路径你想做的事直接运行把位图 Logo 变成平滑可动 SVGraster_logo_trace.py→render_overlay.py→svg_path_audit.py拟合 ∞ / 花体自交叉标记fit_ribbon_centerline.py生成可交互动画 HTML 交付物animate_svg_showcase.py证明动效质量截帧 缓动 连续性capture_motion_frames.pyprobe_motion_continuity.py产出高清/透明视频export_claude_videos.mjs配合 SKILL.md 的三阶段工作流与 references/ 中的动画原则、揭示模式、HTML 交付模板等参考文档这 11 个脚本工具就构成了一条从像素 Logo 到可验收动效证据的完整流水线。【免费下载链接】pixel2motionAI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.项目地址: https://gitcode.com/gh_mirrors/pi/pixel2motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考