Wie ich eine Animationsbibliothek für mein Solitaire-Spiel ausgewählt habe

Es gibt eine Fülle von CSS- und JavaScript-Bibliotheken für Animationen. So viele, dass die Auswahl der richtigen für Ihr Projekt unmöglich erscheinen kann. Das war die Situation, in der ich mich befand, als ich mich entschied, ein Online-Solitaire-Spiel zu entwickeln. Ich wusste, dass ich eine Animationsbibliothek brauchen würde, aber welche war die richtige?

In diesem Artikel werde ich darlegen, welche Überlegungen ich angestellt habe, worauf Sie achten sollten, und Ihnen einige der beliebtesten verfügbaren Bibliotheken vorstellen. Ich werde einige reale Beispiele durchgehen, um meine Punkte zu veranschaulichen, und am Ende sind Sie hoffentlich besser gerüstet als ich, als ich zum ersten Mal eine Animationsbibliothek auswählen musste.

Ihre Ergebnisse mit diesem Rat können natürlich variieren. Alles, was ich hier teile, bezieht sich speziell auf das, was ich bauen wollte. Ihr Projekt hat möglicherweise völlig andere Anforderungen und Prioritäten, und das ist in Ordnung. Ich denke, wichtig ist hier ein Erfahrungsbericht darüber, wie ein Frontend-Entwickler mit einem bestimmten Ziel denkt.

Diesbezüglich betrachte ich mich als Frontend-Entwickler, aber mein Hintergrund ist stark im Design verwurzelt. Ich kenne also Code, aber nicht in dem Maße wie ein JavaScript-Ingenieur. Ich wollte das nur klarstellen, da die Erfahrung die endgültige Entscheidung beeinflussen kann.

Das Ziel

Bevor wir zu Entscheidungen kommen, werfen wir einen Blick auf die Arten von Animationen, die ich in dieser CSS-Tricks-inspirierten Version des Spiels erstellen musste.

Ziemlich süß, oder? An diesen Animationen ist nichts Triviales. Es gibt viel zu tun – manchmal gleichzeitig – und viel zu orchestrieren. Außerdem werden die meisten Animationen durch Benutzerinteraktionen ausgelöst. Das hinterließ mir einige Prioritäten für meine Entscheidung.

• Flüssige Animationen: Die Art und Weise, wie Animationen angewendet werden, kann einen großen Einfluss darauf haben, ob sie flüssig laufen oder leicht ruckeln.
• Performance: Die Übernahme jeder Bibliothek wird ein Projekt belasten, und ich wollte, dass mein Spiel so schlank wie möglich ist.
• Komfort: Ich wollte eine schöne, saubere Syntax, die es einfacher macht, Animationen zu schreiben und zu verwalten. Ich würde sogar etwas mehr Komfort für einen kleinen Performance-Aufwand eintauschen, wenn es mir erlaubt, besseren, besser wartbaren Code zu schreiben. Auch das kommt einem Designer-zum-Entwickler zugute.
• Browserunterstützung: Natürlich wollte ich, dass mein Spiel in jedem modernen Browser funktioniert, und zwar mit einer Form von progressive enhancement, um zu verhindern, dass Legacy-Browser komplett ruiniert werden. Außerdem wollte ich definitiv eine gewisse Zukunftssicherheit.

Das waren meine Gedanken, als ich auf die Suche nach dem richtigen Werkzeug für diese spezielle Aufgabe ging.

Wahl zwischen CSS- oder JavaScript-Animationsbibliotheken

Das Erste, was ich bei der Auswahl einer Animationsbibliothek in Betracht zog, war, ob ich mich für eine CSS- oder JavaScript-basierte Bibliothek entscheiden sollte. Es gibt viele großartige CSS-Bibliotheken, viele davon mit ausgezeichneter Performance, was für mich eine hohe Priorität hatte. Ich wollte einige umfangreiche Animationen durchführen, wie z. B. die Möglichkeit, Animationen zu sequenzieren und Rückrufe bei Abschluss der Animation zu erhalten. Das ist mit reinem CSS alles möglich – trotzdem ist es weitaus weniger flüssig als das, was die meisten JavaScript-Bibliotheken bieten.

Sehen wir uns an, wie eine einfache sequenzierte Animation in CSS aussieht, und vergleichen wir sie mit jQuery, das viele integrierte Animationshelfer hat.

Die Animationen sehen gleich aus, werden aber unterschiedlich erstellt. Um die CSS-Animation zu erstellen, müssen wir zuerst die Keyframe-Animation in unserem CSS definieren und sie einer Klasse zuweisen.

.card.move {
  animation : move 2s;
}

