Fügen Sie Ihrer Webanwendung KOSTENLOS ansprechende Animationen hinzu

Lottie-Animationen sind zu einer beliebten Wahl geworden, um Websites und Apps reichhaltige, ansprechende Animationen hinzuzufügen. Sie sind leichtgewichtig, skalierbar und einfach zu implementieren, was sie zu einer Lösung der Wahl für Designer und Entwickler gleichermaßen macht. In diesem Tutorial erfahren Sie, was Lottie-Animationen sind, wie man sie verwendet und wo man sie bekommt.

Was ist Lottie?

Lottie ist eine von Airbnb entwickelte Bibliothek, die Animationen in Echtzeit im Web und in mobilen Apps rendert. Es liest JSON-Dateien, die aus Adobe After Effects mit dem Bodymovin-Plugin exportiert wurden, und ermöglicht so die einfache Integration komplexer Animationen ohne Leistungseinbußen.

Warum Lottie verwenden?

• Leichtgewicht: Im Vergleich zu herkömmlichen Videodateien oder GIFs sind Lottie-Animationen extrem klein.
• Skalierbar: Da sie vektorbasiert sind, bleiben Lottie-Animationen in jeder Größe klar und deutlich.
• Plattformübergreifend: Lottie funktioniert nahtlos auf verschiedenen Plattformen, einschließlich Web, iOS und Android.
• Einfach zu integrieren: Mit der Lottie-Bibliothek ist die Implementierung von Animationen unkompliziert und erfordert nur wenige Codezeilen.
• Community-Ressourcen: Lottie hat eine aktive Community, die viele Animationen KOSTENLOS teilt.

Erste Schritte

LottieFiles ist eine Anlaufstelle für Lottie-Animationen. Es bietet eine umfangreiche Bibliothek KOSTENLOSER und Premium-Animationen, Tools zum Erstellen und Bearbeiten von Animationen und sogar Plugins für die einfache Integration mit vielen Plattformen wie vanilaJS, React, VueJS, IOS, Android usw.

Besuchen Sie LottieFiles.com und durchsuchen Sie die Kategorien, um Animationen zu finden, die Ihren Anforderungen entsprechen. Laden Sie die Animation herunter, die Ihnen gefällt, im JSON-Format.

Hinzufügen von Lottie-Animationen zu Ihrem Projekt

1. Fügen Sie ein Element hinzu, in dem Ihre Animation erscheinen soll:

<canvas id="canvas" width="300" height="300"></canvas>

1. Beziehen Sie die Lottie-Webbibliothek ein und spielen Sie die Animation mit JavaScript ab:

<script type="module">
  import {DotLottie} from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";

  new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.getElementById("canvas"),
    src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
  });
</script>

Möchten Sie in HTML oder Wordpress einbetten?

Das ist auch möglich. Hier ist ein Beispiel für das Einbetten einer Lottie-Animation:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<lottie-player src="https://lottie.host/4c2a69ec-47c3-49ae-b296-8a4770ce5cf5/sl7OhHvAbk.json" background="#FFFFFF" speed="1" style="width: 300px; height: 300px" loop controls autoplay direction="1" mode="normal">
</lottie-player>

Wo ist die IOS-, Android-, React- oder Vue-Integration?

Für andere Plattformen finden Sie hier den passenden Lottospieler.

Abschluss

Lottie-Animationen bieten eine Möglichkeit, das Benutzererlebnis mit reichhaltigen, hochwertigen Animationen zu verbessern. Mit Ressourcen wie LottieFiles.com war die Integration und Anpassung dieser Animationen noch nie so einfach. Egal, ob Sie Designer oder Entwickler sind, das Hinzufügen von Lottie-Animationen zu Ihrem Toolkit kann Ihre Projekte aufwerten und hervorheben.?

Danke fürs Lesen. Für weitere Artikel können Sie unseren Newsletter abonnieren.?

Das obige ist der detaillierte Inhalt vonFügen Sie Ihrer Webanwendung KOSTENLOS ansprechende Animationen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!