Comment j'ai choisi une bibliothèque d'animations pour mon jeu de solitaire

Il existe une abondance de bibliothèques CSS et JavaScript pour les bibliothèques d'animation. Tellement, en fait, que choisir le bon pour votre projet peut sembler impossible. C'est la situation à laquelle j'ai été confrontée lorsque j'ai décidé de construire un jeu de solitaire en ligne. Je savais que j'aurais besoin d'une bibliothèque d'animations, mais quelle était la bonne à choisir ?

Dans cet article, je passerai en revue les considérations que j'ai faites, ce qu'il faut rechercher et je vous présenterai certaines des bibliothèques les plus populaires disponibles. Je vais passer en revue quelques exemples concrets avec vous pour illustrer mes propos, et à la fin, j'espère que vous serez mieux équipé que moi lorsque j'ai dû choisir une bibliothèque d'animation pour la première fois.

Votre kilométrage avec ces conseils peut varier, bien sûr. Tout ce que je partage ici est spécifique à une chose que je voulais construire. Votre projet peut avoir des exigences et des priorités complètement différentes et ce n'est pas grave. Je pense que ce qui est important ici, c'est d'avoir un compte rendu de première main de penser comme un développeur front-end avec un objectif particulier.

En parlant de cela, je me considère comme un développeur front-end, mais mon expérience est très lourde en conception. Je connais donc le code, mais pas autant que quelqu'un qui est un ingénieur JavaScript. Je voulais juste clarifier cela parce que l'expérience peut certainement avoir un impact sur la décision finale.

Voici le but

Avant d'entrer dans la prise de décision, jetons un coup d'œil aux types d'animations que j'avais besoin de faire dans cette version CSS-Tricks-ified du jeu :

Assez doux, non? Il n'y a rien de vraiment trivial dans ces animations. Il se passe beaucoup de choses – parfois simultanément – ​​et beaucoup à orchestrer. De plus, la majorité des animations sont déclenchées par les interactions des utilisateurs. Donc, cela m'a laissé quelques priorités avant de prendre ma décision :

• Animations fluides : La façon dont les animations sont appliquées peut avoir un impact important sur leur bon déroulement ou sur leur affichage un peu saccadé.
• Performance : Adopter n'importe quelle bibliothèque va ajouter du poids à un projet et je voulais que mon jeu soit aussi léger que possible.
• Confort : Je voulais une syntaxe agréable et propre qui facilite l'écriture et la gestion des animations. J'échangerais même un peu plus de commodité contre un petit coût de performance si cela me permet d'écrire un code meilleur et plus maintenable. Encore une fois, cela augure bien pour un concepteur devenu développeur.
• Prise en charge du navigateur : Bien sûr, je voulais que mon jeu fonctionne sur n'importe quel navigateur moderne en utilisant une forme d'amélioration progressive pour éviter que les anciens navigateurs ne soient complètement ennuyeux. De plus, je voulais vraiment une pérennité.

C'est ce que j'ai emporté avec moi alors que je cherchais le bon outil pour ce travail particulier.

Choisir entre CSS ou JavaScript bibliothèques d'animations

La première chose que j'ai considérée lors du choix d'une bibliothèque d'animation était d'opter pour une bibliothèque basée sur CSS ou JavaScript. Il y a beaucoup de grandes bibliothèques CSS, beaucoup d'entre eux avec d'excellentes performances, ce qui était une priorité pour moi. Je cherchais à faire des animations lourdes, comme la possibilité de séquencer des animations et d'obtenir des rappels à la fin de l'animation. Tout cela est tout à fait possible avec du CSS pur. Pourtant, c'est beaucoup moins fluide que ce que proposent la plupart des bibliothèques JavaScript.

Voyons à quoi ressemble une animation séquencée simple en CSS et comparons-la à jQuery, qui contient de nombreux assistants d'animation intégrés :

Les animations se ressemblent mais sont créées différemment. Pour faire l'animation CSS, nous devons d'abord définir l'animation de l'image clé dans notre CSS et l'attacher à une classe :

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

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

Nous exécutons ensuite l'animation à l'aide de JavaScript et écoutons un rappel CSS sur l'élément :

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);

Faire en sorte que les choses se passent à différents endroits peut convenir dans un exemple simple comme celui-ci, mais cela peut devenir très déroutant une fois que les choses deviennent un peu plus complexes. 

Comparez cela à la façon dont l'animation est réalisée avec jQuery :

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

Ici, tout se passe au même endroit, ce qui simplifie les choses si les animations deviennent plus complexes à l'avenir.

Il semblait clair qu'une bibliothèque JavaScript était la bonne voie à suivre, mais quelle était la bonne à choisir pour mon jeu de Solitaire ? Je veux dire, jQuery est génial et encore largement utilisé aujourd'hui, mais ce n'est pas quelque chose que je veux accrocher mon chapeau. Il existe de nombreuses bibliothèques d'animation JavaScript, je voulais donc envisager quelque chose spécialement conçu pour gérer le type d'animations lourdes que j'avais en tête.

Choisir une bibliothèque d'animation JavaScript

Il m'est rapidement apparu que les bibliothèques d'animation JavaScript ne manquaient pas et de nouvelles technologies passionnantes. Ils ont tous des avantages et des inconvénients, alors passons en revue certains de ceux que j'ai pris en compte et pourquoi.

