Bloubとは？
Bloubは、x.aiのボットアバターをSVGで再現したものです。14の状態を切り替える1つの塗りつぶされた黒いボディ形状と、独立した2つの白い目の形状を使用し、無地の背景に表示します。アニメーションはアニメーションライブラリを使わずに実装されています。
このプロジェクトは、フレームワークに依存しないアニメーションエンジンとVue 3のインターフェースを組み合わせています。エンジンは時計にも依存しません。engine.sample(t)を呼び出すと、指定した時間だけからフレームが生成されます。そのため、一時停止、シーク、静止プレビュー、DOMなしのテストを決定論的に実行できます。
主な機能
- 14種類の計測済み状態：アバターには、待機、ウィンク、軌道、バーストなどの状態が含まれます。
- アバターのカスタマイズ：8種類のボディ形状、12色、16種類の休止時表情から選択できます。選択内容は次回の訪問時にも保持されます。
- タイムラインエディター：状態を並べ替え、各状態を保持する時間を設定し、完成したアニメーションを保存できます。
- 複数のエクスポート形式：アバターをSVG、PNG、アニメーションGIFとして、または完全なタイムラインをGIFやMP4としてエクスポートできます。
- オンデマンドの動画エンコード：動画エンコーダーは、初めて必要になったときだけ取得されます。
- 3言語対応：インターフェースはフランス語、英語、中国語に対応しています。
- 決定論的なレンダリング：同じ時間には常に同じ画像が生成されるため、正確な静止フレームと再現可能なテストを実現できます。
前提条件
Bloubでは、Vue 3、Vite、TypeScript、Tailwind CSS 4、pnpmを使用します。続行する前に、Node.js環境とpnpmをインストールしてください。
Bloubのインストールと実行
リポジトリをクローンまたはダウンロードし、ターミナルでそのディレクトリを開きます。
依存関係をインストールします：
pnpm installVite開発サーバーを起動します：
pnpm devブラウザーでhttp://localhost:5190を開きます。
テストの実行と本番ビルドの作成
次のコマンドでVitestのテストスイートを実行します：
pnpm testTypeScriptコードを確認し、アプリケーションをビルドします：
pnpm buildビルドコマンドはvite buildの前にvue-tsc --noEmitを実行します。このリポジトリには意図的にESLintやPrettierの設定がないため、主なコード品質ゲートはvue-tscです。変更を完了したと判断する前に、pnpm buildを実行してください。
アプリケーションを探索する
左側のレールから、3つの主なビューを切り替えられます。
アバターをカスタマイズする
Customiseを開くと、8種類のボディ形状、12色、16種類の休止時表情から選択できます。選択内容は次回の訪問時にも保持されます。
アニメーションタイムラインを作成する
Animationsを開くと、アバターの状態をタイムラインに並べられます。各状態を保持する時間を設定し、シーケンスをプレビューして保存できます。再生カーソルは状態名だけでなくタイムライン上の位置を追跡するため、モンタージュ内に同じ状態を複数回登場させることができます。
言語を変更してクレジットを表示する
Settingsを開くと、フランス語、英語、中国語を選択したり、プロジェクトのクレジットを表示したりできます。
14種類の状態をすべて確認する
ローカルURLに#plancheを追加すると、14種類の状態を静止フレームとして横並びに表示できます：
http://localhost:5190/#planche
このビューは、変更によっていずれかの状態が意図せず変わっていないかをすばやく確認するのに便利です。
再生を一時停止した状態で特定の状態を開くには、etatとstopのハッシュパラメーターを使用します。例：
http://localhost:5190/#etat=orbit&stopBloubBot Vueコンポーネントを使用する
BloubBotコンポーネントは、制御された再生と正確な静止フレームの両方に対応しています。基本的な制御インスタンスでは、現在のタイムラインブロック、状態、再生ステータスをバインドできます：
<BloubBot
v-model:block="block"
v-model:state="state"
v-model:playing="playing"
/>blockモデルは再生カーソルです。この区別が重要なのは、タイムラインに同じ状態を複数回含められるためです。ブロックインデックスは正確なタイムライン上の位置を識別し、stateは出力としてそのカーソルに追従します。
静止フレームをレンダリングする
状態、サイズ、frozen-at値を渡すと、アニメーションループを開始せずに正確な1フレームをレンダリングできます：
<BloubBot state="orbit" :size="120" :frozen-at="1.2" />Bloubでは、サムネイルと状態ボード全体の作成に静止レンダリングを使用します。安定したプレビューや、時間上の正確な位置のフレームが必要な場合にも便利です。
利用可能なコンポーネント入力
コンポーネントは次のpropsを公開しています：
sizeshapecolorexpressionpaperfrozenAtcyclefollowgaze
モデルはblock、state、playing、elapsedです。正確な型とコンポーネントの詳細については、BloubBot.vueを参照してください。
アバターとタイムラインをエクスポートする
画面に表示されるものはすべてエクスポートできます。単一のアバターにはSVG、PNG、アニメーションGIFを選択できます。タイムライン全体にはGIFまたはMP4を選択できます。
SVGおよびPNGのエクスポートには、追加のライブラリは必要ありません。アニメーション出力に必要な動画エンコーダーは、初めて要求されたときにのみ読み込まれるため、通常の編集時に取得する必要はありません。実装の詳細については、エクスポートのドキュメントを参照してください。
高度なヒント
決定論的なフレームにはPure Engineを使用する
src/bot/以下のコードは、フレームワークにも時計にも依存しません。正確な時刻の画像が必要な場合は、engine.sample(t)を使用してください。結果は実時間の時計ではなく指定した時刻に基づくため、一時停止、再開、シーク、テスト、サムネイル生成の結果が一貫します。
計測した定数を単純化しない
多くの値は恣意的に見えるかもしれませんが、これらは毎秒10フレームで編集された参照映像から計測したものです。シルエットはサブピクセルのレイキャスティングで抽出し、目はカプセルとしてフィッティングし、色と線幅は直接サンプリングしました。
定数を扱いやすい値に丸めると、このプロジェクトが維持しようとしている見た目の類似性が低下する可能性があります。
アニメーションを変更する際は、次の計測上の特徴を念頭に置いてください。
- 目はバックスラッシュの方向に傾いており、垂直方向から約26度です。
- 胴体は実質的に完全な円で、半径方向の偏差は0.7%未満です。スクワークルではありません。
- トランジションには指数関数的なイーズアウトを使用し、胴体はオーバーシュートしません。
- 彗星エフェクト中は、点が静止し、軌跡がその周りを回ります。
- 静止中のアバターは浮遊しません。生き生きとした印象は、視線の揺らぎとまばたきによって生まれます。
プロファイルを変更したりprofiles.tsを再生成したりする前に、計測ドキュメントを確認してください。
エンジンを拡張する前にアーキテクチャを確認する
プロジェクトのドキュメントでは、エンジン、放射状プロファイルのモーフィング、マスクの穴として目の形状を使用する仕組みについて説明しています。状態を追加したりモーフィングの動作を変更したりする前に、アーキテクチャガイドを読んでください。インターフェース、到着シーケンス、国際化レイヤーについては、インターフェースガイド、導入ガイド、国際化ガイドでそれぞれ説明しています。
デバッグの前にリリース履歴を確認する
変更履歴には、リリースごとに1件のエントリがあります。ローカルコピーに特定の修正が含まれているかどうかを確認するために参照してください。
結論
Bloubは、綿密に計測されたSVGアバター、ビジュアルカスタマイズインターフェース、タイムラインエディター、決定論的なフレームサンプリング、複数のエクスポート形式を、アニメーションライブラリに依存せずに提供します。組み込みの状態ボードとコンポーネント例から始め、変更後はテストと本番ビルドを実行し、アニメーションを拡張する際も計測した定数を維持してください。
コードはMITライセンスの下で公開されています。このプロジェクトはx.aiと提携、推奨、または関係するものではありません。ライセンスの対象はリポジトリのコードであり、再現されたデザインではありません。