motion-canvas

Motion Canvas

使用生成器函数以编程方式创建动画视频的 TypeScript 库。

项目设置

npm init @motion-canvas@latest    # Create new project
npm install && npm start          # Run dev server at localhost:9000

项目结构：

my-project/
├── src/
│   ├── project.ts         # Main project config
│   └── scenes/            # Animation scenes
├── vite.config.ts
└── package.json

核心概念

1. 项目配置

// src/project.ts
import {makeProject} from '@motion-canvas/core';
import scene1 from './scenes/scene1?scene';  // Note: ?scene suffix required

export default makeProject({
  scenes: [scene1],
  // audio: audioFile,  // Optional: sync animations to voiceover
});

2. 场景

场景使用生成器函数——yield* 会暂停以渲染帧：

import {makeScene2D, Circle, Rect, Txt} from '@motion-canvas/2d';
import {createRef, all, waitFor, waitUntil} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();

  view.add(<Circle ref={circle} size={100} fill="#e13238" />);

  yield* circle().position.x(300, 1);  // Move right over 1 second
  yield* waitFor(0.5);                  // Pause 0.5 seconds
  yield* circle().position.x(0, 1);    // Move back
});

3. 节点（视觉元素）

// Shapes
<Circle size={100} fill="#e13238" />
<Rect width={200} height={100} fill="blue" radius={10} />
<Line points={[[0,0], [100,100]]} stroke="white" lineWidth={4} />

// Text
<Txt text="Hello" fontSize={48} fill="white" fontFamily="Arial" />

// Media
<Img src={imagePath} width={400} />
<Video ref={videoRef} src={videoPath} />

// Code blocks with syntax highlighting
<Code code={`const x = 1;`} fontSize={24} />

4. 引用

存储节点引用以进行动画处理：

const circle = createRef<Circle>();
view.add(<Circle ref={circle} />);
yield* circle().scale(2, 1);  // Call with () to access node

5. 信号（响应式值）

const radius = createSignal(3);
const area = createSignal(() => Math.PI * radius() * radius());  // Computed

// Animate signal
yield* radius(5, 2);  // Change from 3 to 5 over 2 seconds
// area() automatically updates

6. 动画模式

顺序：

yield* animation1();
yield* animation2();

并行：

yield* all(
  circle().position(100, 1),
  circle().fill('red', 1),
);

交错：

yield* sequence(0.1, anim1(), anim2(), anim3());  // 0.1s delay between each

循环：

yield* loop(5, i => circle().rotation(360, 1));

7. 时间事件（音频同步）

yield* waitUntil('intro-end');     // Pause until marker in editor timeline
yield* circle().scale(2, useDuration('grow'));  // Duration from timeline

8. 布局（Flexbox）

<Layout layout direction="row" gap={20} alignItems="center">
  <Circle size={50} />
  <Rect width={100} height={50} />
</Layout>

9. 场景过渡

yield* slideTransition(Direction.Left);
yield* fadeTransition(0.5);
yield* zoomInTransition();

10. 代码动画

const codeRef = createRef<Code>();
view.add(<Code ref={codeRef} code={initialCode} />);

yield* codeRef().code('new code', 1);                    // Replace all
yield* codeRef().code.replace(range, 'replacement', 1); // Replace range
yield* codeRef().selection(codeRef().findFirstRange('text'), 0.5);  // Highlight

常见缓动函数

import {easeInOutCubic, easeOutBack, linear} from '@motion-canvas/core';
yield* node().scale(2, 1, easeOutBack);  // Overshoot effect

渲染

在编辑器 UI 中点击 RENDER。在 Video Settings 选项卡中配置：

• 分辨率、帧率、背景颜色
• 帧范围、色彩空间
• 用于视频输出的 FFmpeg 插件

参考资料

• API 参考 - 完整的 API 文档
• 模式 - 常见动画模式和示例