Motion Canvas：用 TypeScript 生成函数写动画，给技术讲解视频的代码驱动动画工具

Motion Canvas 是一个开源（MIT）的动画创作工具，它把”做动画”这件事从时间线拖拽变成了写 TypeScript 代码。官方定位一句话：“Visualize Complex Ideas Programmatically”。它不是又一个 After Effects 替代品，而是专门给技术讲解视频、信息可视化、Explainer 视频作者用的——你写代码描述”一个圆在 0.3 秒内放大两倍”，编辑器实时渲染，并能和配音音频波形对齐。本文基于 motioncanvas.io 官网与 motion-canvas/motion-canvas 的 GitHub README，做一次冷静分析。

一、背景：技术讲解视频的制作痛点

做技术讲解视频（比如解释一个协议握手、一个算法流程）时，传统流程是：在 After Effects/Blender 里手 K 关键帧，一个圆从 A 点移到 B 点，要设起止位置、缓动曲线；一旦文案改了、解说词多了一句，整段时间线都要重排。这类动画的本质是”程序逻辑”——状态、条件、循环，用时间线拖拽非常别扭。Motion Canvas 的出发点就是：既然动画是逻辑，那就用代码写，用 IDE 改，用 git 管版本，用 generator 函数描述”一步接一步”。

二、是什么：一个库 + 一个编辑器

按官方 README，Motion Canvas 同时是两样东西：

• 一个 TypeScript 库：用 generator（生成器）函数来编程式地定义动画；
• 一个编辑器：提供动画的实时预览，并允许用鼠标做一些”用代码写很烦”的微调。

它的定位很窄：“a specialized tool designed to create informative vector animations and synchronize them with voice-overs”——信息类矢量动画 + 配音同步。不是用来做影视特效、不是用来做 SVG 图标交互动画、不是游戏引擎。

技术栈上它跑在 Vite 之上，改代码即实时预览；整个 monorepo 用 lerna 发布，包含 core（渲染与动画运行时）、2d（默认 2D 渲染器）、ui（编辑器界面）、vite-plugin、player（可嵌入网页的自定义元素）、create（脚手架）等包。

三、技术机制：generator 函数即时间线

Motion Canvas 最核心的设计是用 JavaScript/TypeScript 的 generator 函数（function* + yield）来描述动画。官网首页给的例子：

export default makeScene(function* (view) {
  const circle = createRef<Circle>();
  view.add(
    <Circle ref={circle} width={320} height={320} fill={'blue'} />,
  );

  yield* circle().scale(2, 0.3);          // 0.3 秒内放大到 2 倍
  yield* waitUntil('event');              // 等到音频/时间线里的 event 标记
  yield* all(                             // 这些同时发生
    circle().scale(1, 0.3),
    circle().position.y(200, 0.3),
  );
  yield* circle().fill('green', 0.3);
});

关键点：

• 关注点是时长、速度、缓动，而不是关键帧坐标：你写 circle().scale(2, 0.3)，意思是”在 0.3 秒内把 scale 过渡到 2”，而不是”第 0 秒 scale=1，第 0.3 秒 scale=2”。缓动曲线作为参数可配。
• yield* 串行动画，all(...) 并行动画：控制流就是时间线，if/for 循环天然可用，适合做”循环渲染 N 个节点”这类程序感动画。
• JSX 描述场景图：<Circle>、<Rect> 这类组件像 React 一样声明，createRef 拿到引用后在 generator 里驱动。
• waitUntil('event') 与编辑器时间线标记对齐：你在编辑器里把一个名为 event 的标记拖到音频波形对应的位置，代码就停在那等。这就是它”和配音同步”的机制。

编辑器本身提供播放头、scene 轨道、音频波形、事件标记，让你不用改代码就能微调时间对齐。

四、关键事实

五、口径批判：它”生产可用”的 nuance

官网在首页写了一句很诚实的话：“The road ahead is still long, but you can already use Motion Canvas to create production-quality animations.” 这句话本身就是最重要的 nuance——官方自己承认路还很长。读它的宣传时要注意几点：

1. “production-quality”是创作者社区背书，不是产品成熟度背书：它最初是为 YouTube 技术讲解频道（“The Road Ahead”等创作者）自己做视频用的内部工具，“Tested in Combat”指的是被这些创作者在实战视频里用过，不等于它有 After Effects 那样成熟的角色动画、骨骼绑定、特效合成能力。
2. 它是给”写代码的动画师”的工具，不是给设计师的：你必须会 TypeScript、会用 IDE、能接受 JSX 写场景图。纯视觉设计师在 AE/Figma 里拖拽效率更高。它的目标用户是”会写代码、要做信息动画”的工程师/技术博主。
3. 它不渲染视频文件本身：Motion Canvas 输出的是浏览器里实时跑的动画，最终视频要靠编辑器的录屏/导出（或基于 player 包在浏览器里回放）。和 AE 直接出 MP4 的流程不同，渲染链路要自己接。
4. 矢量 2D 为主：复杂位图特效、粒子、三维物理不是它的强项；官方 2d 包是默认渲染器，3D 生态相对薄。
5. 版本仍在快速演进：@motion-canvas/core 在 README 里引用的版本号是 ^3.11.0，API 随时可能变；monorepo 里还有 internal、e2e 这类内部包，说明对外 API 边界还在打磨。
6. 学习曲线是双重的：你既要懂动画缓动/编排，又要懂 TypeScript generator 的 yield 语义——这不是一个”下午就能上手”的工具。

六、优势与局限

优势：

• 版本控制友好：动画就是代码，动画本身能进 git，code review 动画改动；
• 复杂/重复动画极高效：循环生成 N 个节点、数据驱动布局这类用时间线拖拽要几小时的事，写代码几分钟；
• 改文案成本低：解说词改了，调整 waitUntil 标记和时长参数即可，不用重排整段关键帧；
• Vite 实时预览，开发者体验顺滑；
• player Web Component 能把动画直接嵌进文档/网页，不止出视频。

局限：

• 必须会写 TypeScript，设计师门槛高；
• 不适合角色动画/影视特效，定位是信息可视化；
• 渲染出 MP4 的链路不如 AE 成熟；
• API 仍在快速变化，长期项目要锁版本；
• 社区规模相对小，素材/模板生态远不如 AE。

七、适合谁

• 做技术讲解、算法可视化、Explainer 视频的程序员/技术博主；
• 想把动画当作”代码资产”用 git 管理的团队；
• 要在文档/博客里嵌数据驱动动画（用 player 包）的开发者；
• 已经熟悉 TypeScript、且嫌 AE 关键帧太机械的创作者。

如果你是要做品牌 MG 动画、角色短片，或完全不想碰代码，Motion Canvas 不是你的工具——继续用 AE/Blender。

参考来源

• Motion Canvas 官网
• GitHub：motion-canvas/motion-canvas README
• Motion Canvas 文档 Quickstart
• Koala 项目库条目：Motion Canvas | 动画创作工具