hand-drawn-canvas-animation

手绘画布动画

制作一部在笔触和动作上都充满手绘质感的影片。 角色动画默认采用完整姿势绘制、富有表现力的线条和有意安排的曝光。 先设计关键帧和分解图，再制作任何骨骼绑定或纹理。 渲染器使用 Canvas 2D；创作形状时可以使用 SVG 路径数据。不需要 Blender 或视频模型。WebGL 不是依赖项。交付一部包含本地模块的 HTML 影片和一个离线 MP4。时长和格式遵循需求；一段简短而完整的动作是制作长片的起点。

选择合适的参考资料

• 阅读 style.md，了解五种风格及其质量标准。
• 对于结合多种风格或技法的影片，请阅读 mixed-media.md。在绘制不同风格的样片之前，先规划材质为何变化，以及哪些元素会贯穿过渡。
• 阅读 redrawn-animation.md，了解默认的线条主导角色工作流、完整动画赛璐珞、辅助中间帧和曝光表。
• 在为角色或摄像机制作动画之前，阅读 motion.md。
• 阅读 studio.md，了解曝光轨道、稳定线条、接触 IK，以及用于可选变形和构造辅助的材质。
• 阅读 architecture.md，了解核心 API 和导出。
• 阅读 doodle.md，了解照片来源、锚点和遮罩； 阅读 found-motion.md，了解描摹动作； 阅读 sand.md 或 paper3d.md，了解这些媒介。
• palettes.md、scenes.md 和 reference-films.md 包含可选的调色板、场景手法和历史参考。它们不是强制的影片结构。

工作流

1. 填写 brief-template.md。常规选项可自行推断；仅询问会对结果产生实质影响的未定事项。分别指定预期素材和动作参考。选择一个主要宽高比；其他格式需要重新审视构图，而不只是更改画布尺寸。
2. 创建一个项目文件夹。将 assets/core.js、assets/studio.js、assets/cels.js、可选的 assets/materials.js、scripts/render.mjs 和 scripts/package.json 复制到其中。对于角色，研究 examples/sketchbook-bird.html，并通过完整绘图构建原创角色阵容。示例中的导入路径使用 ../assets/；在独立项目中，请将其改为本地模块路径。assets/film-template.html 是旧版绑定演示，可用于了解运行时连接方式，但不是默认的视觉模型。使用 npm i --no-audit --no-fund 安装本地渲染器依赖项；需要系统级 Chrome 和 ffmpeg。可复用的引擎修改应保留在技能中，而不是复制到各个影片中。
3. 确定绘图方案：剪影、比例、表情、必要视角、线条层级、具有辨识度的笔触，以及少量材质样例。以交付尺寸和 240 px 尺寸进行渲染。材质无法弥补姿势不清的问题。简单图形无法胜任时，应使用精心设计的曲线和替换绘图。
4. 规划最难动作的关键帧和分解动作。标出接触、视线、预备动作、重心转移和反应。使用足够的控制项来表现动作；部件数量和参数数量都没有固定限制。制作有限张数的整幅绘图曝光表。几何插补仅适用于相互对应的形体；对于重叠关系变化、头部角度变化、挤压变形的剪影和表情，应重新绘制。先不加装饰性纹理，确定动作时序。刚性运动或电机驱动的运动不要添加弹簧效果。
5. 构建整部影片前，先完成一个有代表性的制作镜头。评估正常速度播放、连续帧条带和静帧。添加更多场景前，先修正解剖结构、间距、接触和线条稳定性。
6. 根据节拍表构建其余镜头：起始时间、时长、观众注意到的内容、主要动作、摄影机和声音提示。剪辑、转场、蓝图视图、蒙太奇、锚点和收尾都是艺术选择。给每个动作留出足够的时间，确保观众看得清。混合材质时，应在变化前后延续角色的动作、位置或实体物件。仅更换调色板并不能构成新的风格；几个精彩却互不关联的镜头也无法构成故事。
7. 渲染并检查。先使用 --grid 24，然后在快速动作或接触动作附近使用 --strip 48,12，并使用 --only 48 检查全尺寸细节。运行完整渲染器以生成 MP4 和配套乐谱。仅凭接触表无法通过动作质检。如果无法播放，请明确说明这一限制。
8. 交付源文件、依赖项和素材、MP4、接触表，以及已知的其他限制。验证时长、尺寸、帧数和解码是否成功。切勿仅因代码或检查清单通过就称影片达到工作室品质；应根据所选视觉参考评估实际结果。

制作不变量

