dotlottie web

Dotlottie Web

DotlottieとLottieアニメーションのLottiefilesの公式プレーヤーでWebアニメーションを合理化します。迅速な統合のために設計されたこれらのパッケージは、開発者が最小限の労力でアニメーション化されたビジュアルをWebプロジェクトに迅速に持ち込むのに役立ちます。

ドットロッティとは何ですか？

Dotlottieは、1つ以上のLottieファイルとその関連リソースを単一のファイルに集約するオープンソースファイル形式です。それらは、デフレート圧縮法で圧縮されたzipアーカイブであり、「.lottie」のファイル拡張子を運びます。

Dotlottieの詳細をご覧ください。

コンテンツ

• パッケージ
• はじめる
  • 前提条件
  • 設定
• ライブの例
• ローカルの例
• 発達
  • 建物パッケージ
  • ローカルで実行されます
  • スクリプト
• 貢献
• ライセンス

パッケージ

モノレポには次のパッケージが含まれています。

パッケージ	説明
@lottiefiles/dotlottie-web	ブラウザまたはnode.jsでLOTTIEとDOTLOTTIEアニメーションをレンダリングするためのJavaScriptライブラリ
@lottiefiles/dotlottie-react	LottieおよびDotlottieアニメーションをレンダリングするための宣言的なAPIを提供するdotlottie-webのReactコンポーネントラッパー、およびそれらと対話するためのUIコントロールを提供します。
@lottiefiles/dotlottie-wc	LottieとDotlottieアニメーションをレンダリングするための宣言的なAPIを提供するdotlottie-webのWebコンポーネントラッパー、およびそれらと対話するためのUIコントロールを提供します。
@lottiefiles/dotlottie-vue	LottieおよびDotlottieアニメーションをレンダリングするための宣言的なAPIを提供するdotlottie-webのVueコンポーネントラッパー、およびそれらと対話するためのUIコントロールを提供します。
@lottiefiles/dotlottie-svelte	LottieとDotlottieアニメーションをレンダリングするための宣言的なAPIを提供するdotlottie-webのSvelteコンポーネントラッパー、およびそれらと対話するためのUIコントロールを提供します。

注：各パッケージには、使用法とAPIに関する詳細なドキュメントを備えた独自のreadme.mdがあります。

はじめる

このモノレポに貢献するか、プロジェクトでそのパッケージを使用するには、次の手順に従ってください。

前提条件

次のインストールを確認してください。

• node.jsバージョン18以降
• pnpmバージョン8

設定

モノレポをクローンする：

git clone https://github.com/LottieFiles/dotlottie-web.git
cd dotlottie-web

依存関係をインストールします：

pnpm install

ライブの例

• @lottiefiles/dotlottie-web

  • はじめる
  • アニメーションの再生を制御します
  • 動的なアニメーションの読み込み
  • Multi Animations .Lottieファイル
  • 高度なアニメーションレイアウト
  • 名前付きマーカー
  • Dotlottieテーマ

• @lottiefiles/dotlottie-react

  • はじめる
  • カスタム再生コントロール

• @lottiefiles/dotlottie-vue

  • はじめる

ローカルの例

例のアプリケーションでDotlottie-Webパッケージを実装および利用する方法を発見してください。これらの例は、LottieとDotlottieのアニメーションをWebプロジェクトに統合する方法を理解するのに役立つ実用的なガイドとして機能します。

利用可能な例：

• dotlottie-web-example： @lottiefiles/dotlottie-web使用する方法の基本的なタイプスクリプトアプリで、ブラウザでロッティまたはドットロッティアニメーションをレンダリングします。
• dotlottie-web-node-example：この例は、node.js環境で@lottiefiles/dotlottie-webを使用する方法を示しています。アニメーションの再生の制御、フレームごとにフレームのレンダリング、dotlottieアニメーションをGIFファイルに変換することを紹介します。詳細については、readmeを参照してください。

実行の例

• リポジトリをクローンします：

git clone https://github.com/LottieFiles/dotlottie-web.git
cd dotlottie-web

• 依存関係をインストールします：

pnpm install

• パッケージを構築します：

pnpm run build

• アプリを実行する：

 # Change directory to the example app folder
cd apps/dotlottie-web-example 
pnpm run dev

Codeを自由に変更して再生して、変更がアニメーションにどのように影響するかを確認してください。

発達

建物パッケージ

モノレポ内のすべてのパッケージを構築するには：

pnpm run build

ローカルで実行されます

すべてのパッケージのローカル開発環境を開始するには：

pnpm run dev

スクリプト

ルートpackage.jsonで利用可能なスクリプトの簡単な説明を次に示します。

• build ：ターボを使用してすべてのパッケージを構築します。
• changelog ：ChangeSetを追加して、Changelogとバージョンの更新を生成します。
• clean ：開発アーティファクトを削除してリポジトリをクリーンアップします。
• dev ：開発/ウォッチモードですべてのパッケージを実行します。
• format ：きれいなものと発言を使用してコードベースをフォーマットします。
• lint ：ESLINTを使用してコードベースをリントします。
• test ：すべてのパッケージでテストを実行します。
• type-check ：タイプスクリプトタイプエラーのチェック。

利用可能なスクリプトの完全なリストについては、 package.jsonのscriptsセクションを参照してください。

貢献

このモノレポのパッケージのいずれかへの貢献を歓迎します。貢献ガイドラインと行動規範をお読みください。開発プロセス、バグ修正と改善の提案方法、およびプロジェクトの変更を構築およびテストする方法について学びます。

ライセンス

MIT©LotTiefiles