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

Es gibt eine Fülle von CSS- und JavaScript-Bibliotheken für Animationsbibliotheken da draußen. So viele, dass die Auswahl des richtigen für Ihr Projekt unmöglich erscheinen kann. Das ist die Situation, mit der ich konfrontiert war, als ich mich entschied, eine zu bauen Online-Solitaire-Spiel. Ich wusste, dass ich eine Animationsbibliothek brauchen würde, aber welche war die richtige Wahl?

In diesem Artikel gehe ich durch, welche Überlegungen ich angestellt habe, worauf zu achten ist und stelle Ihnen einige der beliebtesten verfügbaren Bibliotheken vor. Ich werde mit Ihnen 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 Laufleistung mit diesem Ratschlag kann natürlich variieren. Alles, was ich hier teile, ist spezifisch für eine Sache, die ich bauen wollte. Ihr Projekt kann ganz andere Anforderungen und Prioritäten haben und das ist in Ordnung. Ich denke, was hier wichtig ist, ist, einen Bericht aus erster Hand zu bekommen denken wie ein Frontend-Entwickler mit einem bestimmten Ziel.

Apropos, ich betrachte mich selbst als Front-End-Entwickler, aber mein Hintergrund ist sehr stark im Design. Ich kenne mich also mit Code aus, aber nicht so gut wie jemand, der ein JavaScript-Ingenieur ist. Ich wollte das nur klarstellen, weil Erfahrung sicherlich die endgültige Entscheidung beeinflussen kann.

Hier ist das Ziel

Bevor wir uns mit der Entscheidungsfindung befassen, werfen wir einen Blick auf die Arten von Animationen, die ich in dieser CSS-Tricks-ifizierten Version des Spiels erstellen musste:

Ziemlich süß, oder? An diesen Animationen ist nichts wirklich Triviales. Es passiert viel – manchmal gleichzeitig – und es gibt viel zu orchestrieren. Außerdem wird ein Großteil der Animationen durch Benutzerinteraktionen ausgelöst. Das ließ mich mit ein paar Prioritäten für meine Entscheidung zurück:

• Reibungslose Animationen: Die Art und Weise, wie Animationen angewendet werden, kann einen großen Einfluss darauf haben, ob sie reibungslos laufen oder ein wenig abgehackt sind.
• Eigenschaften: Die Übernahme einer beliebigen Bibliothek wird einem Projekt mehr Gewicht verleihen, und ich wollte, dass mein Spiel so schlank wie möglich ist.
• Bequemlichkeit: Ich wollte eine schöne, saubere Syntax, die es einfacher macht, die Animationen zu schreiben und zu verwalten. Ich würde sogar ein wenig zusätzlichen Komfort für einen geringen Leistungsaufwand eintauschen, wenn ich dadurch besseren, wartbareren Code schreiben könnte. Auch dies verheißt Gutes für einen Designer, der zum Entwickler wurde.
• Browser-Unterstützung: Natürlich wollte ich, dass mein Spiel auf jedem modernen Browser funktioniert, indem ich irgendeine Form von progressiver Verbesserung verwende, um zu verhindern, dass ältere Browser völlig borken. Außerdem wollte ich definitiv etwas Zukunftssicherheit.

Das habe ich mitgenommen, als ich mich auf die Suche nach dem richtigen Werkzeug für diesen speziellen Job gemacht habe.

Auswahl zwischen CSS oder JavaScript Animationsbibliotheken

Das erste, was ich bei der Auswahl einer Animationsbibliothek überlegt habe, war, ob ich eine CSS- oder JavaScript-basierte Bibliothek verwenden sollte. Da sind viele tolle CSS-Bibliotheken, viele von ihnen mit hervorragenden Leistungen, die für mich eine hohe Priorität hatten. Ich wollte einige Hochleistungsanimationen machen, wie die Möglichkeit, Animationen zu sequenzieren und Rückrufe nach Abschluss der Animation zu erhalten. Das ist alles mit reinem CSS möglich – aber es ist viel 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 Sie sie mit jQuery, das über zahlreiche integrierte Animationshelfer verfügt:

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 an eine Klasse anhängen:

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

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

Anschließend führen wir die Animation mit JavaScript aus und warten auf einen CSS-Callback für das 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);

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

Vergleichen Sie dies damit, wie die Animation mit jQuery durchgeführt wird:

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

Hier passiert alles am selben Ort, 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 auch heute noch weit verbreitet, aber das ist nichts, woran ich meinen Hut hängen möchte. Es gibt viele JavaScript-Animationsbibliotheken, daher wollte ich etwas in Betracht ziehen, das speziell für die Art von umfangreichen Animationen entwickelt wurde, die ich mir vorgestellt habe.

Auswählen einer JavaScript-Animationsbibliothek

Mir wurde schnell klar, dass es an JavaScript-Animationsbibliotheken nicht mangelt und neue, spannende Technologien. Sie alle haben Vor- und Nachteile, also lassen Sie uns einige von denen durchgehen, die ich in Betracht gezogen habe, und warum.

Das 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 Leistung wie CSS-Animationen. Der einzige Nachteil ist das noch nicht alle Browser unterstützen es. 

