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 の包括的なドキュメント
• パターン - よく使用するアニメーションパターンと例