10+ Beste JavaScript-Animationsbibliotheken für 2020

Beste JavaScript-Animationsbibliotheken


Was kann besser sein als Animationen, wenn Sie die Aufmerksamkeit Ihres Website-Besuchers auf sich ziehen möchten? Mithilfe der vielen im Web frei verfügbaren Anwendungs-Engines können Sie die Elemente Ihrer Website leicht zum Verblassen, Abprallen oder Wuscheln bringen. Im heutigen Beitrag werden wir sehen wie JavaScript-Animationsbibliotheken helfen können mit all dem.

Zunächst ein wenig zu JavaScript-Animationen

Es ist eine Sache, einfache Animationen hinzuzufügen, für die nur eine Aktion erforderlich ist (z. B. Umschalten). Hierfür können Sie immer einfache CSS-Animationen verwenden. Für komplexere oder erweiterte Effekte ist JavaScript jedoch ein besseres Werkzeug. Es versteht sich von selbst, dass die Verwendung von JavaScript zum Erstellen von Animationen eine größere Herausforderung darstellt als die Verwendung von CSS.

Trotzdem kann JavaScript Dinge verarbeiten, die CSS nicht kann. Dies gibt Entwicklern mehr Möglichkeiten zur Steuerung komplexer Animationen, die mehrere bewegliche Teile koordinieren müssen.

JavaScript-Animationen werden implementiert, indem der Stil eines Elements schrittweise geändert wird. Sie können sie als Teil Ihres Codes inline hinzufügen oder in andere Objekte aufnehmen. Beim Rendern werden diese Änderungen von einem Timer aufgerufen. Sie können auch die Kontinuität der Animationen steuern, indem Sie das Zeitintervall der Änderungen anpassen.

Die besten JavaScript-Animationsbibliotheken

Hier ist eine Liste von JavaScript-Animationsbibliotheken, mit denen Sie Ihrer Website einige fantastisch aussehende Animationen hinzufügen können:

1. Anime.js

JavaScript-Animationsbibliotheken: Anime.js

Beginnen wir diese Liste der JavaScript-Animationsbibliotheken mit Anime.js. Diese leichte Animationsbibliothek zeigt mehr als 35.000 Sterne an GitHub. Mit einer einzigen leistungsstarken API können Sie HTML-, CSS-, JS-, SVG- und DOM-Attribute animieren. Mit einem eingebauten Staffelungssystem können Wellen, Richtungsbewegungen, Durchlauf- und Überlappungseffekte einfach erscheinen. Dieses System kann sowohl für Timings als auch für Eigenschaften verwendet werden.

Mit den integrierten Rückruf- und Steuerfunktionen können Sie viel tun. Sie können beispielsweise Ereignisse synchron abspielen, anhalten, steuern, umkehren und auslösen. Um zu sehen, was mit dieser Bibliothek noch möglich ist, können Sie besuchen Codepen.

2. Velocity.js

Velocit.js

Velocity.js kombiniert das Beste aus jQuery- und CSS-Übergängen. Es bewertet nahe 17K Sterne auf GitHub und rühmt sich prominenter Benutzer wie WhatsApp und Mailchimp. Schleifen, Umkehren, Verzögern, Ausblenden / Anzeigen von Elementen, Eigenschaftsmathematik (+, -, *, /) und Hardwarebeschleunigung sind Teil der Funktionen.

Sie können Velocity.js verwenden, um durch Browserfenster zu scrollen. Es kann sowohl mit in Ihrem Browser geladenem als auch unabhängig davon geladenem jQuery funktionieren und sogar frühere Animationen rückgängig machen.

3. Popmotion

Popmotion

In der Nähe von 18K Sterne, Popmotion ist eine funktionale Animationsbibliothek für jede JavaScript-Umgebung. Es kann mit nahezu jeder API verwendet werden, die Zahlen als Eingaben akzeptiert, z. B. React, Three.js, A-Frame und PixiJS.

Popmotion wiegt nur 11,7 kB, packt aber trotzdem einen Schlag. Es bietet Animationen wie Keyframes, Decay, Timeline zum Synchronisieren mehrerer Instanzen und mehr. Sie können jede Reihe von Animationen oder Funktionen verschieben und reine Funktionen verwenden, um Ihre eigenen Konfigurationen zu erstellen.

4. Three.js

JavaScript-Animationsbibliotheken: Three.js

Three.js führt diese Liste der JavaScript-Animationsbibliotheken mit über 60.000 Sternen an GitHub. Es ist abhängig von WebGL Erstellen und Rendern von 3D-Animationen im Browser.

Es gibt eine Menge Dokumentation, die Ihnen hilft, und wenn Sie die Lernkurve überwunden haben, können Sie mit dieser Bibliothek nicht mehr viel erreichen. Zunächst erstellen Sie mit dem Three.js-Editor eine Szene. Danach können Sie geometrische Figuren hinzufügen und Beleuchtung und Kamera anpassen. Das Material, die Textur, das Objekt, die Farbe und das Beschlagen können optimiert und die endgültige Datei für Ihr Projekt veröffentlicht werden.

5. GreenSock JS

GreenSock

GreenSocks GSAP funktioniert mit einer Reihe kleiner JavaScript-Dateien, mit denen Animationen in allen gängigen Browsern gut aussehen. Es verkettet reibungslos mehrere Animationseigenschaften und beseitigt Browserfehler.