Das <canvas> element bietet eine weitere spannende Gelegenheit. 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 Hochleistungsanimationen erstellen können. Der einzige Nachteil ist, dass das Canvas-Element im Wesentlichen als Bild im DOM gerendert wird. Wenn wir also nach Pixelperfektion suchen, haben wir möglicherweise Pech. Als jemand, der sich sehr für Design interessiert, war dies für mich ein Dealbreaker.

Ich brauchte etwas Erprobtes und Erprobtes, also wusste ich, dass ich mich wahrscheinlich für eine der vielen JavaScript-Bibliotheken entscheiden musste. Ich fing an, mir Bibliotheken anzusehen und schränkte meine Auswahl ein Anime.js und GSAP. Sie schienen beide gut mit komplexen Animationen umzugehen und hatten ausgezeichnete Hinweise zur Leistung. Anime ist eine gut gepflegte Bibliothek mit über 42.000 Sternen auf GitHub, während GSAP eine super beliebte, kampferprobte Bibliothek mit einer blühenden Community ist.

Eine aktive Community war für mich von entscheidender Bedeutung, da ich einen Ort brauchte, an dem ich um Hilfe bitten konnte, und ich wollte keine Bibliothek benutzen, die später möglicherweise aufgegeben wurde. Ich betrachtete dies als Teil meiner Bequemlichkeitsanforderungen.

Animationen und Callbacks sequenzieren

Nachdem ich meine Auswahl eingegrenzt hatte, bestand der nächste Schritt darin, eine komplexe Animation mit meinen beiden Bibliotheken zu implementieren. Eine wiederkehrende Animation in einem Solitaire-Spiel ist die einer Karte, die sich irgendwohin bewegt und dann umdreht, also mal sehen, wie das aussieht:

Beide Animationen sehen toll aus! Sie sind glatt und die Implementierung beider war ziemlich einfach. Beide Bibliotheken hatten eine Timeline-Funktion das machte das Erstellen von Sequenzen zum Kinderspiel. 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
})

Animes timeline() Funktion ist mit Rückrufen beim Beginn und Ende der Animation integriert, und das Erstellen der Sequenz ist so einfach wie das Anhängen der sequentiellen Animationen. Zuerst bewege ich die Karte, dann drehe ich meine Rückseite um 90 Grad, sodass sie nicht mehr zu sehen ist, und dann drehe ich meine Vorderseite um 90 Grad, sodass sie sichtbar wird.

Dieselbe Implementierung unter Verwendung von GSAPs timeline() Funktion 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
})

Entscheidungszeit

Der Hauptunterschied zwischen Anime und GSAP scheint die Syntax zu sein, wobei GSAP etwas ausgefeilter sein könnte. Ich blieb bei zwei großartigen Bibliotheken hängen, die sehr ähnliche Funktionen hatten, mit komplexen Animationen umgehen konnten und eine blühende Community hatten. Es schien, als hätte ich ein Unentschieden!

Priorität	anime	GSAP
Glatte Animationen	✅	✅
Leistung	✅	✅
Verbraucherfreundlichkeit	✅	✅
Browser-Unterstützung	✅	✅

Also, was hat mich dazu gebracht, eine Bibliothek der anderen vorzuziehen?

Ich war sehr besorgt darüber, wie die Bibliothek unter Druck reagieren würde. Verzögerte Animationen in einem Spiel wie Solitaire können großen Einfluss darauf haben, wie viel Spaß es macht, das Spiel zu spielen. Ich wusste, dass ich nicht in der Lage sein würde, die Leistung der Bibliothek vollständig zu sehen, bevor ich das Spiel erstellte. Zum Glück hatte GSAP ein gemacht Stresstest die verschiedene Animationsbibliotheken miteinander verglichen, einschließlich Anime.

Wenn man das betrachtet, schien GSAP sicherlich die überlegene Bibliothek für den Umgang mit vielen komplexen Animationen zu sein. GSAP gab mir mehr als 26 Bilder pro Sekunde bei einer schweren Animation, die Anime nur mit 19 übertreffen konnte. Nachdem ich mehr über GSAP gelesen und in ihre Foren geschaut hatte, wurde klar, dass die Leistung für die Jungs von höchster Priorität war hinter GSAP.

Und obwohl es sowohl GSAP als auch Anime schon eine Weile gibt, hat Animes Repo ein paar Jahre lang etwas inaktiv gesessen, während GSAP in den letzten paar Monaten Commits gemacht hat.

Am Ende habe ich GSAP verwendet und habe meine Entscheidung nicht bereut!

Und du? Stimmt irgendetwas davon damit überein, wie Sie Front-End-Tools bewerten und vergleichen? Gibt es andere Prioritäten, die Sie in einem Projekt wie diesem berücksichtigt haben könnten (z. B. Zugänglichkeit usw.)? Oder haben Sie ein Projekt, bei dem Sie Ihre Auswahl aus einer Reihe verschiedener Optionen einschränken mussten? Bitte teilen Sie in den Kommentaren, weil ich es gerne wissen würde! 

Oh, und wenn Sie sehen möchten, wie es aussieht, wenn Sie ein ganzes Kartenspiel animieren, können Sie zu meiner Website gehen und Spielen Sie eine Partie Solitaire. Spaß haben!