キーフレームシステムと透過ビデオエクスポート機能を備えたWebベースのアニメーションエディター

当社は、ハードウェアアクセラレーションレンダリングのために React と Pixi.js を使用し、30以上のイージング関数を備えたキーフレームエンジン、そして完全な VP9 アルファチャネルサポート付き WebM ビデオエクスポートのための FFmpeg を利用したバックエンドを備えたWebベースのアニメーションエディターを構築しました。

アーキテクチャ

• フロントエンド: TypeScript を使用した React、WebGL アクセラレーションキャンバスレンダリングのための Pixi.js
• 状態管理: 一元化されたシーンの状態のための Zustand
• アニメーションエンジン: イージングライブラリを備えたカスタムキーフレーム補間エンジン
• バックエンド: リアルタイムフレームストリーミングのための WebSocket サポートを備えた Express.js
• ビデオエンコーディング: アルファチャネル付き VP9 WebM エンコーディングのための FFmpeg (fluent-ffmpeg 経由)
• モノレポ: フロントエンドとバックエンド間で TypeScript の型を共有する pnpm workspace

アニメーションエンジン

キーフレームシステム

コアアニメーションエンジンは、複数のプロパティにわたるキーフレームベースのアニメーションをサポートしています。

• 位置 — 移動パスのためのX/Y座標
• 回転 — 度数ベースの回転アニメーション
• 色 — 滑らかなトランジションを伴う16進カラー補間
• アルファ — フェード効果のための不透明度アニメーション
• サイズ — 幅、高さ、半径のスケーリング

各キーフレームは、時間 (ミリ秒単位)、アニメーションプロパティのサブセット、および選択されたイージング関数を保存します。エンジンは、任意の時点において周囲のキーフレーム間を補間し、適切なイージングカーブを適用します。

イージングライブラリ (30以上の関数)

すべての標準的なアニメーションカーブを網羅する包括的なイージングライブラリです。

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (バネのようなオーバーシュート), Back (予期), Bounce
• それぞれ ease-in、ease-out、ease-in-out のバリアントで利用可能

補間

任意のタイムスタンプに対して、エンジンは以下の処理を行います。

1. 周囲のキーフレーム (前後) を見つけます
2. それらの間の正規化された進行状況 (0から1) を計算します
3. 選択されたイージング関数を進行値に適用します
4. プロパティ値 (数値は線形、16進値はカラー lerp) を補間します
5. レンダリング用のアニメーションプロパティの完全なセットを返します

キャンバスとレンダリング

オブジェクトタイプ

• 長方形 — 幅、高さ、色、アルファ、回転を設定可能
• 円 — 半径、色、アルファ、回転を設定可能
• テキスト — フォントファミリー、フォントサイズ、内容、色、アルファを設定可能

ハードウェアアクセラレーションレンダリング

• スムーズな 60fps プレビュー再生のための Pixi.js WebGL レンダリング
• 設定可能なキャンバス解像度 (デフォルト 1920x1080、30fps)
• 調整可能な背景アルファを備えた透明な背景サポート
• 視覚的なハイライト表示を伴うインタラクティブなオブジェクト選択
• 再生、一時停止、タイムラインスクラブによるリアルタイムアニメーション再生

エディターインターフェース

ツールバー

長方形、円、テキストをシーンに追加するためのオブジェクト作成ボタン。デフォルトプロパティはすぐにカスタマイズできます。

プロパティパネル

選択されたオブジェクトのプロパティはリアルタイムで編集可能: 位置、サイズ、色、アルファ、回転、およびタイプ固有のプロパティ (テキストコンテンツ、フォント設定)。

タイムライン

視覚的なタイムライン表示:

• オブジェクトごとの時間位置にあるキーフレームマーカー
• スクラブ機能付きの現在の時間を示すプレイヘッド
• キーフレームごとのイージング関数選択
• 現在のプレイヘッド位置でのキーフレーム追加/削除コントロール

ビデオエクスポートパイプライン

フレームキャプチャ

1. アニメーションの長さと FPS が総フレーム数を決定します
2. 各フレームはフル解像度で個別にレンダリングされます
3. キャンバスの内容はフレームごとに PNG blob としてキャプチャされます
4. エンコーディングバックエンドへのアップロードのためにフレームが収集されます

エンコーディングバックエンド

Express.js バックエンドは、ジョブベースのシステムを通じてビデオエンコーディングを処理します。

1. ジョブ作成 — クライアントが新しいエクスポートジョブをリクエストします (UUIDベース)
2. フレームアップロード — フレームはバッチでアップロードされるか (または WebSocket 経由でストリームされます)
3. FFmpeg エンコーディング — フレームは VP9 コーデックの WebM ビデオに組み立てられます
4. アルファチャネル — 完全な透過性サポートのために yuva420p ピクセルフォーマットを使用します
5. 進行状況追跡 — エンコーディング中のリアルタイム進行状況更新
6. ダウンロード — 完成したビデオは透過性検証後、ダウンロード可能になります

WebSocketの代替案

リアルタイムエクスポートの場合、フレームは HTTP バッチアップロードの代わりに WebSocket 経由で直接ストリーミングでき、キャプチャ、アップロード、エンコーディングの各フェーズ全体でライブ進行状況が更新されます。

主な機能

1. キーフレームアニメーション — プロパティごとのキーフレームを備えたタイムラインベースのアニメーション
2. 30以上のイージング関数 — プロフェッショナルなアニメーションカーブのための完全なイージングライブラリ
3. 透過ビデオエクスポート — 完全なアルファチャネルサポートを備えた VP9 WebM
4. ハードウェアアクセラレーションキャンバス — スムーズなリアルタイムプレビューのための Pixi.js WebGL レンダリング
5. 複数のオブジェクトタイプ — 長方形、円、テキストの独立したアニメーション
6. リアルタイムプレビュー — アニメーションの再生、一時停止、スクラブを即座に実行
7. バッチ＆ストリーミングエクスポート — HTTP バッチアップロードまたは WebSocket リアルタイムフレームストリーミング
8. 設定可能な出力 — エクスポートのための解像度、FPS、ビットレート設定
9. 型安全なモノレポ — フロントエンドとバックエンド間で共有される TypeScript の型
10. カスタム背景 — 画像/ビデオサポートを備えた調整可能な背景色とアルファ