• defineFilm 默认使用 24 fps。场景会接收连续的 tau；i 仍是 pulse、boil 和旧片段使用的传统 12 Hz 索引。为每个动作使用曝光轨道。 一拍、二拍、三拍和停格都有效。
• 将摄影机时序、绘画曝光和根运动分开处理。检查它们叠加后的屏幕空间运动，尤其是在跟拍镜头中。避免重复量化。
• 随机性使用固定种子。每张绘画只生成一次笔触，并使用稳定的语义 ID。停格绘画也会停留其笔触。种子变化应对应新绘画，而不是每个输出帧。在变形工作流中，使用稳定的静止空间笔触。明确纹理属于纸张、物体还是屏幕。即使种子固定，如果采样位置或拓扑发生变化，纹理仍可能游移。
• 在相同的固定运行时环境中，每一帧都必须能在跳转后重现。Sand 使用固定步长模拟和有界检查点。字体和浏览器差异可能导致不同机器上的像素不同；若需要可复现性，请提供字体或使用路径字形。导出前应等待字体和照片加载完成。
• 在计划释放之前，保持物理接触。IK 会将不可达的目标限制在可达范围内；检查返回的误差并调整姿势，不要拉伸骨骼。
• 记录外部媒体的来源和许可。仅使用符合预期交付用途的素材。可选 SVG 是路径几何，不会自动生成绑定。

质量门槛

**绘画：**轮廓清晰；不同视角下比例一致；外轮廓线与内部线条粗细受控；笔压、收尖和断笔有意为之；没有意外相切或关节断裂。避免用椭圆拼出四肢，再覆盖一层纹理。对于选定媒介，干净的曲线和对齐的色块仍然有效，但默认草图应保留可见的绘画笔势。抖动、错位和沸动都应有明确目的。

**动作：**完整姿势要有重新绘制的感觉；关键姿势意义明确；过渡姿势清晰易读；间距设计有意为之；重量感可信，接触点稳固。在正常速度和逐帧查看时，检查过冲、摄影机跟拍、拓扑变化和快速运动。必要时使用经过设计的拖影；旧版 smear() 会产生重影拖尾，而不是新绘画。

**材质：**墨线排线应顺应形体；石墨应体现笔压和明暗；risograph 色版应协调套准；屏幕墨迹可以是纯色；涂鸦应与照片互动。避免颗粒过多、光栅相位变化和非预期闪烁。对于混合媒介作品，应将转场作为动作来检查，而不只是查看风格板。如果天气推动场景发展，其力量应同时影响环境和角色。如果纸张展开，应展示紧凑的初始状态、折页轴和相连的底座。

**交付：**不得有页面错误、意外空帧、动作被截断、过期帧或未完成的片尾字样。如果要求片尾卡，应让其完成显示并停留足够时间以供阅读。检查编码后的视频，而不只是 PNG。

可运行的示例和命令

examples/becoming-phoenix/phoenix.html 是一部配有原创音乐的完整 60 秒影片。它通过一个故事融合了全部五种风格，以及沙粒和纸张投影。研究 inkScene，了解如何呈现动态风暴；研究 ensurePrintedPage，了解如何让真实的印刷品变成页面；研究 unfoldPhoenix，了解如何错落展开翅膀和尾部。示例中的品牌元素仅适用于该示例。请根据新需求选用合适的技巧，而不要照搬其镜头清单。

examples/sketchbook-bird.html 是主要的铅笔／墨线绘画研究：包含九个全身关键帧、辅助中间帧、替换式眨眼和摄影表。examples/weight-study.html 是一项次要的 7 秒接触／重量研究，可通过 --look ink|pencil|riso|screen|doodle 使用五种风格渲染。它展示的是实现机制，而不是重绘角色的美学目标，也不能证明影片达到长片水准。examples/material-studies.html 则加入了沙粒位移和页面卷曲的特写。早期示例对特定场景手法仍有参考价值；请参阅上文中的相关说明。

node scripts/render.mjs examples/sketchbook-bird.html --look pencil --grid 18 --out /tmp/pencil-preview
node scripts/render.mjs examples/sketchbook-bird.html --strip 58,24 --out /tmp/motion-preview
node scripts/render.mjs examples/sketchbook-bird.html --width 1920 --out /tmp/drawn-film
node scripts/verify.mjs

除非指定 --ar，否则渲染器会遵循影片的宽高比。每次完整渲染都会为自身准备帧，然后在编码成功后替换该影片的输出文件。旧 PNG 不会让较短版本的影片变长。--grid、--strip 和 --only 是预览模式，不会替换完整 MP4。

与 Remotion 集成时，请进行时间基准转换： drawFrame(Math.min(__NDRAW - 1, Math.floor(frame * __fps / compositionFps)))。 如果影片和合成都采用 24 fps，则只需使用 drawFrame(frame)。