@keyframes move {
  0% { left: 0 }
  50% { left: 100px }
  100% { left: 0 }
}

Anschließend führen wir die Animation mithilfe von JavaScript aus und lauschen auf einen CSS-Callback am Element.

var cardElement = document.getElementsByClassName("card")[0];
var statusElement = document.getElementsByClassName("status")[0];

cardElement.classList.add("move");
statusElement.innerHTML = "Animating"

var animationEndCallback = function() {
  cardElement.classList.remove("move");
  statusElement.innerHTML = "Inactive"
}

cardElement.addEventListener("webkitAnimationEnd", animationEndCallback);
cardElement.addEventListener("oAnimationEnd", animationEndCallback); 
cardElement.addEventListener("antionend", animationEndCallback);

Dass Dinge an verschiedenen Stellen passieren, mag in einem einfachen Beispiel wie diesem in Ordnung sein, aber es kann sehr verwirrend werden, wenn die Dinge komplexer werden.

Vergleichen Sie das mit der Art und Weise, wie die Animation mit jQuery erstellt wird.

$(".status").text("Animating")
$( ".card" ).animate({
  left: "100px"
}, 1000);
$( ".card" ).animate({
  left: 0
}, 1000, function() {
  $(".status").text("Inactive")
});

Hier passiert alles an derselben Stelle, was die Dinge vereinfacht, falls die Animationen in Zukunft komplexer werden.

Es schien klar, dass eine JavaScript-Bibliothek der richtige Weg war, aber welche war die richtige für mein Solitaire-Spiel? Ich meine, jQuery ist großartig und wird auch heute noch häufig verwendet, aber darauf möchte ich mich nicht verlassen. Es gibt viele JavaScript-Animationsbibliotheken, daher wollte ich etwas in Betracht ziehen, das speziell dafür entwickelt wurde, die Art von umfangreichen Animationen zu bewältigen, die ich im Sinn hatte.

Auswahl einer JavaScript-Animationsbibliothek

Mir wurde schnell klar, dass es keinen Mangel an JavaScript-Animationsbibliotheken und neuen, aufregenden Technologien gibt. Sie alle haben Vor- und Nachteile, also lass uns einige derer durchgehen, die ich in Betracht gezogen habe, und warum.

Die Web Animations API ist ein solcher Fall, der in Zukunft viele JavaScript-Animationsbibliotheken ersetzen könnte. Damit können Sie komplexe, gestaffelte Animationen erstellen, ohne externe Bibliotheken zu laden und mit der gleichen Performance wie CSS-Animationen. Der einzige Nachteil ist, dass noch nicht alle Browser sie unterstützen.

Das <canvas>-Element bietet eine weitere spannende Möglichkeit. Darin können wir Dinge mit JavaScript animieren, wie wir es mit dem DOM tun würden, aber die Animation wird als Raster gerendert, was bedeutet, dass wir einige leistungsstarke Animationen erstellen können. Der einzige Nachteil ist, dass das Canvas-Element im Wesentlichen als Bild im DOM gerendert wird. Wenn wir also pixelgenaue Perfektion suchen, gehen wir vielleicht leer aus. Als jemand, der stark auf Design achtet, war dies für mich ein Dealbreaker.

Ich brauchte etwas Bewährtes, daher wusste ich, dass ich wahrscheinlich eine der vielen JavaScript-Bibliotheken nehmen musste. Ich begann, Bibliotheken zu durchsuchen und grenzte meine Auswahl auf Anime.js und GSAP ein. Beide schienen komplexe Animationen gut zu bewältigen und hatten hervorragende Hinweise zur Performance. Anime ist eine gut gepflegte Bibliothek mit über 42.000 Sternen auf GitHub, während GSAP eine sehr beliebte, praxiserprobte Bibliothek mit einer florierenden Community ist.

Eine aktive Community war für mich entscheidend, da ich einen Ort brauchte, an dem ich um Hilfe bitten konnte, und ich wollte keine Bibliothek verwenden, die später möglicherweise aufgegeben wird. Dies betrachtete ich als Teil meiner Komfortanforderungen.

Sequenzierung von Animationen und Rückrufen

Nachdem ich meine Auswahl eingegrenzt hatte, war der nächste Schritt die Implementierung einer komplexen Animation mit meinen beiden Bibliotheken. Eine wiederkehrende Animation in einem Solitaire-Spiel ist, dass eine Karte irgendwohin bewegt und dann umgedreht wird. Sehen wir uns also an, wie das aussieht.

