作業の進め方
motion-canvas は TypeScript で Motion Canvas シーンを書くためのフレームワーク資料です。ジェネレーターによる順序制御、リアクティブなシグナル、参照、シーン階層を説明し、図形、文字、パス、メディアとの組み合わせを示します。
ソースには、ノードの保存・復元、名前付きイベントの待機、バックグラウンドスレッド、自作遷移の終了といった実用的な状態・時間制御が含まれます。作る場面は決まっていて、それを表現する正しいフレームワーク概念が必要な場合に役立ちます。
想定される成果物
- 既存プロジェクト設定を使った Motion Canvas シーンコード。
- 再利用できるシグナル、コンポーネント、時間シーケンス。
- 設定済みのプレビュー・描画手順へ進めるプロジェクト。
ブリーフからレビューまで
- 01シーンの物体を定義する
必要な図形と文字を作り、参照を割り当て、明確なノード階層に配置します。
- 02状態と時間をつなぐ
変わる値にシグナル、順序にジェネレーター関数を使います。同時動作には all()、アニメーション終了を待つ順序には yield* を使います。名前付き waitUntil() イベントでナレーションの合図に合わせられます。
- 03遷移と出力を確認する
slideTransition() の前に次シーンのノードを追加し、後から突然表示されないようにします。自作 useTransition() は終了関数を返すため、遷移アニメーション後に必ず呼びます。設定済みプレビューまたは描画を確認し、プロジェクト固有の出力設定を維持します。