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