npx skills add https://github.com/vibe-motion/skills
nolangz/skills · Archived
svg-assembly-animator
为 SVG 矢量图创建?
Installation
$
npx skills add nolangz/skills --skill svg-assembly-animator
Stronger alternatives
This repository is archived — consider an actively maintained alternative.
disney-animation-rule-skill
Same source
nolangz/skills
Apply Disney's 12 principles as practical design and engineering rules for procedural animation…
1 installs
wechat-2d-render
Same source
nolangz/skills
Clone or update https://github.com/sxhzju/wechat-2d and render the default WeChat-style 2D chat…
1 installs
threejs-earth-render
Same source
nolangz/skills
Clone or update https://github.com/vibe-motion/threejs-earth and render the Three.js Earth rout…
1 installs
ruler-progress-render
Same source
nolangz/skills
Clone or update https://github.com/sxhzju/ruler-progress-animator and render a ruler progress v…
1 installsSimilar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
assembly-bill-vote-search
Similar name
nomadamas/k-skill
열린국회정보 Open API를 k-skill-proxy 경유로 호출해 의안 검색·상세와 국회의원 본회의 표결정보를…
1.4K installs
paper-assembly
Similar name
lingzhi227/agent-research-skills
Orchestrate the full paper pipeline end-to-end. Manage state propagation between phases (litera…
1.4K installs
svg-assembly-animator
Similar name
vibe-motion/skills
为 SVG 矢量图创建充满“力量感”与“速度感”的零件组装动画，并支持一键导出 30fps 的透明背景序列帧。…
1.1K installs
assembly-x86
Similar name
mohitmishra786/low-level-dev-skills
x86-64 assembly skill for reading, writing, and debugging assembly code. Use when reading GCC/C…
489 installs
assembly-arm
Similar name
mohitmishra786/low-level-dev-skills
AArch64 and ARM assembly skill for reading and writing ARM assembly code. Use when reading GCC/…
486 installs
assemblyai
Similar name
assemblyai/assemblyai-skill
Use when implementing speech-to-text, audio transcription, real-time streaming STT, audio intel…
442 installsAlso in this package
Other skills from nolangz/skills.
npx skills add nolangz/skills
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Claude Code
Not declared
Cursor
Not declared
Codex
Not declared
GitHub Copilot
Not declared
Windsurf
Not declared
Gemini CLI
Not declared
Cline
Not declared
OpenCode
Not declared
Also listed on
Alternate registries and mirrors of this skill.
Repository health
Stars
1
Default branch
main
Status
Archived
Package contents
Files included with this skill beyond the listing page.
-
skill md
SKILL.md2,134 B -
docs
SUMMARY.md268 B
History
- First seen on skills.sh
- First recorded snapshot · 2 installs
SKILL.md
SVG Assembly Animator
这个 Skill 专门用于将静态 SVG 转换为具有专业动效（Viscous & Dynamic 风格）的 HTML5 动画，并提供透明序列帧导出功能。
核心工作流
- 分析 SVG 结构：读取 SVG 文件，识别出主要的“船体/主体”（通常是第一个 path）和“细节零件”（剩余 path）。
- 准备 HTML 模板：
- 使用 GSAP (TweenMax) 作为动画引擎。 - 使用 JSZip 和 Canvas 实现纯前端透明帧导出。 - 加载内置资产 assets/animation_template.html 作为基础。
- 实现动画逻辑（参考
references/animation_logic.md）：
- 打散阶段：利用“反向逻辑”，将零件随机抛射到视口外，并进行极端的轴向缩放（ScaleX: 0.05, ScaleY: 4）以营造速度感。 - 组装阶段： - 主体骨架率先以 elastic.out 效果浮现。 - 零件以 stagger 随机顺序飞入，伴随 back.out 的过冲回弹（Overshoot）。 - 整体场景伴随大角度旋转（180° 或 360°）和缩放。
- 生成与交付：生成
.html文件，提示用户可以在浏览器中预览并点击导出按钮。
动画参数建议
- 标准组装：
duration: 1.2,ease: "back.out(2.5)"。 - 力量组装：
duration: 0.7,ease: "back.out(5)",rotation: -360。 - 优雅组装：
duration: 1.5,ease: "power4.out",stagger: 0.02。
导出说明
- 默认导出 1080x1080 分辨率、30fps 的透明 PNG 序列帧 ZIP 包。
- 如果用户需要合成视频，可建议使用以下 ffmpeg 命令：
ffmpeg -framerate 30 -i frame%04d.png -vcodec proresks -profile:v 4 -pix_fmt yuva444p10le output.mov
关联资源
- 动画经验法则：
references/animation_logic.md - HTML 基础模板：
assets/animation_template.html