dotlottie web

Dotlottie web

Peleque sus animaciones web con los jugadores oficiales de Lottiefiles para animaciones Dotlottie y Lottie. Diseñados para una integración rápida, estos paquetes ayudan a los desarrolladores rápidamente a llevar imágenes animadas a proyectos web con un esfuerzo mínimo.

¿Qué es Dotlottie?

Dotlottie es un formato de archivo de código abierto que agrega uno o más archivos Lottie y sus recursos asociados en un solo archivo. Son archivos zip comprimidos con el método de compresión de deflación y llevan la extensión del archivo de ".lottie".

Aprenda más sobre Dotlottie.

Contenido

• Paquetes
• Empezando
  • Requisitos previos
  • Configuración
• Ejemplos en vivo
• Ejemplos locales
• Desarrollo
  • Paquetes de construcción
  • Ejecutando localmente
  • Guiones
• Que contribuye
• Licencia

Paquetes

El Monorepo contiene el siguiente paquete:

Paquete	Descripción
@lottiefiles/dotlottie-web	Una biblioteca de JavaScript para renderizar animaciones de Lottie y Dotlottie en el navegador o node.js.
@lottiefiles/dotlottie-react	Un envoltorio de componentes React para dotlottie-web que proporciona una API declarativa para representar animaciones de Lottie y Dotlottie y controles de interfaz de usuario para interactuar con ellos.
@lottiefiles/dotlottie-wc	Un envoltorio de componentes web para dotlottie-web que proporciona una API declarativa para representar animaciones de Lottie y Dotlottie y controles de UI para interactuar con ellos.
@lottiefiles/dotlottie-vue	Un envoltorio de componentes VUE para dotlottie-web que proporciona una API declarativa para representar animaciones de Lottie y Dotlottie y controles de interfaz de usuario para interactuar con ellos.
@Lottiefiles/Dotlottie-Svelte	Un envoltorio de componentes esbeltos para dotlottie-web que proporciona una API declarativa para representar animaciones de Lottie y Dotlottie y controles de interfaz de usuario para interactuar con ellos.

Nota: Cada paquete tiene su propio readMe.md con documentación detallada sobre el uso y las API.

Empezando

Para contribuir a este monorepo o usar sus paquetes en su proyecto, siga estos pasos de configuración:

Requisitos previos

Asegúrese de tener lo siguiente instalado:

• Node.js versión 18 o mayor
• pnpm versión 8

Configuración

Clon the Monorepo:

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

Instalar dependencias:

pnpm install

Ejemplos en vivo

• @lottiefiles/dotlottie-web

  • Empezando
  • Control de reproducción de animación
  • Carga de animación dinámica
  • Múltiples animaciones .lottie archivo
  • Diseño de animación avanzado
  • Marcadores nombrados
  • tema de dotlottie

• @lottiefiles/dotlottie-react

  • Empezando
  • Controles de reproducción personalizados

• @lottiefiles/dotlottie-vue

  • Empezando

Ejemplos locales

Descubra cómo implementar y utilizar los paquetes Dotlottie-Web con nuestras aplicaciones de ejemplo. Estos ejemplos sirven como una guía práctica para ayudarlo a comprender cómo integrar animaciones Lottie y Dotlottie en sus proyectos web.

Ejemplos disponibles:

• Dotlottie-Web-Ejemplo: una aplicación de ejemplo de TypeScript básico de cómo usar @lottiefiles/dotlottie-web para representar una animación lottie o dotlottie en el navegador.
• Dotlottie-Web-Node-Ejemplo: Este ejemplo demuestra cómo usar el @lottiefiles/dotlottie-web en un entorno node.js. Muestra el control de la reproducción de la animación, el marco de representación por cuadro y la conversión de una animación de Dotlottie en un archivo GIF. Para obtener más información, consulte el ReadMe.

Ejemplos de ejecución

• Clon el repositorio:

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

• Instalar dependencias:

pnpm install

• Construya los paquetes:

pnpm run build

• Ejecute la aplicación:

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

Siéntase libre de modificar y jugar con el código para ver cómo los cambios afectan las animaciones.

Desarrollo

Paquetes de construcción

Para construir todos los paquetes dentro del Monorepo:

pnpm run build

Ejecutando localmente

Para comenzar un entorno de desarrollo local para todos los paquetes:

pnpm run dev

Guiones

Aquí hay una breve explicación de los scripts disponibles en el paquete root.json:

• build : Construye todos los paquetes con turbo.
• changelog : agrega un cambio de cambios para generar actualizaciones de ChangeLog y versión.
• clean : limpia el repositorio eliminando los artefactos de desarrollo.
• dev : ejecuta todos los paquetes en el modo de desarrollo/reloj.
• format : formatea la base de código usando más bonita y observación.
• lint : Lints la base de código usando Eslint.
• test : ejecuta pruebas en todos los paquetes.
• type-check : verifica los errores de tipo TypeScript.

Para obtener una lista completa de scripts disponibles, consulte la sección scripts en package.json .

Que contribuye

Agradecemos contribuciones a cualquiera de los paquetes de este monoreso. Lea nuestras pautas contribuyentes y nuestro Código de Conducta para aprender sobre nuestro proceso de desarrollo, cómo proponer las correcciones de errores y las mejoras, y cómo construir y probar sus cambios en el proyecto.

Licencia

MIT © Lottiefiles