srt-whiteboard-animation 白板动画时序模型详解如何把每一笔墨迹落在字幕节拍上【免费下载链接】srt-whiteboard-animation将 SRT 字幕做成暖米黄纸张底的流式笔迹白板手绘动画 skillmask 分区遮罩编排 stream 连续笔迹ink→color。项目地址: https://gitcode.com/gh_mirrors/sr/srt-whiteboard-animationsrt-whiteboard-animation 是一个把SRT 字幕转成暖米黄纸张底白板手绘动画的 Skill。它让动画的节奏完全由字幕驱动——先解析字幕时间跨度确定每幕总时长再按字幕事件的先后顺序串行绘制各区域最后以 2:1 权重切分起笔 ink → 添彩 color两段笔迹。本文用仓库里现成的猴子山案例带你拆解这套三层时序模型让每一笔墨迹都落在字幕节拍上。先看效果笔迹如何跟随字幕流动 下面这段动效对应字幕小猴坐山顶拿香蕉 → 大猴冲来抢走 → 孩子们鼓掌大笑。注意三个主体是依次出现的上一个区域的笔画画完并添彩后下一个区域才开始落墨整个画面像有人正在纸上边听口播边画。原始线稿如下动画中的每一根线条都来自这张图三层时序模型一条完整的节拍链时序模型详见 SKILL.md 的时序模型章节本质上是一条三层节拍链从宏观到微观层层收敛层级决定什么由谁驱动第一层sceneDurationMs每幕总时长该幕字幕的时间跨度第二层startMs/durationMs每个区域何时起笔、画多久字幕事件的叙事先后第三层 ink : color 2 : 1区域内先铺线稿再添彩的节奏渲染器固定权重三层对齐后笔尖落下的瞬间就自然落在字幕念到对应事件的瞬间。第一层sceneDurationMs —— 幕时长对齐字幕跨度用 scripts/parse_srt.py 解析字幕文件它会做两件事把每条 SRT 解析成毫秒级startMs / endMs并按25–35 秒/幕的建议把连续字幕聚成分镜每幕给出sceneDurationMspython scripts/parse_srt.py 字幕.srt --target-sec 30 --min-sec 25 --max-sec 35这个sceneDurationMs会被写进标注 JSON成为该幕动画的总时长上限——幕有多长由口播有多长决定而不是画面画完才停。第二层区域串行作画 —— startMs 不重叠stream 画法下画面中只有一支笔所以同一幕内的区域必须在时间上依次进行每个区域用startMsdurationMs定义作画窗口且窗口之间不允许重叠下一区域从上一区域startMs durationMs之后开始中间留100–300ms 呼吸间隙模拟真实书写中抬笔换位的节奏未开始的区域在画布上完全隐藏——渲染器用允许掩码区域矩形扣除后续区域与protectedRegions保证这一点因此后画的对象绝不会提前露出线条。区域排序也不按画面位置而是按字幕叙事语义场景铺垫 → 关键人物/物体 → 动作冲突 → 反应/结果由sequence字段从 1 开始连续编号。第三层ink : color 2 : 1 —— 区域内的两段笔迹每个区域的durationMs会被渲染器按 stream 画法 切成两段帧起笔 ink 段占 2/3笔尖沿骨架/网格连续滑行铺下深灰线稿留足时间让人看清笔迹流动添彩 color 段占 1/3同一区域换原色点亮恢复成彩色画面。权重在 scripts/stream_render.py 的Config中固定为ink_weight 2 / color_weight 1默认 60fps 输出保证笔尖移动接近连续书写。凝视收尾结尾至少停留 0.5 秒全部区域画完后渲染器会自动补帧到sceneDurationMs并强制结尾停留至少0.5 秒完整原图render_to 凝视逻辑gaze_until max(total_ms, cur_ms 500)这一段凝视让观众看清完整画面也为下一幕的合并留出干净的接缝。一张时间表看懂猴子山香蕉案例仓库的 examples/scene-01-monkey-mountain-banana.annotation.json 是理解时序的最佳教材。三个区域各绑一条字幕事件sceneDurationMs为 8600ms顺序区域narrativeRole对应字幕事件窗口 (ms)ink 段 (2/3)color 段 (1/3)1left 左侧场景场景铺垫小猴坐在山顶拿着香蕉300 – 2900300 – 20332033 – 29002center 中间主体动作冲突大猴冲来抢走香蕉3000 – 56003000 – 47334733 – 56003right 右侧反应反应结果小朋友们鼓掌大笑5700 – 81005700 – 73007300 – 8100–凝视停留收笔看全图—8100 – 8600停留 500ms 完整原图注意两个细节区域 1 结束于 2900ms区域 2 从 3000ms 起——100ms 呼吸间隙区域 2 → 区域 3 同理最后画完是 8100msmax(8600, 8100 500) 8600凝视段恰好补足到字幕跨度。每个区域在标注里的时序只有两个核心数字非常轻reveal: { startMs: 300, durationMs: 2600 }direction和handPath仅供预览台做矩形代理演示成片笔迹由渲染器自动生成无需精调。预览台调节拍三个关键操作 ✏️时序不是拍脑袋定的全部在本地预览台 assets/preview.html 里可视化调整Chrome / Edge 打开点打开文件夹载入场景目录即可无需服务器改开始/结束(ms)右侧面板直接编辑区域的开始与结束时间durationMs 结束 − 开始只读把窗口对齐到该区域对应字幕的时长拖模块列表调整顺序拖动即自动重排sequence选中模块还会自动高亮关联字幕——顺序错了节拍必然错按播放核对揭示播放时未开始的区域不显示可直观检查是否提前露线、呼吸间隙是否自然。没有合适起点时可用150 像素/秒 × 绘制距离做durationMs的初始估算再按字幕微调。保存后写回原.annotation.jsonsceneDurationMs会自动对齐到最后一个区域结束 0.5s。保存标注后可先用 scripts/render_annotation_preview.py 生成区域编号/方向检查图核对分区确认无误再走命令行渲染。常见时序问题与质量检查清单渲染前后按这份清单过一遍基本能覆盖所有时序翻车点完整标准见 SKILL.md首帧干净开场是纯暖米黄纸张底没有任何提前露出的线条顺序一致sequence、startMs与字幕事件先后一致而非按画面左右排中段抽查任意重叠模块的中段帧里未开始区域与保护区不出现笔尖贴合手部素材assets/drawing-hand.png始终贴近正在推进的笔迹收尾停留每幕结尾至少 0.5s 完整画面多幕合并用 scripts/merge_scenes.py 按字幕分镜顺序合并合并后时长与分镜一致。小结srt-whiteboard-animation 的时序模型可以浓缩成一句话幕时长问字幕、出场顺序问叙事、内部节奏问 2:1。三层节拍层层对齐后渲染器只需忠实地按startMs排队落墨动画自然与口播同频。掌握这套模型你就能把任何一份 SRT 字幕变成节奏严丝合缝的白板手绘视频。【免费下载链接】srt-whiteboard-animation将 SRT 字幕做成暖米黄纸张底的流式笔迹白板手绘动画 skillmask 分区遮罩编排 stream 连续笔迹ink→color。项目地址: https://gitcode.com/gh_mirrors/sr/srt-whiteboard-animation创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考