跳转到使用指南
Motion Canvas作者 VideoZero

Motion Canvas Skill.

使用生成器、响应式信号和可复用节点编写 Motion Canvas 场景。

  • TypeScript
  • Canvas 动画
源文件解读 · motion-canvasSKILL.md
任务 使用生成器、响应式信号和可复用节点编写 Motion Canvas 场景。 产出 沿用项目现有配置的 Motion Canvas 场景代码。 开始前的准备 提供现有 Motion Canvas 项目、已安装版本和包含动作顺序的场景说明。明确哪些值应作为共享信号,哪些时刻需要具名时间事件。
编辑摘要 · 源文件核查于 2026-11-02 · 非生成示例

01 功能说明

使用生成器、响应式信号和可复用节点编写 Motion Canvas 场景

通过生成器时序、响应式信号、节点引用、形状和明确的场景转场,构建 Motion Canvas 场景。

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

工作方法

motion-canvas 是使用 TypeScript 编写 Motion Canvas 场景的框架参考。它解释由生成器驱动的序列、响应式信号、引用和场景层级,再展示如何与形状、文字、路径和媒体结合。

源文件包含实用的状态与时序机制:保存和恢复节点、等待具名事件、运行后台线程,以及结束自定义转场。当智能体已明确要做的场景、需要正确框架概念来表达时,它很有用。

预期交付物

  • 沿用项目现有配置的 Motion Canvas 场景代码。
  • 可复用的信号、组件和时序序列。
  • 可进入项目已配置预览及渲染工作流的项目。
查看示例简报

从简报到审查

  1. 01
    定义场景对象

    创建所需形状和文字,分配引用,并放入清晰的节点层级。

  2. 02
    将状态连接到时序

    用信号表示变化值,用生成器函数安排序列。用 all() 同时执行动作,用 yield* 等待动画结束后继续序列。具名 waitUntil() 事件可让场景对齐旁白提示点。

  3. 03
    检查转场与输出

    启动 slideTransition() 前先添加下一场景的节点,避免其在转场结束后突然出现。自定义 useTransition() 会返回结束函数,必须在转场动画后调用。检查已配置的预览或渲染,并保留项目专属输出设置。

02 适用场景

适合什么场景

提供现有 Motion Canvas 项目、已安装版本和包含动作顺序的场景说明。明确哪些值应作为共享信号,哪些时刻需要具名时间事件。

适合的场景

  • 代码动画需要精确安排动作顺序生成器和具名时间事件让动作间关系明确。
  • 多个对象共享变化值计算信号可以从同一来源推导几何,不必手动更新每个节点。

需要检查的限制

  • 框架必须可用该 Skill 是参考资料,不是自带的可运行 Motion Canvas 运行时。
  • 与编辑器自动化分开时间定位、截图和 HTTP 渲染控制属于配套 motion-canvas-agent Skill。
  • 示例需按项目核对应以现有框架版本和输出配置决定如何调整示例。

请提供这些输入

  • 场景说明描述可见对象、动作顺序,以及要解释的内容或故事。
  • 项目配置提供当前 Motion Canvas 源码和已安装版本。
  • 时序与输出指定时长、事件、画面尺寸和所需渲染格式。

03 关键决策

影响结果的关键选择

  1. 响应式场景关系

    计算信号可以让相互依赖的尺寸保持同步。

  2. 可读的序列

    生成器代码在源码中明确展示等待、并行动作和转场。

  3. 可复用组件

    自定义节点和已保存状态支持重复视觉元素及可逆动作。

04 示例任务

从一份具体的需求开始

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

查看源文件和环境要求

描述可见对象、动作顺序,以及要解释的内容或故事。

上游源文件
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md

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

先完成一项明确的交付物

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

示例简报
使用 motion-canvas,在现有项目中制作三个数据包通过队列的短场景。让每个数据包保持稳定身份,并由一个信号推导队列间距。动作前先展示标签,让数据包依次移动,计数与可见状态同步。为最后的解释停留设置具名事件。保留已安装框架版本及当前渲染设置。交付场景代码,检查进入和离开该场景的转场,特别留意是否有对象在转场完成后才出现。

检查结果

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

  • 检查信号关系和稳定对象引用。
  • 验证序列顺序、后台线程和转场结束。
  • 分别检查已配置预览和实际渲染输出。

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

05 来源与许可证

来源与许可证

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

来源所有者
VideoZero
技能文件
SKILL.md
许可证
Apache-2.0
已审查的快照
2026-11-02 · 670ff96af614
编辑来源摘要
使用生成器、响应式信号和可复用节点编写 Motion Canvas 场景。

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

06 开始前的问题

开始前可能想问

生成器函数有什么作用?

它们通过 yield、等待和组合动画操作描述随时间变化的场景动作。源文件将其作为主要序列机制。

信号用于什么?

信号保存变化值,并能响应式推导其他值,例如由共享半径推导形状尺寸。

包含截图自动化吗?

框架参考覆盖场景编写。配套 motion-canvas-agent Skill 介绍了用于运行中编辑器的 HTTP 控制和截图桥接。

OpenDesign

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

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

上游源文件
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md