Les API d'animations Web est l'un de ces cas qui pourrait remplacer de nombreuses bibliothèques d'animation JavaScript à l'avenir. Avec lui, vous serez capable de créer des animations échelonnées complexes sans charger de bibliothèques externes et avec les mêmes performances que les animations CSS. Le seul inconvénient est que tous les navigateurs ne le supportent pas encore. 

Les <canvas> élément présente une autre opportunité passionnante. Dans celui-ci, nous pouvons animer des choses avec JavaScript, comme nous le ferions avec le DOM, mais l'animation est rendue sous forme de raster, ce qui signifie que nous pouvons créer des animations hautes performances. Le seul inconvénient est que l'élément canvas est essentiellement rendu sous forme d'image dans le DOM, donc si nous recherchons la perfection des pixels, nous n'aurons peut-être pas de chance. En tant que personne très en phase avec le design, cela a été un dealbreaker pour moi.

J'avais besoin de quelque chose qui avait fait ses preuves, alors je savais que je devais probablement utiliser l'une des nombreuses bibliothèques JavaScript. J'ai commencé à regarder les bibliothèques et j'ai limité mes choix à Anime.js ainsi que GSAP. Ils semblaient tous les deux bien gérer les animations complexes et avaient d'excellentes notes sur les performances. Anime est une bibliothèque bien entretenue avec plus de 42.000 XNUMX étoiles sur GitHub, tandis que GSAP est une bibliothèque super populaire et éprouvée avec une communauté florissante.

Une communauté active était essentielle pour moi car j'avais besoin d'un endroit où demander de l'aide et je ne voulais pas utiliser une bibliothèque qui pourrait plus tard être abandonnée. J'ai considéré cela comme faisant partie de mes exigences de commodité.

Séquençage des animations et rappels

Une fois mes choix affinés, l'étape suivante consistait à implémenter une animation complexe à l'aide de mes deux bibliothèques. Une animation récurrente dans un jeu de solitaire est celle d'une carte se déplaçant quelque part puis se retournant, alors voyons à quoi cela ressemble :

Les deux animations sont superbes ! Ils sont fluides et leur mise en œuvre a été assez simple. Les deux bibliothèques disposaient d'un fonction de chronologie qui a rendu la création de séquences un jeu d'enfant. Voici à quoi ressemble l'implémentation dans AnimeJS :

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
})

Les animés timeline() fonction est intégré avec des rappels au début et à la fin de l'animation, et la création de la séquence est aussi simple que d'ajouter les animations séquentielles. Tout d'abord, je déplace la carte, puis je tourne mon image arrière de 90 degrés, pour qu'elle disparaisse, puis je tourne mon image avant de 90 degrés, pour qu'elle apparaisse.

La même implémentation utilisant GSAP timeline() fonction ressemble beaucoup :

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
})

Heure de la décision

La principale différence entre Anime et GSAP semble être la syntaxe, où GSAP pourrait être un peu plus élaboré. J'étais coincé avec deux grandes bibliothèques qui avaient des fonctionnalités très similaires, étaient capables de gérer des animations complexes et avaient une communauté florissante. Il semblait que j'avais une course à égalité!

Priorité	Anime	GSAP
Des animations fluides	✅	✅
Performance	✅	✅
Pratique	✅	✅
Navigateurs pris en charge	✅	✅

Alors, qu'est-ce qui m'a fait choisir une bibliothèque plutôt qu'une autre ?

J'étais très préoccupé par la façon dont la bibliothèque agirait sous la pression. Avoir des animations décalées dans un jeu comme Solitaire peut avoir un impact considérable sur le plaisir de jouer. Je savais que je ne serais pas en mesure de voir pleinement comment la bibliothèque fonctionnait avant de créer le jeu. Heureusement, GSAP avait fait un stress test qui a comparé différentes bibliothèques d'animation les unes aux autres, y compris Anime.

En regardant cela, GSAP semblait certainement être la bibliothèque supérieure pour traiter de nombreuses animations complexes. GSAP me donnait plus de 26 images par seconde sur une animation lourde que Anime n'a pu dépasser qu'à 19. Après avoir lu davantage sur GSAP et examiné leurs forums, il est devenu clair que la performance était la plus haute priorité pour les gars derrière GSAP.

Et même si GSAP et Anime existent depuis un certain temps, le repo d'Anime est resté quelque peu en sommeil pendant quelques années alors que GSAP avait fait des commits au cours des deux derniers mois.

J'ai fini par utiliser GSAP et je n'ai pas regretté ma décision !

Et toi? Est-ce que tout cela correspond à la façon dont vous évaluez et comparez l'outillage frontal ? Y a-t-il d'autres priorités que vous auriez pu considérer (par exemple, l'accessibilité, etc.) dans un projet comme celui-ci ? Ou avez-vous un projet où vous avez dû réduire vos choix parmi un tas d'options différentes ? N'hésitez pas à partager dans les commentaires car j'aimerais savoir ! 

Oh, et si vous voulez voir à quoi ça ressemble lorsque vous animez tout un jeu de cartes, vous pouvez vous rendre sur mon site et faire une partie de Solitaire. S'amuser!