Pixel2Motion腳本工具鏈參考:11個輔助腳本的功能、參數(shù)與用法清單【免費(fèi)下載鏈接】pixel2motionAI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.項(xiàng)目地址: https://gitcode.com/gh_mirrors/pi/pixel2motionPixel2Motion 是一個把像素 LogoPNG/JPG/WebP轉(zhuǎn)換成平滑 SVG、再生成 SVG Logo 動畫、HTML 動效演示和 GIF/視頻預(yù)覽的 AI 動畫技能包。它的 scripts/ 目錄內(nèi)置了11 個輔助腳本覆蓋幾何擬合 → 動效生成 → 動效 QA的完整腳本工具鏈。本文給出每個腳本的功能說明、關(guān)鍵參數(shù)清單和典型用法幫助你快速上手這套 Pixel2Motion 腳本工具。工具鏈一覽11個腳本各管什么先花 30 秒看全貌。所有腳本都圍繞 SKILL.md 中定義的Pixel → Vector → Motion三階段工作流#腳本所屬階段一句話功能1raster_logo_trace.pyPhase 2 幾何位圖 Logo 測量/初始描摹2render_overlay.pyPhase 2 幾何渲染 SVG 青色疊加圖 IoU 指標(biāo)3fit_ribbon_centerline.pyPhase 2 幾何閉合變寬絲帶∞、花體字中心線擬合4svg_path_audit.pyPhase 2 幾何Bezier 曲線平滑度審計5overlay_progress_strip.pyPhase 2 幾何生成幾何 QA 進(jìn)展長條圖6svg_to_js_html.pyPhase 3 動效SVG 轉(zhuǎn)靜態(tài) JS 渲染 HTML中間檢查7animate_svg_showcase.pyPhase 3 動效生成最終動畫展示 HTML 交付物8animate_svg_html.pyPhase 3 動效極簡動畫 HTML調(diào)試/QA 兜底9capture_motion_frames.pyPhase 3 QA確定性截幀 膠片條 終幀對比10probe_motion_continuity.pyPhase 3 QA緩動探針 墨跡連續(xù)性掃描11export_claude_videos.mjs產(chǎn)出4K120 視頻批量導(dǎo)出Node.jsPhase 2幾何擬合與 QA 腳本1?? raster_logo_trace.py位圖 Logo 測量與初始描摹當(dāng) Logo 是不規(guī)則剪影、簡單幾何無法描述時用它從位圖提取測量數(shù)據(jù)或起始遮罩。注意輸出是測量輔助件不能直接當(dāng)最終矢量。關(guān)鍵參數(shù)見 raster_logo_trace.py參數(shù)默認(rèn)值說明input位置參數(shù)-位圖 Logo 圖片--outoutputs輸出目錄--colors6最大顏色桶數(shù)--simplify1.1路徑簡化容差--min-area16忽略小于該面積的色區(qū)--alpha-threshold/--bg-threshold12 / 24.0透明與背景判定閾值python3 scripts/raster_logo_trace.py source.png --out outputs2?? render_overlay.py疊加圖 IoU 指標(biāo)一步到位Phase 2 使用頻率最高的腳本用無頭 Chrome 渲染 SVG在原始位圖上生成青色擬合疊加圖并計算 IoU 等幾何指標(biāo)。關(guān)鍵參數(shù)見 render_overlay.py參數(shù)說明svg/source位置參數(shù)擬合后的 SVG 與原始位圖--out必填疊加圖輸出路徑如outputs/fit_iterations/01_overlay.png--render-out同時保存純 SVG 渲染 PNG即final_render.png--report輸出 JSON 指標(biāo)報告--fg-threshold前景判定閾值RGB 之和默認(rèn) 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 不在默認(rèn)路徑先設(shè)置環(huán)境變量CHROME_BIN。3?? fit_ribbon_centerline.py閉合絲帶中心線擬合器專為自交叉變寬絲帶設(shè)計——∞ 標(biāo)記、花體簽名、swoosh 等兩條開放邊界不存在的拓?fù)?。流程Catmull-Rom 中心線支架 → 對位圖自動再居中 → 寬度輪廓 → 亞像素邊緣吸附 → 平滑貝塞爾輪廓。其報告會輸出每個交叉弧段占比arc fractions正是 Phase 3 分體描線動畫需要的切分參數(shù)方法詳見 references/ribbon-fitting.md。關(guān)鍵參數(shù)見 fit_ribbon_centerline.py參數(shù)默認(rèn)值說明source/--seeds- / 必填位圖 Logo種子點(diǎn) JSON閉環(huán)點(diǎn)序 排除圓--out-diroutputs/ribbon_fit輸出目錄含ribbon_path.txt、centerline_path.txt、fit_report.json、preview.svg--recenter3自動再居中迭代次數(shù)--lum-thresh170前景亮度閾值--mask-png/--roi無顯式遮罩 / 限定擬合區(qū)域--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 平滑度審計復(fù)雜曲線看著不平滑時用它體檢檢測噪聲控制柄、切線跳變、微小交替線段和階梯狀描邊段——這些問題即使 IoU 很高也應(yīng)判為失敗。關(guān)鍵參數(shù)見 svg_path_audit.py參數(shù)說明svg位置參數(shù)待審計的 SVG--path-index指定 path 下標(biāo)默認(rèn)取黑色/最長路徑--out-svg輸出貝塞爾分段可視化 SVG默認(rèn)bezier_segments.svg--report輸出 JSON 審計報告默認(rèn)bezier_audit.json--budget本標(biāo)記允許的最大三次曲線段數(shù)--angle-threshold相鄰切線夾角警告閾值默認(rèn) 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 進(jìn)展長條把源圖 → 本輪各次疊加迭代 → 最終渲染拼成一張橫向長條圖作為幾何擬合的證據(jù)鏈。官方倉庫就展示了一張docs/process/ 下的 CueRecord 擬合序列。關(guān)鍵參數(shù)見 overlay_progress_strip.py參數(shù)說明overlays位置參數(shù)或--dir--pattern按迭代順序傳入疊加圖或按 glob 掃描目錄--source原始位圖作為首格面板--final-image最終矢量渲染 PNG作為尾格面板--out輸出長條圖默認(rèn)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 與運(yùn)動 QA 腳本6?? svg_to_js_html.py靜態(tài) JS 渲染 HTML把 SVG 轉(zhuǎn)成通過 JavaScript DOM 調(diào)用重建的獨(dú)立 HTML。它是中間檢查件用于驗(yàn)證 JS 重建管線參數(shù)極簡參數(shù)說明svg位置參數(shù)輸入 SVG--out輸出 HTML默認(rèn)logo.html--title頁面標(biāo)題默認(rèn) Vectorized Logopython3 scripts/svg_to_js_html.py logo.svg --out logo_static.html --title Logo7?? animate_svg_showcase.py最終動畫展示交付物 ?默認(rèn)的交付物生成器。它把 SVG 轉(zhuǎn)成 JS 重建結(jié)構(gòu)、為動效 CSS 包上prefers-reduced-motion保護(hù)并套上展示模板外殼原子動效研究、原則條、重放按鈕、慢動作開關(guān)、速度滑桿以及?tms尋址、?static1、window.__p2mReady等 QA 鉤子。關(guān)鍵參數(shù)見 animate_svg_showcase.py參數(shù)說明svg/--css必填運(yùn)動就緒的 SVG 主動畫 CSS--out輸出 HTML默認(rèn)logo_motion.html--title/--background頁面標(biāo)題 / 背景色--duration-hint總編排時長 ms默認(rèn) 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 兜底參數(shù)與上面幾乎相同svg、--css、--out、--title、--background、--duration-hint見 animate_svg_html.py但不帶原子動效和調(diào)節(jié)器只保留?tms暫停尋址、?static1跳終態(tài)、Replay 按鈕等 QA 鉤子。官方定位調(diào)試與 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鉤子在指定時刻暫停并截圖不用墻鐘抓拍保證可復(fù)現(xiàn)拼出帶時間標(biāo)簽的膠片條并可選地把最后一幀與靜態(tài)渲染做像素 diff驗(yàn)證Final Frame Contract動畫終幀必須精確落在 QA 通過的靜態(tài)矢量上。依賴 Playwright。關(guān)鍵參數(shù)見 capture_motion_frames.py參數(shù)默認(rèn)值說明html/--times必填-帶 QA 鉤子的 HTML逗號分隔毫秒時間戳--outmotion_frames幀 PNG 輸出目錄--strip無輸出帶標(biāo)簽?zāi)z片條 PNG--compare-final無與靜態(tài)渲染 diff 的對照圖--viewport/--scale900x600 / 2.0視口與設(shè)備縮放--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緩動探針 墨跡連續(xù)性掃描兩種模式都構(gòu)建在確定性?tms尋址之上需要 Playwright見 probe_motion_continuity.py模式參數(shù)抓什么計算樣式探針--times 500,700,900--probe #draw-stroke:stroke-dashoffset驗(yàn)證瀏覽器實(shí)際運(yùn)行的緩動你設(shè)計的緩動各時刻值若恰好等于線性占比說明 keyframe 里的var()時序函數(shù)被靜默丟棄退化成 linear墨跡掃描--ink-sweep 850:1010:10每 ~10ms 統(tǒng)計墨色像素數(shù)差平臺 跳變就是 stallpop 失效特征其他參數(shù)--threshold墨跡亮度閾值默認(rèn) 120、--root默認(rèn)#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 視頻批量導(dǎo)出Node.js 腳本把 docs/index.html 中的 5 個內(nèi)置 Logo 動畫N、Focus、Continuum、Horizon、CueRecord以3840×2160 120fps逐幀渲染并合成視頻支持透明背景導(dǎo)出。命令行標(biāo)志見 export_claude_videos.mjs標(biāo)志說明--onlyn,focus只導(dǎo)出指定動畫按 slug 或名稱--transparent透明背景導(dǎo)出--transparent-mov透明 MOV 格式--keep-frames保留中間幀目錄node scripts/export_claude_videos.mjs --onlyhorizon,continuum快速上手環(huán)境要求清單按 README.md 的說明這套 Pixel2Motion 腳本工具鏈需要Python 3.10依賴Pillow與numpyChrome / Chromium幾何渲染與 HTML 渲染不在默認(rèn)路徑時設(shè)CHROME_BINPlaywright確定性截幀與運(yùn)動連續(xù)性 QApython3 -m venv .venv .venv/bin/pip install pillow numpy playwright .venv/bin/python -m playwright install chromium總結(jié)按階段選腳本的最快路徑你想做的事直接運(yùn)行把位圖 Logo 變成平滑可動 SVGraster_logo_trace.py→render_overlay.py→svg_path_audit.py擬合 ∞ / 花體自交叉標(biāo)記fit_ribbon_centerline.py生成可交互動畫 HTML 交付物animate_svg_showcase.py證明動效質(zhì)量截幀 緩動 連續(xù)性capture_motion_frames.pyprobe_motion_continuity.py產(chǎn)出高清/透明視頻export_claude_videos.mjs配合 SKILL.md 的三階段工作流與 references/ 中的動畫原則、揭示模式、HTML 交付模板等參考文檔這 11 個腳本工具就構(gòu)成了一條從像素 Logo 到可驗(yàn)收動效證據(jù)的完整流水線?！久赓M(fèi)下載鏈接】pixel2motionAI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.項(xiàng)目地址: https://gitcode.com/gh_mirrors/pi/pixel2motion創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考