Anime.js - Eine leichte JavaScript-Animationsbibliothek
Webanimation ist weit gekommen. Entwickler können nicht nur Animationen mit einer Kombination aus CSS / SVG / JS erstellen, sondern auch Dutzende von freien Bibliotheken um Zeit zu sparen.
Einer meiner Favoriten ist Anime.js, eine völlig freie, Open Source JavaScript-Animationsbibliothek.
Diese Bibliothek kann mach es alles. Es ist basiert auf JavaScript aber es ist auch setzt stark auf CSS-Animationen. Sie können einzelne Seitenelemente anvisieren über das DOM oder du kannst sogar zielen benutzerdefinierte SVGs.
Die gesamte Dokumentation ist auf GitHub selbst gehostet, Möglicherweise müssen Sie einen Bildlauf durchführen, um genau das zu finden, wonach Sie suchen. Aber jede Animationsfunktion kommt mit ein paar Parametern wie Verzögerung, Dauer und Lockerung.
Beachten Sie diese Bibliothek kommt nicht mit vielen Standardanimationsstilen. Anime.js ist für Entwickler gemacht die ihre Animationen anpassen möchten ohne verbose Code zu schreiben.
Für ein Live-Beispiel, Schauen Sie sich den Codepen-Stift unten an. Der Code lautet äußerst einfach aber Sie erhalten eine glaubwürdige Animation mit Squash & Stretch Plus Erwartung, beide Grundlagen der Animation.
Eine faire Warnung: Die Anime.js-Bibliothek ist dicht. Es ist nicht schwer, eine benutzerdefinierte Animation zu erstellen, aber Sie müssen dies tun verstehe einige Grundlagen wie Beschleunigung und allgemeine JavaScript-Syntax für die Rückrufe und Optionen.
Aber alle Informationen, die Sie benötigen ist auf Repo-Seite, einschließlich viele Codebeispiele und detaillierte Dokumentationstabellen. Sie können auch durch offene Fehlerberichte blättern oder die aktuelle Browser-Unterstützung prüfen alle gängigen Browser und IE 10+.
Dies ist leicht eine der besten Animationsbibliotheken für Webentwickler und sollte Ihre Lösung sein jede komplexe Webanimation.
Einen Haufen sehen Live-Beispiele, Schauen Sie sich diese Sammlung von Anime.js-Demos an, die auf CodePen gehostet werden. Unten habe ich meinen Favoriten eingebettet animiert das gesamte Logo von Grund auf, mit echter Lebhaftigkeit.
