用 SVG 和 TypeScript 制作墨线动画

关于这个 Skill

Line-art Animation 是 Dhruv Jaradi 制作的 MIT 许可 Claude Skill 和小型 TypeScript 库。它引导 Agent 先确定统一的纸张与墨线风格，再从一个人物或场景角落开始，使用 gait() 计算可信的行走，用弹簧和摆锤处理附着物运动，组合可交互场景，并逐帧检查动画。仓库包含无依赖的墨线原语、步态、运动和昼夜配色模块，以及 walker、village 示例和用于固定帧浏览器捕获与参考视频测量的脚本。

为什么推荐

这是一套以文档为核心、配有小型无依赖绘图与运动库的工作流。上游示例展示了目标画风，实际输出仍取决于所用 Agent、浏览器和渲染工具。

适合用来做什么

• 制作小型 SVG 动画人物，或街道、商店、公园、村落等插画场景。
• 在保持手绘墨线风格一致的前提下加入行走、奔跑、骑行、风、悬挂物、互动反应和昼夜循环。
• 为视频捕获可复现的逐帧序列，或先测量参考视频再匹配其节奏和姿态。

先定画风再做动画的工作流

1. 确定视觉语言

   先确定笔画粗细、暖色纸张、人物比例和一到两个平面强调色，再加入运动。

2. 先完成一个人物或角落

   复制无依赖的 lib/ 模块，先完成一个人物或场景角落，检查通过后再扩展完整场景。

3. 计算运动并组合场景

   用 gait() 保持脚部落地并计算可信的行走或奔跑，用 spring() 和 pendulum() 处理附着物运动，再按场景和昼夜指南组织层次、灯光与互动反应。

随附库涵盖的内容

ink.ts 提供 SVG 笔画、形状、墨点、肢体、关节、鞋子和定位辅助函数；gait.ts 提供 walk、shuffle、run 预设；motion.ts 提供弹簧、摆锤、风和关键帧序列；daynight.ts 提供配色和夜间着色。walker 与 village 示例分别展示单个可反应人物，以及包含定时人物、灯光、倒影和指针风的完整场景。

README 与示例上游 SKILL.md

交付前检查运动

上游验收指南要求运行 npm run typecheck 和 npm run build，使用 ?debug 与 window.__step() 精确推进时间，为运动部件查看放大逐帧条，检查互动、昼夜变化和前台帧率。视频场景可用 scripts/capture.ts 按固定帧间隔推进 debug 页面，再交给 ffmpeg 编码。

验收指南视频捕获指南

关于所提供的封面

封面来自 Dhruv Jaradi 上游仓库的 media/night.png，展示昼夜墨线处理方式；它是作者提供的示例，不是 SkillHey 新生成或测试的输出。

作者提供的夜景示例

使用前需要了解

• 上游工作流要求 Node.js 22.18 或更高版本、TypeScript 和 Vite。需要把仓库的 lib/ 模块复制到目标项目，并使用能运行 SVG 组件的浏览器。
• 视频导出需要本地 Chrome 或 Chromium 捕获画面，并用 ffmpeg 编码帧序列；这些工具不包含在 Skill 中。