キーフレームシステムと透過ビデオエクスポート機能を備えたWebベースのアニメーションエディター
クリエイティブツールチームは、デザイナーが複数のオブジェクトを使用してスムーズなキーフレーム駆動型アニメーションを作成し、完全なアルファチャネル透過性を持つビデオとしてエクスポートできるブラウザベースのアニメーションエディターを必要としていました。これにより、他のビデオコンテンツへのシームレスなオーバーレイが可能になります。
プロジェクトを相談する
課題
ビデオ制作のための透明な背景を持つアニメーションアセットの作成は、面倒なものでした。
- デスクトップ専用ツール — 既存のアニメーションツール (After Effects, Motion) は高価なライセンスとデスクトップへのインストールが必要でした
- アルファチャネルエクスポートの欠如 — ほとんどのWebベースのアニメーションツールは、透過性をサポートしない不透明なビデオをエクスポートしていました
- 複雑なキーフレーミング — デザイナーはCSSトランジションだけでなく、イージング制御を備えた直感的なキーフレームベースのアニメーションを必要としていました
- リアルタイムプレビュー — エディターはエクスポート前にアニメーションがスムーズに再生されることを確認する必要がありました
- 複数のオブジェクトタイプ — アニメーションには、独立したアニメーションタイムラインを持つ図形とテキストが必要でした
- エクスポート品質 — 出力はプロの編集ワークフローで使用できるプロダクション品質のビデオファイルである必要がありました
私たちのソリューション
当社は、ハードウェアアクセラレーションレンダリングのために 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 のバリアントで利用可能
補間
任意のタイムスタンプに対して、エンジンは以下の処理を行います。
- 周囲のキーフレーム (前後) を見つけます
- それらの間の正規化された進行状況 (0から1) を計算します
- 選択されたイージング関数を進行値に適用します
- プロパティ値 (数値は線形、16進値はカラー lerp) を補間します
- レンダリング用のアニメーションプロパティの完全なセットを返します
キャンバスとレンダリング
オブジェクトタイプ
- 長方形 — 幅、高さ、色、アルファ、回転を設定可能
- 円 — 半径、色、アルファ、回転を設定可能
- テキスト — フォントファミリー、フォントサイズ、内容、色、アルファを設定可能
ハードウェアアクセラレーションレンダリング
- スムーズな 60fps プレビュー再生のための Pixi.js WebGL レンダリング
- 設定可能なキャンバス解像度 (デフォルト 1920x1080、30fps)
- 調整可能な背景アルファを備えた透明な背景サポート
- 視覚的なハイライト表示を伴うインタラクティブなオブジェクト選択
- 再生、一時停止、タイムラインスクラブによるリアルタイムアニメーション再生
エディターインターフェース
ツールバー
長方形、円、テキストをシーンに追加するためのオブジェクト作成ボタン。デフォルトプロパティはすぐにカスタマイズできます。
プロパティパネル
選択されたオブジェクトのプロパティはリアルタイムで編集可能: 位置、サイズ、色、アルファ、回転、およびタイプ固有のプロパティ (テキストコンテンツ、フォント設定)。
タイムライン
視覚的なタイムライン表示:
- オブジェクトごとの時間位置にあるキーフレームマーカー
- スクラブ機能付きの現在の時間を示すプレイヘッド
- キーフレームごとのイージング関数選択
- 現在のプレイヘッド位置でのキーフレーム追加/削除コントロール
ビデオエクスポートパイプライン
フレームキャプチャ
- アニメーションの長さと FPS が総フレーム数を決定します
- 各フレームはフル解像度で個別にレンダリングされます
- キャンバスの内容はフレームごとに PNG blob としてキャプチャされます
- エンコーディングバックエンドへのアップロードのためにフレームが収集されます
エンコーディングバックエンド
Express.js バックエンドは、ジョブベースのシステムを通じてビデオエンコーディングを処理します。
- ジョブ作成 — クライアントが新しいエクスポートジョブをリクエストします (UUIDベース)
- フレームアップロード — フレームはバッチでアップロードされるか (または WebSocket 経由でストリームされます)
- FFmpeg エンコーディング — フレームは VP9 コーデックの WebM ビデオに組み立てられます
- アルファチャネル — 完全な透過性サポートのために yuva420p ピクセルフォーマットを使用します
- 進行状況追跡 — エンコーディング中のリアルタイム進行状況更新
- ダウンロード — 完成したビデオは透過性検証後、ダウンロード可能になります
WebSocketの代替案
リアルタイムエクスポートの場合、フレームは HTTP バッチアップロードの代わりに WebSocket 経由で直接ストリーミングでき、キャプチャ、アップロード、エンコーディングの各フェーズ全体でライブ進行状況が更新されます。
主な機能
- キーフレームアニメーション — プロパティごとのキーフレームを備えたタイムラインベースのアニメーション
- 30以上のイージング関数 — プロフェッショナルなアニメーションカーブのための完全なイージングライブラリ
- 透過ビデオエクスポート — 完全なアルファチャネルサポートを備えた VP9 WebM
- ハードウェアアクセラレーションキャンバス — スムーズなリアルタイムプレビューのための Pixi.js WebGL レンダリング
- 複数のオブジェクトタイプ — 長方形、円、テキストの独立したアニメーション
- リアルタイムプレビュー — アニメーションの再生、一時停止、スクラブを即座に実行
- バッチ＆ストリーミングエクスポート — HTTP バッチアップロードまたは WebSocket リアルタイムフレームストリーミング
- 設定可能な出力 — エクスポートのための解像度、FPS、ビットレート設定
- 型安全なモノレポ — フロントエンドとバックエンド間で共有される TypeScript の型
- カスタム背景 — 画像/ビデオサポートを備えた調整可能な背景色とアルファ
成果
技術スタック
caseStudyDetail.more ケーススタディ
その他の技術実装事例をご覧ください
Catant HR & ワークフォース管理プラットフォーム
Catantは、企業が従業員、給与計算、勤怠、およびコンプライアンスを単一のダッシュボードから管理できるよう支援する、モジュラー型のHRおよびワークフォース管理プラットフォームです。
Kickly: AIを活用したスタートアップ向けプロジェクトプラットフォーム
Kicklyは、AIを活用したスタートアップ向けプロジェクト管理プラットフォームです。スマートなタスク自動化、チームコラボレーション、リアルタイムの進捗追跡を一つの製品に統合しています。
よくある質問
MicrocosmWorksは、キーフレーム間に設定可能なイージングカーブを備えたキャンバスベースのレンダリングエンジンを実装しました。このエンジンは、位置、スケール、回転、および不透明度プロパティに対して、線形、bezier、ease-in-out、およびカスタムカーブ補間をサポートしています。エディタはブラウザで最大60fpsでリアルタイムにフレームごとのプレビューをレンダリングし、デザイナーがコントロールポイントをドラッグしてキーフレームの位置とイージングカーブを視覚的に調整できるインタラクティブなタイムラインを含んでいます。
MicrocosmWorks は、FFmpeg を使用して alpha channel を保持したまま各フレームを合成し、WebM (VP9 alpha) または Apple ProRes 4444 (透過性あり) としてエクスポートするサーバーサイドレンダリングパイプラインを構築しました。これは H.264 コーデックがネイティブで alpha channel をサポートしていないためです。ブラウザベースのエディタでは、透過性を示す市松模様の背景とともにリアルタイムプレビューが表示され、最終的なレンダリングはすべてのフレームで一貫した品質を保証するためにサーバーサイドで処理されます。
はい、MicrocosmWorksは、カスタムフォント、ラスターおよびベクター画像、ビデオクリップ、図形プリミティブを含むZオーダーのレイヤーをサポートするマルチレイヤーコンポジションエンジンを構築しました。これらの各レイヤーは独立したキーフレームアニメーショントラックを持ちます。レイヤーパネルには、表示切り替え、不透明度スライダー、ブレンドモード、グループ化といった、Photoshopのような使い慣れたコントロールが用意されており、Adobeワークフローに慣れているデザイナーにとって直感的に操作できます。
MicrocosmWorks は、ハードウェアアクセラレーションによるコンポジットには WebGL を、ノンブロッキングなキーフレーム計算には Web Workers を使用するようエディターを最適化し、最新のハードウェアにおいて最大20〜30レイヤーのコンポジションでスムーズなリアルタイムプレビュー性能を達成しました。最終的なエクスポートレンダリングに関しては、重い処理はサーバー側で行われ、専用の GPU リソースがユーザーのデバイス能力に関わらず一貫した出力品質を保証します。
MicrocosmWorksは、カスタムアニメーションエディタープロジェクトを、1時間あたり$20〜$40の開発レートで提供します。キーフレームタイムライン、マルチレイヤーコンポジション、透過ビデオエクスポートを含むフル機能のエディターの場合、通常4〜6ヶ月の開発期間を要します。これは、ユーザーごとのライセンス料を課す商用SDK上に構築するよりも、大幅に費用対効果が高いです。また、長期的なプロダクト開発のために、コードベースの完全な所有権をお客様に提供します。