dotlottie web

Dotlottie Web

Stürzen Sie Ihre Webanimationen mit den offiziellen Spielern von LotTiefs für Dotlottie und Lottie -Animationen. Diese Pakete wurden für schnelle Integration entwickelt und helfen Entwicklern dabei, animierte Grafiken schnell in Webprojekte mit minimalem Aufwand einzubeziehen.

Was ist Dotlottie?

Dotlottie ist ein Open-Source-Dateiformat, das eine oder mehrere Lottie-Dateien und ihre zugehörigen Ressourcen in eine einzige Datei zusammenfassen. Sie sind ZIP -Archive, die mit der Deflat -Komprimierungsmethode komprimiert sind, und tragen die Dateierweiterung von ".lottie".

Erfahren Sie mehr über Dotlottie.

Inhalt

• Pakete
• Erste Schritte
  • Voraussetzungen
  • Aufstellen
• Live -Beispiele
• Lokale Beispiele
• Entwicklung
  • Pakete aufbauen
  • Vor Ort laufen
  • Skripte
• Beitragen
• Lizenz

Pakete

Der Monorepo enthält das folgende Paket:

Paket	Beschreibung
@Lottiefiles/Dotlottie-Web	Eine JavaScript -Bibliothek zum Rendern von Lottie- und Dotlottie -Animationen im Browser oder im Node.js.
@lotTiefiles/dotlottie-reagiert	Ein React-Komponenten-Wrapper für dotlottie-web , der eine deklarative API für die Rendert von Lottie- und Dotlottie-Animationen und UI-Steuerelementen für die Interaktion mit ihnen bietet.
@lotTiefiles/dotlottie-wc	Eine Webkomponenten-Wrapper für dotlottie-web , die eine deklarative API für die Rendern von Lottie- und Dotlottie-Animationen und UI-Steuerelementen für die Interaktion mit ihnen bietet.
@lotTiefiles/dotlottie-vue	Ein Vue-Komponenten-Wrapper für dotlottie-web , der eine deklarative API für die Rendert von Lottie- und Dotlottie-Animationen und UI-Steuerelementen für die Interaktion mit ihnen bietet.
@lotTiefiles/dotlottie-selt	Eine schlechte Komponenten-Wrapper für dotlottie-web , die eine deklarative API für die Rendert von Lottie- und Dotlottie-Animationen und UI-Steuerelementen für die Interaktion mit ihnen bietet.

Hinweis: Jedes Paket hat seine eigene Readme.md mit detaillierten Dokumentation zu Nutzung und APIs.

Erste Schritte

Befolgen Sie diese Setup -Schritte, um zu diesem Monorepo beizutragen oder seine Pakete in Ihrem Projekt zu verwenden:

Voraussetzungen

Stellen Sie sicher, dass Sie die folgenden Installation haben:

• Node.js Version 18 oder mehr
• pnpm Version 8

Aufstellen

Klonen Sie den Monorepo:

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

Abhängigkeiten installieren:

pnpm install

Live -Beispiele

• @lottiefiles/dotlottie-web

  • Erste Schritte
  • Kontrolle der Animation Wiedergabe
  • Dynamisches Animationsladen
  • Multi -Animationen .lottie -Datei
  • Erweitertes Animationslayout
  • Benannte Marker
  • Dotlottie Theming

• @lottiefiles/dotlottie-react

  • Erste Schritte
  • Benutzerdefinierte Wiedergabesteuerungen

• @lottiefiles/dotlottie-vue

  • Erste Schritte

Lokale Beispiele

Entdecken Sie, wie Sie die Dotlottie-Web-Pakete mit unseren Beispielanwendungen implementieren und nutzen. Diese Beispiele dienen als praktischer Leitfaden, um zu verstehen, wie Sie Lottie- und Dotlottie -Animationen in Ihre Webprojekte integrieren können.

Verfügbare Beispiele:

• Dotlottie-Web-Exampe: Eine grundlegende Typ-Typ-Beispiel-App, wie man @lottiefiles/dotlottie-web verwendet, um eine Lottie- oder Dotlottie-Animation im Browser zu rendern.
• Dotlottie-Web-Node-Example: In diesem Beispiel wird gezeigt, wie man die @lottiefiles/dotlottie-web in einer node.js-Umgebung verwendet. Es zeigt, dass die Wiedergabe von Animation, das Rendern von Frame durch Frame und eine Dotlottie -Animation in eine GIF -Datei kontrolliert wird. Weitere Informationen finden Sie im Readme.

Ausführungsbeispiele

• Klonen Sie das Repository:

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

• Abhängigkeiten installieren:

pnpm install

• Erstellen Sie die Pakete:

pnpm run build

• Führen Sie die App aus:

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

Fühlen Sie sich frei zu ändern und spielen Sie mit dem Code herum, um festzustellen, wie sich Änderungen auf die Animationen auswirken.

Entwicklung

Pakete aufbauen

So erstellen Sie alle Pakete innerhalb des Monorepo:

pnpm run build

Vor Ort laufen

Um eine lokale Entwicklungsumgebung für alle Pakete zu gründen:

pnpm run dev

Skripte

Hier finden Sie eine kurze Erklärung der Skripte im Root -Paket.json:

• build : Erstellt alle Pakete mit Turbo.
• changelog : Fügt einen Änderungssatz hinzu, um Changelog- und Versionsaktualisierungen zu generieren.
• clean : Reinigt das Repository durch Entfernen von Entwicklungsartefakten.
• dev : Fährt alle Pakete im Entwicklungs-/Uhrenmodus aus.
• format : Formatiert die Codebasis mit hübscher und Bemerkung.
• lint : FININT die Codebasis mit Eslint.
• test : Führen Sie Tests über alle Pakete aus.
• type-check : Überprüfungen auf Fehlertypfehler.

Eine vollständige Liste der verfügbaren Skripte finden Sie im Abschnitt scripts in package.json .

Beitragen

Wir begrüßen Beiträge zu den Paketen in diesem Monorepo. Bitte lesen Sie unsere beitragenden Richtlinien und unseren Verhaltenskodex, um mehr über unseren Entwicklungsprozess zu erfahren, wie Sie Fehler und Verbesserungen vorschlagen und Ihre Änderungen am Projekt erstellen und testen können.

Lizenz

MIT © LotTiefiles