1实现原理 · 为什么它能做到
核心机制是 SVG stroke draw-on：路径把 stroke-dashoffset 从整长收到 0，视觉上等于从起点到终点画出；配 pathLength="1" 归一化后，任意真实长度的路径都由同一个 0→1 进度值驱动。
skills/whiteboard-animation/SKILL.md
A path "draws itself" by animating `stroke-dashoffset` from its full length down to 0 — the dash gap shrinks, exposing the stroke from start to end.
注：整条 skill 的其余内容都是围绕这一个机制的工程化（素材、节奏、手、擦除、导出）。
「手跟着笔尖」是这个幻觉的全部：每帧取 getPointAtLength(len*k) 得到笔尖坐标，再把手的笔尖偏移 NIB 对齐到该点；dashoffset 与手位必须由同一个进度值 k 驱动，否则两者会互相追不上。
skills/whiteboard-animation/SKILL.md
`getPointAtLength(len * k)` is the workhorse: it returns the on-path coordinate at the same progress driving `strokeDashoffset`, so the nib stays glued to the growing stroke.
注：同 pack 的 diagram-animation 只要求「线画出来」，这里多了一个必须与线同步的实体——这是它验证回路要取「笔画中途」帧的原因。
节奏由旁白驱动而非固定计时器：每段绘制的总时长约等于它所配的 VO 行（基线 ~2.3 词/秒），被旁白念到的标签要在该词说出的同时画完。
skills/whiteboard-animation/SKILL.md
Draw-on duration should track the spoken line, not a fixed timer.
注：与同 repo 的 explainer-video 共用同一套 VO 语速口径，跨 skill 口径一致。
绘制顺序按「人真的会怎么画」编排：SVG 里笔画按绘制顺序排列、按文档顺序动画；元素在旁白顺序里一次只出现一个，每笔落地后留 0.4–1.0s 的 hold，且手要离开板面而不是停在空处。
skills/whiteboard-animation/SKILL.md
| Hold | pause hand off-board after element completes (0.4–1.0s) |
注：「一次一个笔尖」是硬约束：文档明确写 the eye (and the single hand) can only follow one tip。
素材必须先转成单笔画开放路径：填充团块没有 stroke 可动画，处理方式是先画轮廓再让填充跟上来；手写体用描边字体转路径按阅读顺序逐字母画，或用矩形 mask 横扫假装手写。
skills/whiteboard-animation/references/whiteboard-pipeline.md
Draw-on animates strokes, not fills.
注：这条把「能不能用」前置到素材阶段——多数白板动效失败在素材是填充图形而非描边路径。
板面需要清理机制：擦除/转场给三条路线（clip-path 或白色矩形擦除、反向 draw-on 回卷、淡出后重画），并要求全片统一擦除语法以免板面堆叠杂乱。
skills/whiteboard-animation/SKILL.md
Keep one clear grammar (always wipe left-to-right, say) so transitions feel deliberate.
注：统一语法是「像人画的板」与「随机切换特效」的分界。
交付 = 单文件 HTML（内联 SVG 路径按绘制顺序、手部资产内联或 data-URI、一个内联 script 主时间轴）+ ?t=N 冻结；验证必须取至少一个「某个笔画的中途」时刻，因为那才是笔尖贴合幻觉成立或被破的点。
skills/whiteboard-animation/SKILL.md
Pick at least one `t` in the *middle of a stroke* — that is where the hand-on-tip illusion is proven or broken.
注：把验证帧的选取位置写成硬要求，而非「随意看几帧」——这是本文档最锋利的验收设计。
需要成片时把同一套 draw-on 搬进 Remotion：用 useCurrentFrame()/fps 同时驱动 strokeDashoffset 与手 transform，使渲染逐帧确定（无 timer、无 rAF）。
skills/whiteboard-animation/references/draw-on-recipes.md
Drive both `strokeDashoffset` and the hand transform from `useCurrentFrame()` so the render is deterministic — no timers, no rAF.
注：网页层与视频层共用同一机制、只换驱动源，避免两套实现走偏。
2核心能力
01stroke-dashoffset draw-on（vanilla 实现 + pathLength="1" 归一化版）
02手跟随笔尖（NIB 偏移 + 每帧 getPointAtLength 定位）
03笔画间抬手与多笔顺序绘制（liftTo + drawShape 逐笔循环）
04GSAP 双插件变体：DrawSVGPlugin 画线 + MotionPathPlugin 带手（alignOrigin 等价 NIB）
05手写两条路线：字形转路径逐字母画（真逐笔）或 mask 横扫假写（低成本）
06填充跟轮廓：轮廓画完后再淡入填充或 clip-inset 洪入，读作「上色」
07擦除 / 反绘（un-draw，手反向跟随）
08手部资产标定流程：一次性量准笔尖偏移、全片用同一只手、镜像后需重测
09Remotion 帧驱动移植（同一机制产出帧确定的 MP4/GIF）
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | npx / Playwright（无头截图） |
| cli | ffmpeg（contact-sheet.sh 拼图） |
| cli | npx -y playwright（仓库根 seek-shot.sh 内部） |
| package | GSAP 及其 DrawSVGPlugin / MotionPathPlugin（reference 以裸包名 import，未指定 CDN） |
| network | 手写字体（Caveat / Patrick Hand / Shadows Into Light 等），来源由使用者决定（@font-face 自托管或字体 CDN） |
| api | 无第三方业务 API；旁白由使用者自备或宿主侧 TTS 产出 |
4风险提醒 风险提醒：橙色 · 评估后使用
风险提醒：橙色 · 评估后使用
- 复核回路引入远程包与浏览器二进制 — 跑一次验证即从 npm 拉 playwright 并下载 Chromium；离线/内网环境会失败。可改用本地已装的 Playwright/浏览器或人工截图完成同一回路。
- GSAP 插件与字体的外部依赖 — GSAP 路线需 DrawSVGPlugin / MotionPathPlugin（3.12 起免费但仍属外部包）；手写字体多来自 Google Fonts 或第三方字体源，交付 HTML 的字体/库端点由使用者决定，宜自托管并固定版本。
- 素材信任面 — skill 要求把用户的插画/字体转成路径并内联进交付 HTML；若素材是来源不明、含 script 或外链的 SVG，会被原样带进产物。使用前应对素材做净化。
- NIB 标定需人工迭代 — 笔尖偏移靠「贴上去截图再调」的循环（文档自述），无自动测量；不同手部资产的偏移不同，换手或镜像后必须重测，易被忽略而导致笔尖悬浮。
- 单文件 HTML 规模上限 — 内联 SVG + 内联手部资产 + 内联 driver 在复杂长片时会迅速膨胀；文档也承认这一点并给出 Remotion 出口，但两条路径的维护成本不同。
风险提醒：橙色，评估后使用。判级对象是 skill 自身目录（skills/whiteboard-animation/：SKILL.md + references/ 两份 cookbook + 0 字节 README.md；目录内无脚本、无凭证、不写盘）。触发橙档的是它规定的复核回路与依赖：① SKILL.md 的 Verify loop 直接内联 `npx playwright screenshot …`，所引用的仓库根 helper `scripts/seek-shot.sh` 内部是 `npx -y playwright screenshot`——npx 从 npm registry 取包并首次下载 Chromium 二进制，落入分级范式「依赖第三方插件、镜像、远程包」（同作者 pack 先例：logo-animation 同因判橙）；② reference 给出的 GSAP 路线依赖 DrawSVGPlugin / MotionPathPlugin 等第三方包（虽自 GSAP 3.12 起免费，仍属外部包）。skill 本身不读凭证/env、不调业务 API、不采集、不绕过防护，故非红档。触发条件：只有真正跑复核回路（截图/拼图）或加载 GSAP 路线时才发生远程拉取；纯写 HTML、用 vanilla draw-on 或人工查看不触发。
5第二遍独立确认
- [ok] 外部依赖调用点复核（npx playwright / ffmpeg / GSAP 插件 / 字体） — SKILL.md Verify loop 内确有 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/scribe.html?t=1.2" frame-mid.png`；仓库根 scripts/seek-shot.sh 与 contact-sheet.sh 分别为 npx playwright 与 ffmpeg；draw-on-recipes 第 4 节确有 `import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";` 与 MotionPathPlugin 版本；字体建议在 whiteboard-pipeline 第 3 节。四条均落地，非推测。
- [ok] 「手跟笔尖」机制自洽性 — SKILL.md 的 drawOn 与 reference 的 drawOnWithHand 都把同一个 k 同时用于 `path.style.strokeDashoffset = len * (1 - k)` 与 `path.getPointAtLength(len * k)`，并有 liftTo 在笔画间抬手、unDraw 反向跟随——机制自洽，无「手与线不同源」的写法。
- [ok] 无凭证 / 无业务 API 反查 — 三份文档与仓库脚本中无 API_KEY/token/secret/.env 读取、无 curl/wget、无业务端点调用；GSAP 以裸包名 import（无内嵌 CDN URL），字体建议未附 URL。判橙依据是远程包依赖，不含凭据读取。
- [ok] VO 语速口径跨 skill 一致性 — 本 skill 写「Estimate from VO at ~2.3 words/sec」，同 repo 的 explainer-video 写「~2.3 words/sec (140 wpm)」「scene_seconds = line_words / pace + 0.4」——口径一致，跨 skill 可互操作。
- [ok] 目录资产面清点 — skills/whiteboard-animation/ 下仅 SKILL.md（154 行）、references/draw-on-recipes.md（210 行）与 references/whiteboard-pipeline.md（95 行）、0 字节 README.md；无 scripts/、无手部资产实物、无模板/数据——「纯指令 + 内联代码片段」结论成立（手部 PNG/SVG 由使用者自备，skill 只给标定方法）。
- [ok] 跨引用可解析性 — SKILL.md 两处引用均可解析：`scripts/seek-shot.sh`、`scripts/contact-sheet.sh` 位于仓库根（单装本 skill 目录会悬空，需装整个 repo）；`see explainer-video` 指向的 explainer-video 确实存在于本 repo 的 skills/ 下。
- [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 SVG stroke draw-on、跟随笔尖的手、错峰揭示、擦除/擦转场与旁白导出，正文与两份 reference 逐项兑现（含 GSAP 与 Remotion 两条实现路径）；未声称能自动生出手部素材或自动描摹——素材转换只给方法不给工具。
6结论
适合：适合 VideoScribe/Doodly 风格的涂鸦解说：需要「手在板上把插画与手写文字一笔笔画出来」的观感，且素材能整理成单笔画开放路径；也适合把一张静态线稿变成逐步揭示的短动效，或为已有旁白配上同步的手绘板面。
不适合：不适合以填充色块/照片为主要构成的画面（draw-on 机制无法作用于填充图形，需大幅改造素材）；不适合无描边语义的矢量图标自动批处理（需要人工/工具做中心线提取）；也不适合需要真实笔触质感与纸张纹理的精细手绘（本 skill 只做路径揭示，不生成笔触纹理）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 whiteboard-animation.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agente46a8cf637ab1932…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/explainer-video-skills
原始 GitHubiart-ai/explainer-video-skills ↗
Stars26
最近推送2026-06-22
本 skill commit
3e2d411b72许可MIT（仓库根 LICENSE：MIT License / Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 声明 "license": "MIT"，GitHub API license.spdx_id = MIT）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。