Alternativen zu jQuery für einfache, abwärtskompatible, clientseitige Website-Animationen? [Duplikat]

Ich habe kürzlich nach einer alternativen JavaScript-Animationsbibliothek gesucht, da für die wenigen einfachen Animationen, die ich wollte, eine ~200-kb-jQuery-Bibliothek nicht die beste Option ist.

Nach ein wenig Suchen fand ich GSAP und implementierte es erfolgreich (und reibungsloser) als die jQuery-Animation, die ich zuvor erstellt hatte. Es wiegt ungefähr 80 KB - also immer noch nicht perfekt (aber das ist mit zusätzlichen Plugins, um CSS-Selektoren verwenden zu können, wenn Sie ein SVG animieren, können Sie wahrscheinlich die 60 KB erforderliche Datei weglassen).

Ich frage mich, ob es noch andere großartige Optionen gibt.

Kennt jemand alternative Bibliotheken zum Animieren von Elementen mit JavaScript?

Die besten Optionen:

  • Verlassen Sie sich nicht auf jQuery!

  • Verlässt sich entweder nicht auf CSS3-Keyframes oder hat einen Fallback, wenn CSS3-Keyframes nicht verfügbar sind (aus Gründen der Abwärtskompatibilität).

  • Hat eine minimale Dateigröße und erfordert, dass nur wenige oder keine anderen Dateien enthalten sind

  • Ist nicht zu kompliziert zu lernen! (entweder gute Dokumentation oder vertraute/einfache Syntax - ich möchte nicht Tage damit verbringen, eine einfache Animation zu erstellen)

Ich interessiere mich überhaupt nicht für Flash.

Haben Sie schon von Adobe Edge Animation und Google Web Designer gehört?
Sie fragen nach einer CODE-Lösung, nicht wahr? Wenn Sie einfache Animationen wünschen, warum verwenden Sie nicht CSS3-Animationen? Wenn Sie den Code bereits erstellt haben und sich Sorgen über die Größe machen und er funktioniert, haben Sie darüber nachgedacht, Code Review zu fragen, ob sie Ihnen helfen können, ihn zu verkleinern? Haben Sie versucht, ein CDN zu verwenden? Warum funktioniert ein CDN nicht? In jedem Fall ist dies nicht der beste Ort, um dies zu fragen.
Ich habe das Gefühl, dass dies ein Duplikat dieser Frage ist
Haben Sie eine Demo Ihrer Kreation? Meine Vermutung, wenn Sie nicht die gesamte 60-kb-Datei benötigen, falls vorhanden.
"Kein Code, ich suche nach Empfehlungen für JS-Animationsbibliotheken" = eine JS-Animationsbibliothek ist Code.
@DumbNic OK. Aber es ist auch nicht wirklich eine Frage des Grafikdesigns. Wie auch immer, ich denke, Matt hat dir eine ziemlich gute Liste gegeben, von der du abgehen kannst.
@DumbNic Ich weiß nicht, warum keine engen Stimmen. Was die Suche nach Empfehlungen von denen betrifft, die sie verwendet haben, denke ich, dass die Leute deshalb sagen, dass dies wahrscheinlich nicht hierher gehört. Sie hätten bessere Chancen, Leute zu finden, die sie bei StackOverflow verwendet haben.

Antworten (2)

Ihre Frage ist unglaublich weit gefasst. Die beste Animationsbibliothek für Ihr Projekt hängt davon ab, was Sie in diesem spezifischen Projekt tun. Die optimale Bibliothek wäre eine benutzerdefinierte Bibliothek, die speziell für das Projekt entwickelt wurde , aber das beantwortet Ihre Frage hier natürlich nicht.

Die zwei besten allgemeinen JavaScript-Animationsbibliotheken sind meiner Meinung nach im Moment Velocity.js für die meisten grundlegenden Animationen, einschließlich vieler UI-Animationen, und GSAP (GreenSock Animation Platform) für kompliziertere. GSAP hat viele zusätzliche Addons, die Sie hinzufügen können, je nachdem, was das Projekt erfordert. Beide haben eine gute Dokumentation und sind ziemlich einfach einzurichten.

Da Sie speziell SVG erwähnt haben, habe ich festgestellt, dass ich für die Animationen, die ich damit gemacht habe, überhaupt keine Animationsbibliothek benötige, SVG-Animationen und CSS3 werden gut unterstützt. Aber wenn Sie es aus irgendeinem Grund tun, ist Snap.svg eines der besseren.

Die JavaScript-Animation ist jedoch nicht immer die beste Methode, um Ihr Projekt zu animieren. Ich habe eine ausführliche Antwort geschrieben , die sich damit befasst, wann und wie die verschiedenen Animationstechniken verwendet werden, die uns derzeit zur Verfügung stehen und die es wert ist, gelesen zu werden.

Wie Sie sagten, gehört diese Frage hierher, weil Animation in den Bereich des Grafikdesigns fällt. Ebenso sollte auch die Animation in den Bereich CSS gehören. Ich empfehle Animate.CSS

Hier ist ein weiteres interessantes Framework, das JS nur zum Auslösen der Animation während eines Ereignisses verwendet, wie Sie erwähnt haben. http://motorcortexjs.com/

Hi5, weil du dich nicht für Flash interessierst!