dotlottie web

Dotlottie Web

Simplifique suas animações na web com os jogadores oficiais de Lottiefiles para as animações Dotlottie e Lottie. Projetados para integração rápida, esses pacotes ajudam os desenvolvedores a trazer visuais animados para projetos da Web com um esforço mínimo.

O que é Dotlottie?

Dotlottie é um formato de arquivo de código aberto que agrega um ou mais arquivos Lottie e seus recursos associados em um único arquivo. Eles são arquivos de zip comprimidos com o método de compressão deflate e carregam a extensão do arquivo de ".Lottie".

Saiba mais sobre Dotlottie.

Conteúdo

• Pacotes
• Começando
  • Pré -requisitos
  • Configurar
• Exemplos ao vivo
• Exemplos locais
• Desenvolvimento
  • Pacotes de construção
  • Executando localmente
  • Scripts
• Contribuindo
• Licença

Pacotes

O Monorepo contém o seguinte pacote:

Pacote	Descrição
@Lottiefiles/Dotlottie-Web	Uma biblioteca JavaScript para renderizar as animações de Lottie e Dotlottie no navegador ou node.js.
@Lottiefiles/Dotlottie-react	Um invólucro de componentes do React para dotlottie-web que fornece uma API declarativa para renderizar as animações de Lottie e Dotlottie e controles da interface do usuário para interagir com eles.
@Lottiefiles/Dotlottie-wc	Um invólucro de componentes da web para dotlottie-web que fornece uma API declarativa para renderizar as animações e controles da UI da Lottie e Dotlottie para interagir com eles.
@Lottiefiles/Dotlottie-Vue	Um invólucro de componente Vue para dotlottie-web que fornece uma API declarativa para renderizar as animações de Lottie e Dotlottie e controles da interface do usuário para interagir com eles.
@Lottiefiles/Dotlottie-Silte	Um invólucro de componente esbelto da dotlottie-web que fornece uma API declarativa para renderizar as animações de Lottie e Dotlottie e controles da interface do usuário para interagir com eles.

Nota: Cada pacote possui seu próprio readme.md com documentação detalhada sobre uso e APIs.

Começando

Para contribuir com este Monorepo ou usar seus pacotes em seu projeto, siga estas etapas de configuração:

Pré -requisitos

Certifique -se de ter o seguinte instalado:

• Node.js versão 18 ou superior
• pnpm Versão 8

Configurar

Clone o monorepo:

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

Instale dependências:

pnpm install

Exemplos ao vivo

• @lottiefiles/dotlottie-web

  • Começando
  • Controlando a reprodução da animação
  • Carregamento de animação dinâmica
  • Multi Animações. Lottie Arquivo
  • Layout avançado de animação
  • Marcadores nomeados
  • temas dotlottie

• @lottiefiles/dotlottie-react

  • Começando
  • Controles de reprodução personalizados

• @lottiefiles/dotlottie-vue

  • Começando

Exemplos locais

Descubra como implementar e utilizar os pacotes Dotlottie-Web com nossos aplicativos de exemplo. Esses exemplos servem como um guia prático para ajudá -lo a entender como integrar as animações de Lottie e Dotlottie em seus projetos da web.

Exemplos disponíveis:

• Dotlottie-Web-Exemplo: Um exemplo básico de exemplo de como usar @lottiefiles/dotlottie-web para renderizar uma animação Lottie ou Dotlottie no navegador.
• Dotlottie-web-node-Exemplo: Este exemplo demonstra como usar o @lottiefiles/dotlottie-web em um ambiente node.js. Ele mostra a reprodução de animação controlando, a renderização de quadros por quadro e a conversão de uma animação dotlottie em um arquivo GIF. Para mais informações, consulte o ReadMe.

Exemplos de execução

• Clone o repositório:

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

• Instale dependências:

pnpm install

• Construa os pacotes:

pnpm run build

• Execute o aplicativo:

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

Sinta -se à vontade para modificar e brincar com o código para ver como as mudanças afetam as animações.

Desenvolvimento

Pacotes de construção

Para construir todos os pacotes dentro do Monorepo:

pnpm run build

Executando localmente

Para iniciar um ambiente de desenvolvimento local para todos os pacotes:

pnpm run dev

Scripts

Aqui está uma breve explicação dos scripts disponíveis no root package.json:

• build : constrói todos os pacotes usando o Turbo.
• changelog : adiciona um alteração para gerar atualizações de changelog e versão.
• clean : limpa o repositório removendo artefatos de desenvolvimento.
• dev : executa todos os pacotes no modo de desenvolvimento/relógio.
• format : formato a base de código usando mais bonita e observar.
• lint : fiage a base de código usando ESLint.
• test : executa testes em todos os pacotes.
• type-check : verifica os erros do tipo TypeScript.

Para uma lista completa de scripts disponíveis, consulte a seção scripts no package.json .

Contribuindo

Congratulamo -nos com contribuições para qualquer um dos pacotes neste monorepo. Leia nossas diretrizes contribuintes e nosso código de conduta para aprender sobre nosso processo de desenvolvimento, como propor bugs e melhorias e como criar e testar suas alterações no projeto.

Licença

MIT © Lottiefiles