Beide Animationen sehen großartig aus! Sie sind flüssig und die Implementierung beider war ziemlich unkompliziert. Beide Bibliotheken hatten eine Timeline-Funktion, die das Erstellen von Sequenzen zum Kinderspiel machte. So sieht die Implementierung in AnimeJS aus.

var timeline = anime.timeline({
  begin: function() {
    $(".status").text("Animating")
  },
  complete: function() {
    $(".status").text("Inactive")
  }
});

timeline.add({
  targets: '.card',
  left: [0, 300],
  easing: 'easeInOutSine',
  duration: 500
}).add({
  targets: '.card .back',
  rotateY: [0, 90],
  easing: 'easeInSine',
  duration: 200
}).add({
  targets: '.card .front',
  rotateY: [-90, 0],
  easing: 'easeOutSine',
  duration: 200
})

Die timeline()-Funktion von Anime verfügt über integrierte Rückrufe für den Beginn und das Ende der Animation, und das Erstellen der Sequenz ist so einfach wie das Anhängen der sequenziellen Animationen. Zuerst bewege ich die Karte, dann drehe ich mein Rückseitenbild um 90 Grad, sodass es aus dem Blickfeld verschwindet, und dann drehe ich mein Vorderseitenbild um 90 Grad, sodass es ins Blickfeld kommt.

Die gleiche Implementierung mit der timeline()-Funktion von GSAP sieht sehr ähnlich aus.

var timeline = gsap.timeline({
  onStart: function() {
    $(".status").text("Animating")
  },
  onComplete: function() {
    $(".status").text("Inactive")
  }
});

timeline.fromTo(".card", {
  left: 0
}, {
  duration: 0.5,
  left: 300
}).fromTo(".card .back", {
  rotationY: 0
}, {
  rotationY: 90,
  ease: "power1.easeIn",
  duration: 0.2
}).fromTo(".card .front", {
  rotationY: -90
}, {
  rotationY: 0,
  ease: "power1.easeOut",
  duration: 0.2
})

Zeit für die Entscheidung

Der Hauptunterschied zwischen Anime und GSAP scheint die Syntax zu sein, wobei GSAP vielleicht etwas ausgefeilter ist. Ich hatte zwei großartige Bibliotheken, die sehr ähnliche Funktionalitäten hatten, komplexe Animationen bewältigen konnten und eine florierende Community hatten. Es schien, als hätte ich ein Kopf-an-Kopf-Rennen!

Priorität	Anime	GSAP
Flüssige Animationen	✅	✅
Leistung	✅	✅
Komfort	✅	✅
Browser-Unterstützung	✅	✅

Was hat mich also dazu bewogen, die eine Bibliothek der anderen vorzuziehen?

Ich war sehr besorgt darüber, wie sich die Bibliothek unter Druck verhält. Laggy Animationen in einem Spiel wie Solitaire können die Spielbarkeit erheblich beeinträchtigen. Ich wusste, dass ich die Leistung der Bibliothek nicht vollständig einschätzen konnte, bevor ich das Spiel erstellt hatte. Glücklicherweise hatte GSAP einen Stresstest durchgeführt, der verschiedene Animationsbibliotheken miteinander verglich, einschließlich Anime.

GSAP sah in diesem Vergleich sicherlich wie die überlegene Bibliothek für die Bewältigung vieler komplexer Animationen aus. GSAP lieferte mir über 26 Bilder pro Sekunde bei einer anspruchsvollen Animation, die Anime nur auf 19 Bilder pro Sekunde brachte. Nachdem ich mich mehr mit GSAP beschäftigt und ihre Foren durchgesehen hatte, wurde klar, dass Performance für die Macher von GSAP höchste Priorität hatte.

Und obwohl sowohl GSAP als auch Anime schon länger existieren, ist das Anime-Repository seit einigen Jahren etwas eingeschlafen, während GSAP in den letzten Monaten Commits gemacht hat.

Ich habe mich für GSAP entschieden und meine Entscheidung nicht bereut!

Wie sieht es bei Ihnen aus? Stimmt etwas davon mit Ihrer Bewertung und dem Vergleich von Frontend-Tools überein? Gibt es andere Prioritäten, die Sie bei einem solchen Projekt berücksichtigt hätten (z. B. Barrierefreiheit usw.)? Oder hatten Sie ein Projekt, bei dem Sie Ihre Auswahl aus einer Reihe verschiedener Optionen eingrenzen mussten? Teilen Sie es bitte in den Kommentaren mit, denn ich würde es gerne wissen!

Und wenn Sie sehen möchten, wie es aussieht, wenn ein ganzes Kartendeck animiert wird, können Sie meine Website besuchen und eine Partie Solitaire spielen. Viel Spaß!