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!
