dotlottie web

Dotlottie網絡

與Lottiefiles的Dotlottie和Lottie Animations的官方玩家簡化您的網絡動畫。這些軟件包專為快速集成而設計，可幫助開發人員迅速將動畫視覺效果帶入Web項目中。

什麼是Dotlottie？

Dotlottie是一種開源文件格式，將一個或多個Lottie文件及其關聯資源匯總到一個文件中。它們是通過放氣壓縮方法壓縮的ZIP檔案，並攜帶“ .lottie”的文件擴展名。

了解有關Dotlottie的更多信息。

內容

• 軟件包
• 入門
  • 先決條件
  • 設定
• 現場例子
• 本地例子
• 發展
  • 建築包
  • 本地運行
  • 腳本
• 貢獻
• 執照

軟件包

MonorePo包含以下軟件包：

包裹	描述
@lottiefiles/dotlottie-web	一個用於在瀏覽器或Node.js中渲染Lottie和Dotlottie動畫的JavaScript庫。
@lottiefiles/dotlottie-react	dotlottie-web的React組件包裝器提供了一種聲明性的API，用於渲染Lottie和Dotlottie Animations和UI Controls與它們進行交互。
@lottiefiles/dotlottie-wc	dotlottie-web的Web組件包裝器，提供了一種聲明性的API，用於渲染Lottie和Dotlottie動畫和UI控件，以與它們進行交互。
@lottiefiles/dotlottie-vue	dotlottie-web的VUE組件包裝器，為渲染Lottie和Dotlottie動畫和UI控件提供了聲明性的API，以與它們進行交互。
@lottiefiles/dotlottie-svelte	dotlottie-web的Svelte組件包裝器，為渲染Lottie和Dotlottie Animations和UI控件提供了聲明性的API，以與它們進行交互。

注意：每個軟件包都有自己的readme.md，並具有有關使用和API的詳細文檔。

入門

為了為此MonorePo做出貢獻或在項目中使用其包裝，請按照以下設置步驟：

先決條件

確保您安裝了以下內容：

• Node.js版本18或更大
• pnpm版本8

設定

克隆Monorepo：

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

安裝依賴項：

pnpm install

現場例子

• @lottiefiles/dotlottie-web

  • 入門
  • 控制動畫播放
  • 動態動畫加載
  • 多動畫.lottie文件
  • 高級動畫佈局
  • 命名標記
  • Dotlottie主題

• @lottiefiles/dotlottie-react

  • 入門
  • 自定義播放控件

• @lottiefiles/dotlottie-vue

  • 入門

本地例子

通過我們的示例應用程序，發現如何實現和利用Dotlottie-Web軟件包。這些示例是一個實用指南，可幫助您了解如何將Lottie和Dotlottie動畫整合到您的網絡項目中。

可用示例：

• dotlottie-web-example：一個基本的打字稿示例應用程序，講述瞭如何使用@lottiefiles/dotlottie-web在瀏覽器中渲染lottie或dotlottie動畫。
• dotlottie-web節點示例：此示例演示瞭如何在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

可以隨意修改並使用代碼來查看變化如何影響動畫。

發展

建築包

在MonorePo中構建所有包裝：

pnpm run build

本地運行

為所有軟件包啟動本地開發環境：

pnpm run dev

腳本

這是對root軟件包中可用的腳本的簡要說明。

• build ：使用Turbo構建所有包裝。
• changelog ：添加一個更改集來生成ChangElog和版本更新。
• clean ：通過刪除開發文物來清理存儲庫。
• dev ：在開發/觀察模式下運行所有​​軟件包。
• format ：使用更漂亮和備註格式化代碼庫。
• lint ：使用ESLINT將代碼庫覆蓋。
• test ：在所有軟件包中運行測試。
• type-check ：檢查打字稿類型錯誤。

有關可用腳本的完整列表，請參見package.json中的scripts部分。

貢獻

我們歡迎對此MonorePo中的任何包裹做出貢獻。請閱讀我們的貢獻準則和行為準則，以了解我們的開發過程，如何提出錯誤修正和改進以及如何構建和測試您對項目的更改。

執照

麻省理工學院©Lottiefiles