跳转到使用指南
Whiteboard Animation作者 iart-ai

Whiteboard Animation Skill.

创建 SVG 绘制讲解动画,让手持记号笔的图像跟随每一笔。

  • 白板动画
  • 讲解视频
源文件解读 · whiteboard-animationSKILL.md
任务 创建 SVG 绘制讲解动画,让手持记号笔的图像跟随每一笔。 产出 独立 HTML 绘制动画场景,或按要求制作的视频合成。 开始前的准备 提供绘制顺序、线稿和笔尖位置清晰的记号笔手部素材。如绘制需要跟随讲话,附上旁白时序,并明确选择 HTML 预览还是视频交付。
编辑摘要 · 源文件核查于 2026-11-02 · 非生成示例

01 功能说明

创建 SVG 绘制讲解动画,让手持记号笔的图像跟随每一笔

用有序笔画、校准的笔尖运动、旁白时序与精确时间视觉检查,构建白板动画场景。

基于来源的工作流并非执行基准测试

工作方法

whiteboard-animation 模拟手绘图表或文字的过程。SVG 笔画依序显现,记号笔手部图像跟随当前绘制位置。手部位置和已显现路径使用同一个进度值,因此能在精确时刻一起检查。

源文档区分简短浏览器场景与带旁白的视频导出。独立场景使用单个 HTML 文件和可定位时间的时间线;完整影片将相同机制放入逐帧驱动的合成。笔画顺序、抬笔和旁白时序都是设计的一部分。

预期交付物

  • 独立 HTML 绘制动画场景,或按要求制作的视频合成。
  • 有序 SVG 笔画和经过校准的记号笔手部素材。
  • 显示绘制中手部位置及完成白板的定格帧证据。
查看示例简报

从简报到审查

  1. 01
    准备可绘制画稿

    将插画转换为按合理绘制顺序排列的开放路径。为填色区域提供轮廓,使其可以先绘出轮廓再显示颜色。

  2. 02
    将笔尖绑定到笔画

    测量手部素材中的笔尖偏移,让位置与笔画显现共用同一进度。在独立路径之间抬笔。

  3. 03
    编排并检查

    将每幅绘制内容与对应旁白节拍对齐,再定格到笔画中途。检查笔尖对齐、最终完成度、布局及白板各部分之间的转场。

02 适用场景

适合什么场景

提供绘制顺序、线稿和笔尖位置清晰的记号笔手部素材。如绘制需要跟随讲话,附上旁白时序,并明确选择 HTML 预览还是视频交付。

适合的场景

  • 图表应随讲解逐步展开顺序绘制能将注意力集中到当前关系,而不是一次展示整块白板。
  • 手写是效果的一部分源文档涵盖字形路径及按阅读顺序显现的方式。

需要检查的限制

  • 填色画稿并非天然可绘制实心复合形状需要预处理,才能实现可信的单笔显现效果。
  • 带旁白导出需要额外流程单文件网页示例本身不会生成带配音的 MP4。

请提供这些输入

  • 有序内容提供插画、标签和预期绘制顺序。
  • 手部素材提供手持记号笔的图像,或批准使用一张笔尖位置可测量的图像。
  • 旁白与目标提供配音或带时间的脚本、画面尺寸及所需输出格式。

03 关键决策

影响结果的关键选择

  1. 可信的笔尖位置

    共用进度可防止手部跑到可见线条前方。

  2. 有目的的笔画顺序

    抬笔和依序绘制让动作在物理上清晰合理。

  3. 可检查的中间状态

    笔画中途的静帧能暴露正常速度播放时不易察觉的问题。

04 示例任务

从一份具体的需求开始

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

查看源文件和环境要求

提供插画、标签和预期绘制顺序。

上游源文件
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md

下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求;这不是安装命令。

先完成一项明确的交付物

运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。

示例简报
使用 whiteboard-animation,依据我提供的线稿与旁白讲解三步注册流程。按口述顺序逐步显现,全程使用同一只持笔手。准备开放路径并校准笔尖,使其始终贴合绘制前沿。轮廓完成前隐藏填色,在不同绘画内容之间抬笔。交付支持精确时间定位的独立 HTML 预览,并提供减少动态效果时使用的完成白板静态状态。在提出带旁白的视频导出方案前,检查开头、每一步笔画中途的画面和最终白板。

检查结果

根据以下可观察标准检查实际输出。

  • 在笔画中途定格,确认笔尖位于已绘线条末端。
  • 检查抬笔、路径顺序和先轮廓后填色的行为。
  • 验证最终笔画完整,并确认减少动态效果的静态白板清晰可读。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
iart-ai
技能文件
SKILL.md
许可证
MIT
已审查的快照
2026-11-02 · 3e2d411b725d
编辑来源摘要
创建 SVG 绘制讲解动画,让手持记号笔的图像跟随每一笔。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前可能想问

可以直接为填色 SVG 添加绘制动画吗?

源文档要求可绘制笔画或预处理轮廓。单独的填色剪影不能提供记号笔应跟随的路径。

手部如何保持对齐?

文档机制按照 stroke-dashoffset 使用的同一进度采样路径,再从手部位置中减去测量出的笔尖偏移。

包含旁白吗?

它可以按旁白规划绘制。要生成已合成旁白的视频,需要逐帧驱动的视频流程,而不是仅使用独立 HTML 预览。

OpenDesign

让需求和设计工作保存在一起。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程前,请检查其自身的设置说明。

上游源文件
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md