このプロジェクトについて

dotLottie Web は、ウェブアプリケーションに Lottie (.json) および dotLottie (.lottie) アニメーションを埋め込むための公式 LottieFiles プレイヤーです。dotlottie-rs 由来の Rust + WASM コアを使用し、ベクトルレンダラーとして ThorVG を採用しています。このプレイヤーは Canvas2D ソフトウェアレンダリング、WebGL2、および実験的な WebGPU バックエンドをサポートしており、DotLottie クラスと API を維持したまま、サブパスインポートを通じてバックエンドを切り替えることができます。また、サーバーサイドレンダリング、サムネイル生成、またはフレーム抽出のための Node.js 18+ アイソモーフィックサポートについてもドキュメント化されています。 このプレイヤーは、色、スカラー、位置、ベクトル、グラデーション、画像、テキストルールによるランタイムテーマ、型定義されたイベントを持つインタラクティブなステートマシン、およびアニメーションタイムラインと同期して再生される埋め込みオーディオを含む dotLottie v2 の機能をサポートしています。DotLottieWorker オプションを使用すると、OffscreenCanvas を用いて Web Worker 上でレンダリングが行われ、Worker の境界を越えるため、そのメソッドは Promise ベースとなります。デフォルトのソフトウェアバックエンドは幅広く動作し、WebGL2 と WebGPU は負荷の高いケース向けにオプトイン形式で提供されています。 リポジトリでは、バニラ JavaScript 用の @lottiefiles/dotlottie-web に加え、React、Vue 3、Svelte、Solid、およびフレームワークに依存しない Web Component パッケージの計 6 つのファーストパーティ SDK パッケージを提供しています。これらはすべて Lottie JSON と dotLottie ファイルの両方をレンダリングできます。ランタイムコントロールには、animationId と loadAnimation による複数アニメーションの切り替え、名前付きマーカー、フレームセグメント、レイアウトのフィットとアライン、動的データ用のスロット、再生モード（前方、逆行、バウンス、逆行バウンス）、フレーム補間、およびキャンバスが画面外に出た際のフリーズ機能が含まれます。プレイヤーは、ロード、再生、一時停止、フレーム、完了、ループ、およびステートマシンの遷移をカバーする 25 以上の型定義されたイベントを公開しています。 プロジェクトには、ホーム、プレイグラウンド、パフォーマンス、リスト、埋め込みページを備えたホストビューア、CodePen の例、およびウェブ、Node.js、React、Vue、Solid、Web Component、Next.js SSR 安全レンダリング用の実行可能なローカル例が含まれています。必須の環境機能は WebAssembly、Canvas 2D、および Fetch API であり、オプションの機能として Web Workers、OffscreenCanvas、WebGL2、WebGPU が含まれます。サポートされる最小ブラウザは Chrome 57+、Firefox 52+、Safari 11+、Edge 16+、iOS Safari 11+ であり、サーバーサイド利用には Node.js 18+ が必要です。コードは MIT ライセンスで提供されています。