Zu den GSAP-Aktionen gehören das Erstellen von Animationen auf Leinwand und das Animieren von Objekten in einer Szene. Außerdem wird ein Objekt nach und nach auf einem Pfad sichtbar, verwandelt oder bewegt. Zu diesem Zweck funktioniert es mit einer Reihe von Softwareanwendungen wie SVGPlugins, PixiPlugin, WebGL, Adobe Animate und EaseJS. Dank seines modularen Aufbaus können Sie genau die Funktionen auswählen, die Sie benötigen. Mit 8 Millionen Nutzern und mehr als 10.000 Sternen GitHub, Diese leistungsstarke Bibliothek hat viel zu bieten.

6. AniJS

AniJS

Unter den JavaScript-Bibliotheken in dieser Liste ist AniJS etwas Einzigartiges. Sie können Elemente zu Animationen in einer einfachen „satzartigen“ Struktur hinzufügen, ideal für Leute, die noch keine Erfahrung mit Animationen haben. Darüber hinaus kann es aufgrund seiner unspezifischen Natur fast jeder im routinemäßigen UX-Design verwenden.

Auf GitHub, AniJS bewertet mehr als 3,5K Sterne. Es ist nicht auf eine Bibliothek eines Drittanbieters angewiesen und trägt im Allgemeinen dazu bei, die Entwicklung zu beschleunigen. Es funktioniert genauso gut unter Android und iOS sowie in allen gängigen Browsern.

7. Mo.js.

Mo.js.

Bewegungsgrafiken spielen in Animationen eine große Rolle, und Mo.js ist eine Option, mit der Sie eine Wirkung erzielen können. Mit einer Reihe von Tutorials und Demos fällt es Anfängern möglicherweise nicht schwer, geometrische Formen und Zeitanimationen punktgenau zu erstellen.

Die APIs mögen einfach erscheinen, aber Sie können viel damit tun. Im Toolkit finden Sie einen Kurveneditor und einen Zeitleisteneditor, mit denen Sie Ihre Animationen erstellen können, sowie einen Player, mit dem Sie Ihre Animationen steuern können. Es gibt verschiedene Module für Staffelung, Beschleunigung, Zeitachse und mehr. All dies bringt Mo.js fast 16.000 Sterne ein GitHub.

8. Vivus.js

JavaScript-Animationsbibliotheken: Vivus

Wenn Sie eine Stiftzeichnung auf einem Bildschirm in Echtzeit nachahmen möchten, treffen Sie mit Vivus genau das Richtige. Damit können Sie SVGs animieren, die den Eindruck erwecken, gezeichnet zu werden. Da es keine Abhängigkeiten gibt, ist es schnell und leicht.

Sie können eine der verfügbaren Animationen auswählen – Verzögert, Synchronisieren oder OneByOne. Andernfalls können Sie auch ein benutzerdefiniertes Skript zum Zeichnen Ihrer SVG erstellen. Für mehr Flexibilität können Sie die Animation jedes Pfads mithilfe einer einfachen JavaScript-Funktion überschreiben. Mehr als 13.000 Benutzer geben dieser Bibliothek einen Daumen hoch GitHub.

9. ScrollReveal JS

ScrollReveal

Wenn Sie Ihre Webelemente beim Scrollen in die Ansicht animieren möchten, wird ScrollReveal Sie nicht enttäuschen. Diese leicht zu erlernende Animationsbibliothek hat keine Abhängigkeiten und mehr als 18,5 KB Sterne GitHub.

ScrollReveal unterstützt verschiedene Arten von Effekten und funktioniert gut mit Webbrowsern und mobilen Browsern. Es funktioniert absichtlich mit einer Bare-Bones-Konfiguration, sodass Sie es als Leinwand für Ihre Kreativität verwenden können. Um die Wirkung der Animationen zu maximieren, empfehlen die Ersteller, sie sparsam zu verwenden.

10. Typed.js

Typed.js

Typed.js ist eine einfache Bibliothek (eigentlich eher ein Plugin) zum Animieren der Eingabe auf Ihrem Bildschirm. Sobald Sie eine Zeichenfolge eingegeben haben, kann ein Besucher beobachten, wie diese mit einer festgelegten Geschwindigkeit eingegeben wird. Darüber hinaus können Sie die Rücktaste betätigen und einen neuen Satz beginnen. Wenn Sie Besuchern mit deaktiviertem JS erlauben möchten, es auch anzuzeigen, müssen Sie lediglich ein HTML-Div auf der Seite platzieren. Auf diese Weise können Bots und Suchmaschinen auch die eingegebenen Wörter anzeigen.

Diese Bibliothek bewertet 9,5K + Sterne auf GitHub. Hauptbenutzer sind Slack und Envato.

11. Lottie von AirBnB

JavaScript-Animationsbibliotheken: Lottie

Lottie ist ein leichtes animiertes Grafikformat, das hochwertige Grafiken mit den Kosten für das Rendern in Einklang bringt. Es verkleinert Anwendungen und enthält dynamische Funktionen. Es kann für Web, Android, iOS und IoTs verwendet werden, ohne dass zusätzliche Software erforderlich ist.

Lottie kann in jedem Browser ausgeführt werden, der JavaScript unterstützt. Die Animationen werden im Klartext gespeichert und sind für den Menschen lesbar. Da die Textdaten im JSON-Format gespeichert sind, können sie problemlos in jede JavaScript-Umgebung integriert werden. Dies macht es zu einem beliebten animierten Grafikformat zur Verbesserung mobiler Frontends. Allein die Android-Version genießt fast 30.000 Sterne GitHub.

Wenn Sie das Ende dieser Liste von JavaSCript-Animationsbibliotheken erreicht haben, können Sie auch andere JavaScript-Bibliotheken und -Frameworks nachschlagen. Oder sehen Sie sich diese besten Komponentenbibliotheken von React UI an.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map