Bei richtiger Anwendung k?nnen Animationen das Benutzererlebnis deutlich verbessern. Es gibt viele Elemente auf einer Webseite, die animiert werden k?nnen, um sie zum Leben zu erwecken. Auch grundlegende Dinge wie die Hintergrundfarbe einer Schaltfl?che oder der Randradius bestimmter Elemente auf einer Webseite k?nnen mit CSS animiert werden.

CSS hat jedoch seine Grenzen, und wenn Sie mehr Kontrolle über jeden Aspekt Ihrer animierten Elemente wünschen, müssen Sie JavaScript verwenden. In diesem Artikel zeige ich Ihnen acht der besten kostenlosen und Open-Source-JavaScript-Animationsbibliotheken, die Sie derzeit in Ihren Projekten verwenden k?nnen.

Mo.js

Mo.js ist eine hervorragende Bibliothek zum Hinzufügen von JavaScript-basierten Bewegungsgrafiken zu Ihrer Website. Es ist sehr schnell, erzeugt flüssige Animationen und sieht auf einer Vielzahl von Ger?ten gro?artig aus. Au?erdem ist es modular aufgebaut, sodass Sie zus?tzlichen Aufwand vermeiden, wenn Sie nur eine bestimmte Komponente verwenden m?chten.

Die Bibliothek verfügt über eine deklarative API zum Festlegen der Werte verschiedener Eigenschaften für die von Ihnen erstellten Komponenten. Es verfügt über vier verschiedene integrierte Module namens Html, Shape, ShapeSwirl und Burst. Bursts und Swirls k?nnen bei einer Vielzahl von Benutzerinteraktionen mit Elementen auf Ihrer Website kreativ eingesetzt werden.

Klicken Sie oben auf eine beliebige Stelle im CodePen und Sie werden eine sch?ne Reihe von Kreisen und Sternen sehen. Es wurde von LegoMushroom unter Verwendung der Burst- und Shape-Module in mo.js erstellt.

Die Dokumentation von

mo.js bietet viele interessante Beispiele wie dieses, um Ihnen das Verst?ndnis verschiedener Aspekte der Bibliothek zu erleichtern.

Anime

Anime ist eine der beliebtesten Animationsbibliotheken auf GitHub. Es ist sehr leichtgewichtig und verfügt über eine leicht zu erlernende API. Mit dieser Bibliothek k?nnen CSS-Eigenschaften, SVG- und DOM-Eigenschaften animiert werden.

Es gibt Ihnen viel Kontrolle darüber, wie Elemente animiert werden. Sie k?nnen die Geschwindigkeit, Richtung und Reihenfolge steuern, in der sich Objekte bewegen. Wann immer Sie sich dafür entscheiden, k?nnen Sie die Animation anhalten, neu starten oder umkehren.

Die Bibliothek bietet auch gute Unterstützung für SVG-Animationen. Sie k?nnen einen sanften Verformungseffekt erzeugen oder eine Linienzeichnungsanimation zwischen zwei verschiedenen SVG-Formen erstellen.

Klicken Sie oben im CodePen auf die Schaltfl?che ?Namen schreiben“ und Sie werden sehen, wie die Buchstaben meines Namens nacheinander animiert werden. Diese Demo ist Teil einer Reihe von Tutorials zum Thema Anime. Sie k?nnen sie sich ansehen, um mehr über die Bibliothek zu erfahren. Beliebte Aktionen

Popmotion ist eine weitere leichte und beliebte Animationsbibliothek. Sie k?nnen damit Zahlen, Farben und komplexe Zeichenfolgen animieren. Die Hauptanimationsfunktionen in der Bibliothek sind etwa 5 KB gro?, und die gesamte Bibliothek ist etwa 12 KB gro?.

Sie k?nnen damit zwei Arten von Animationen erstellen: Keyframe und Spring. Sie k?nnen Start- und Endpunkte usw. für Keyframe-Animationen angeben. Federanimationen verfügen über Eigenschaften wie Steifigkeit, D?mpfung, Masse und Geschwindigkeit, die Ihren Animationen eine natürlichere Bewegung verleihen. Die Bibliothek verfügt au?erdem über viele Hilfsfunktionen für Berechnungen wie

usw.

angle、clamp、distance、snapp

Die Keyframe-Animation in der CodePen-Demo von Gaougalos oben wurde mit der Popmotion-Bibliothek erstellt.

Bildlaufanzeige

Die ScrollReveal-Bibliothek ist praktisch, wenn Sie ein Element animieren m?chten, w?hrend es in das Ansichtsfenster hinein oder aus diesem heraus scrollt.

Es gibt viele M?glichkeiten, Elemente zu animieren. Mit den Eigenschaften ?Verz?gerung“, ?Dauer“ und ?Intervall“ k?nnen Sie den Fortschritt der Animation steuern. Es gibt auch Optionen zum Steuern der Drehung, Skalierung und Bewegung der anzuzeigenden Objekte. Die Bibliothek verfügt au?erdem über Rückrufe, mit denen bestimmt werden kann, was vor oder nach der Anzeige eines Elements geschieht.

Sava Lazics obige CodePen-Demo verwendet die ScrollReveal-Bibliothek, um eine optisch ansprechende vertikale Zeitleiste zu erstellen. Sie k?nnen Inhalte erstellen, die der Pr?sentation von Produkten oder Projekten auf Ihrer Website ?hneln.

lebendig

