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 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 vonmo.js bietet viele interessante Beispiele wie dieses, um Ihnen das Verständnis verschiedener Aspekte der Bibliothek zu erleichtern.
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
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
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 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.
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.
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
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
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!
Einführung in die Nutzung von FTP-Servern
So erhalten Sie die Eingabenummer in Java
Was sind nicht relationale Datenbanken?
So verweisen Sie auf CSS in HTML
So wechseln Sie zwischen Huawei-Dual-Systemen
Verwendung des Linux-Komprimierungs-ZIP-Befehls
Die acht am häufigsten verwendeten Funktionen in Excel
js ruft die aktuelle Uhrzeit ab
