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