简笔动画(Sketch Animation)
输入一个主题,产出一段简笔动画:白板纸底 + 黑色圆头线条,逐笔画出,元素再动起来。
工作流程
- 构思分镜:把主题拆成 1–5 个节拍,先写分镜表(时间 / 画面元素 / 动作 / 字幕)。
抽象概念用 references/drawing-guide.md 末尾的"隐喻表"翻译成具体画面。 - 复制模板:拷贝 assets/template.html 为工作文件,笔墨规范、画出动画、
常用动效已内置,只改三处:data-duration总时长、<svg>内的场景内容、底部自定义 keyframes。 - 绘制画面:从 references/drawing-guide.md 的图库挑元素拼装
(6 种火柴人姿态 + 自然/动物/物品/符号共 38 个图样,直接复制改 translate/scale)。
图库没有的元素,按该文件的"线条规范"自绘:一条路径一笔画,5 笔以内。 - 编排动画:按 references/animation-guide.md 用
--delay
排时间轴:先画出、再动作、后强调、字幕收尾。节奏/时长按用途查该文件的表。 - 校验:截图或渲染抽查首/中/尾帧,对照 animation-guide.md 的"常见坑"清单检查
(漏 pathLength、旋转轴心、fill-mode、层叠顺序)。 - 交付:
- 网页动画:保存版本供浏览器预览播放;
- 视频:运行渲染脚本导出 MP4/GIF(见下),复制到输出目录交付。
渲染为视频
python3 scripts/render_animation.py animation.html -o out.mp4 # MP4(24fps)
python3 scripts/render_animation.py animation.html -o out.gif --fps 12 # GIF(小体积降 fps)
- 时长自动读
<body data-duration>,也可用--duration覆盖;--hold控制结尾定格(默认 0.5s) - 捕获是确定性的(暂停后逐帧步进 CSS/SMIL 动画),不依赖实时播放,可用
--selector换捕获区域 - 环境需要 playwright + chromium + ffmpeg;脚本内
CHROMIUM_CANDIDATES可改浏览器路径
硬性规则
- 只许一种墨色
#2b2b2b+ 至多一种强调色#c0392b,纸底#fdfdf8;不加阴影、渐变、照片素材 - 每个要"画出"的路径必须带
pathLength="1";所有动画纯 CSS/SMIL,不写 JS - 一幕元素 ≤5 个,全片字幕每行 ≤14 字,结尾留静帧
- 时长默认 10–20s;用户没说要视频就只交 HTML,要了再渲染