Vivus ist eine erstaunliche JavaScript-basierte Animationsbibliothek, die speziell für die Erstellung von SVG-Animationen entwickelt wurde. Es ist sehr leichtgewichtig und hat keine Abh?ngigkeiten.

Vivus bietet Ihnen drei verschiedene M?glichkeiten, Pfade in SVG zu animieren. Sie k?nnen alle Linien gleichzeitig, mit Verz?gerung oder nacheinander animieren. Es gibt Ihnen auch viel Flexibilit?t beim Timing Ihrer Animationen.

Einige Dinge, die Sie bei der Verwendung von Vivus beachten sollten, ist, dass Elemente immer in der im SVG definierten Reihenfolge animiert werden. Au?erdem sollte das Element, das Sie animieren m?chten, einen Strich und keine Füllung haben.

Die SVG-Pfadanimation in Alex Nelsons CodePen-Demo oben wurde mit nur sechs Codezeilen und etwas Hilfe von Vivus erstellt.

Typed.js

Anhand des Namens Typed.js k?nnen Sie erraten, dass diese Animationsbibliothek zur Texteingabe verwendet wird. Sie k?nnen alle Zeichenfolgen, die Sie eingeben m?chten, als Array übergeben. Diese Bibliothek implementiert auch eine SEO-freundlichere M?glichkeit, den Text, den Sie animieren m?chten, durch Eingabe aus dem HTML div auf einer Webseite zu lesen.

Sie k?nnen das Verhalten der Tippanimation mithilfe einer Reihe von Parametern optimieren. Dazu geh?ren Tippgeschwindigkeit, Rücktaste-Geschwindigkeit, Startverz?gerung, Rücktaste-Verz?gerung, Schleifenanzahl und mehr. Sie k?nnen auch eine Reihe von Rückruffunktionen definieren, die bei verschiedenen Ereignissen ausgel?st werden (z. B. nach der Eingabe einer Zeichenfolge).

Conners CodePen oben zeigt, wie wir diese Bibliothek nutzen k?nnen, um langweilige 404-Fehlerseiten interessant zu machen.

ProgressBar.js

Es ist eine gute Idee, jedem Prozess, der einige Zeit in Anspruch nimmt, einen Fortschrittsbalken hinzuzufügen. Dadurch wei? der Benutzer, wie schnell die Aufgabe voranschreitet. Sie k?nnen beispielsweise einen Fortschrittsbalken in einem Online-Bildeditor anzeigen, um Benutzer darüber zu informieren, dass die Seite nicht nur h?ngen bleibt, sondern dass das Bild tats?chlich im Hintergrund verarbeitet wird.

Mit der Bibliothek ?ProgressBar.js“ k?nnen Entwickler ganz einfach stilvolle Fortschrittsbalken zu ihren Websites hinzufügen. Neben der Erstellung eines Fortschrittsbalkens mit einigen der integrierten Formen, wie z. B. Linien, Kreisen oder Halbkreisen, k?nnen Sie auch Ihre eigenen benutzerdefinierten Formen verwenden. Dies er?ffnet eine Reihe interessanter M?glichkeiten.

Wie Sie in der Demo oben sehen k?nnen, k?nnen wir verschiedene Eigenschaften im Fortschrittsbalken animieren. Sie k?nnen sich dieses einführende ProgressBar.js-Tutorial ansehen, um mehr über die Bibliothek zu erfahren.

Lotti

Lotie für Airbnb ist eine andere Animationsbibliothek als die anderen, die wir bisher besprochen haben. Es analysiert mit Adobe After Effects erstellte Animationen, die mit Bodymovin nach JSON exportiert wurden. Anschlie?end k?nnen Sie diese Effekte direkt auf der Webseite rendern.

Auf der GitHub-Seite der Bibliothek wird der Installationsprozess und seine Funktionsweise im Detail erl?utert. Es gibt viele globale Methoden, mit denen Sie den Animationsfortschritt steuern k?nnen. Sie k?nnen die Animationsrichtung ganz einfach starten, stoppen und umkehren.

Sie müssen nur ein paar Codezeilen schreiben, um die erforderliche JSON-Datei zu laden und die Animation mit einigen Parametern zu initialisieren. Die CodePen-Demo von Kittons oben ist ein gro?artiges Beispiel dafür, wie man After Effects-Animationen einfach im Browser rendern kann.

Abschlie?ende Gedanken

In diesem Artikel betrachten wir acht beliebte kostenlose und Open-Source-JavaScript-Animationsbibliotheken. Sie machen jeweils etwas anderes und zielen auf unterschiedliche Aspekte der Webanimation ab. Mit diesen Bibliotheken k?nnen Sie nahezu jeden Inhalt Ihrer Website animieren. Ich hoffe, dass Sie diese Bibliotheken nutzen, um eine sch?ne Website zu erstellen, die Sie von der Konkurrenz abhebt! Achten Sie nur darauf, Animationen nicht zu h?ufig zu verwenden.

Beachten Sie auch, dass Sie dennoch versuchen sollten, CSS für einfache Animationen zu verwenden. Es macht wenig Sinn, eine vollst?ndige JavaScript-Animationsbibliothek zu laden, wenn Sie nur die Farbe eines Elements ?ndern m?chten, wenn der Benutzer mit der Maus darüber f?hrt.

Das obige ist der detaillierte Inhalt vonDie beste kostenlose und quelloffene JavaScript-Animationsbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!