Cum am ales o bibliotecă de animații pentru jocul meu Solitaire

Există o mulțime de biblioteci CSS și JavaScript pentru bibliotecile de animație. Atat de multe, de fapt, incat alegerea celui potrivit pentru proiectul tau poate parea imposibila. Aceasta este situația cu care m-am confruntat când am decis să construiesc un joc Solitaire online. Știam că voi avea nevoie de o bibliotecă de animații, dar care era cea potrivită pentru a alege?

În acest articol, voi analiza ce considerații am făcut, la ce să fiți atenți și vă voi prezenta unele dintre cele mai populare biblioteci disponibile. Voi parcurge cu tine câteva exemple din lumea reală pentru a-mi ilustra punctele și, în final, sper că vei fi mai bine echipat decât mine când a trebuit pentru prima dată să aleg o bibliotecă de animații.

Kilometrajul dvs. cu acest sfat poate varia, desigur. Tot ceea ce împărtășesc aici este specific unui lucru pe care am vrut să-l construiesc. Proiectul dvs. poate avea cerințe și priorități complet diferite și este în regulă. Cred că ceea ce este important aici este obținerea unei relatări de primă mână gândind ca un dezvoltator front-end cu un scop anume.

Apropo de asta, mă consider un dezvoltator front-end, dar background-ul meu este foarte greu în design. Deci știu codul, dar nu în măsura cuiva care este inginer JavaScript. Am vrut doar să clarific asta, deoarece experiența poate afecta cu siguranță decizia finală.

Iată scopul

Înainte de a lua o decizie, să aruncăm o privire asupra tipurilor de animații pe care trebuia să le fac în această versiune a jocului cu trucuri CSS:

Destul de dulce, nu? Nu este nimic tocmai banal la aceste animații. Se întâmplă multe – uneori simultan – și multe de orchestrat. În plus, majoritatea animațiilor sunt declanșate de interacțiunile utilizatorului. Deci, asta mi-a lăsat câteva priorități în decizia mea:

• Animații fluide: Modul în care sunt aplicate animațiile poate avea un impact mare asupra faptului că acestea se desfășoară fără probleme sau dacă prezintă puțină agitație.
• Performanță: Adoptarea oricărei biblioteci va adăuga greutate unui proiect și mi-am dorit ca jocul meu să fie cât mai slab posibil.
• Confort: Îmi doream o sintaxă frumoasă, curată, care să faciliteze scrierea și gestionarea animațiilor. Aș schimba chiar și puțin confort suplimentar pentru un cost mic de performanță dacă îmi permite să scriu un cod mai bun și mai ușor de întreținut. Din nou, acest lucru este de bun augur pentru un designer devenit dezvoltator.
• Suport browser: Desigur, am vrut ca jocul meu să funcționeze pe orice browser modern, folosind o formă de îmbunătățire progresivă pentru a preveni înlăturarea completă a browserelor vechi. În plus, îmi doream cu siguranță niște pregătiri pentru viitor.

Aceasta este ceea ce am luat cu mine când am plecat în căutarea instrumentului potrivit pentru această meserie specială.

Alegeți între CSS sau JavaScript biblioteci de animație

Primul lucru pe care l-am luat în considerare atunci când am ales o bibliotecă de animație a fost dacă să merg cu o bibliotecă bazată pe CSS sau JavaScript. Sunt multe biblioteci CSS grozave, multe dintre ele cu performanțe excelente, ceea ce a fost o prioritate pentru mine. Căutam să fac niște animații grele, cum ar fi capacitatea de a secvența animații și de a primi apeluri la finalizarea animației. Toate acestea sunt total posibil cu CSS pur – totuși, este mult mai puțin fluid decât ceea ce oferă majoritatea bibliotecilor JavaScript.

Să vedem cum arată o animație secvențială simplă în CSS și să o comparăm cu jQuery, care are o mulțime de ajutoare de animație încorporate:

Animațiile arată la fel, dar sunt create diferit. Pentru a face animația CSS, mai întâi, trebuie să definim animația cadru-cheie în CSS-ul nostru și să o atașăm la o clasă:

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

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

Apoi executăm animația folosind JavaScript și ascultăm un callback CSS pe 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);

Să se întâmple lucruri în locuri diferite ar putea fi bine într-un exemplu simplu ca acesta, dar poate deveni foarte confuz odată ce lucrurile devin puțin mai complexe. 

Comparați acest lucru cu modul în care se face animația cu jQuery:

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

Aici, totul se întâmplă în același loc, simplificând lucrurile în cazul în care animațiile devin mai complexe în viitor.

Părea clar că o bibliotecă JavaScript era calea potrivită, dar care era cea potrivită pentru jocul meu Solitaire? Adică, jQuery este grozav și încă folosit pe scară largă și astăzi, dar nu e ceva de care vreau să-mi atârn pălăria. Există o mulțime de biblioteci de animație JavaScript, așa că am vrut să iau în considerare ceva creat special pentru a gestiona tipul de animații grele pe care le aveam în minte.

Alegerea unei biblioteci de animații JavaScript

Mi-a devenit rapid evident că nu lipsesc bibliotecile de animație JavaScript și tehnologii noi, interesante. Toate au beneficii și dezavantaje, așa că haideți să trecem prin câteva dintre cele pe care le-am considerat și de ce.

API-ul Web Animations este un astfel de caz care ar putea înlocui multe biblioteci de animație JavaScript în viitor. Cu acesta, veți putea crea animații complexe eșalonate fără a încărca biblioteci externe și cu aceeași performanță ca și animațiile CSS. Singurul dezavantaj este că nu toate browserele îl acceptă încă. 

<canvas> elementul prezintă o altă oportunitate interesantă. În ea, putem anima lucrurile cu JavaScript, așa cum am face cu DOM, dar animația este redată ca raster, ceea ce înseamnă că putem face niște animații de înaltă performanță. Singurul dezavantaj este că elementul canvas este redat în esență ca o imagine în DOM, așa că dacă căutăm perfecțiunea pixelilor, s-ar putea să nu avem noroc. Fiind cineva în ton acut cu designul, acesta a fost un dealbreaker pentru mine.

Aveam nevoie de ceva încercat și testat, așa că știam că probabil că trebuie să merg cu una dintre multele biblioteci JavaScript. Am început să mă uit la biblioteci și mi-am restrâns opțiunile Anime.js și GSAP. Ambii păreau să gestioneze bine animațiile complexe și aveau note excelente despre performanță. Anime este o bibliotecă bine întreținută, cu peste 42.000 de stele pe GitHub, în ​​timp ce GSAP este o bibliotecă super populară, testată în lupte, cu o comunitate înfloritoare.

O comunitate activă a fost esențială pentru mine, deoarece aveam nevoie de un loc în care să cer ajutor și nu voiam să folosesc o bibliotecă care ar putea fi abandonată ulterior. Am considerat acest lucru ca parte a cerințelor mele de confort.

Secvențierea animațiilor și a apelurilor inverse

Odată ce mi-am restrâns opțiunile, următorul pas a fost să implementez o animație complexă folosind cele două biblioteci ale mele. O animație recurentă într-un joc de solitaire este aceea a unei cărți care se mișcă undeva și apoi se întoarce, așa că haideți să vedem cum arată:

Ambele animații arată grozav! Sunt fără probleme, iar implementarea ambelor a fost destul de simplă. Ambele biblioteci aveau un funcția cronologică care a făcut ca crearea secvențelor să fie o briză. Iată cum arată implementarea în 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
})

Animei timeline() funcţie vine încorporat cu apeluri la începutul și la sfârșitul animației, iar crearea secvenței este la fel de ușoară ca și adăugarea animațiilor secvențiale. Mai întâi, mișc cardul, apoi îmi întorc imaginea din spate cu 90 de grade, astfel încât să iasă din vedere, apoi îmi întorc imaginea din față cu 90 de grade, astfel încât să iasă la vedere.

Aceeași implementare folosind GSAP timeline() funcţie arata foarte asemanator:

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

Timp de decizie

Principala diferență dintre Anime și GSAP pare să fie sintaxa, unde GSAP ar putea fi puțin mai elaborat. Am rămas blocat cu două biblioteci grozave care aveau funcționalități foarte similare, erau capabile să se ocupe de animații complexe și aveau o comunitate înfloritoare. Se părea că am avut o cursă de egalitate!

Prioritate	Anime	GSAP
Animații netede	✅	✅
Performanţă	✅	✅
confort	✅	✅
Suport browser	✅	✅

Deci, ce m-a făcut să aleg o bibliotecă în detrimentul celeilalte?

Eram foarte îngrijorat de modul în care biblioteca va acționa sub presiune. A avea animații întârziate într-un joc precum Solitaire poate afecta foarte mult cât de distractiv este să joci. Știam că nu voi putea vedea pe deplin cum a funcționat biblioteca înainte de a crea jocul. Din fericire, GSAP făcuse o test de stres care au comparat diferite biblioteci de animație între ele, inclusiv Anime.

Privind asta, GSAP părea cu siguranță a fi biblioteca superioară pentru a se ocupa de o mulțime de animații complexe. GSAP îmi dădea mai mult de 26 de cadre pe secundă într-o animație grea pe care Anime a reușit să o depășească doar la 19. După ce am citit mai multe despre GSAP și m-am uitat pe forumurile lor, a devenit clar că performanța era cea mai mare prioritate pentru băieți. în spatele GSAP.

Și chiar dacă atât GSAP, cât și Anime au existat de ceva vreme, repo-ul Anime a rămas oarecum latent de câțiva ani, în timp ce GSAP și-a făcut angajări în ultimele două luni.

Am ajuns să folosesc GSAP și nu am regretat decizia mea!

Tu ce mai faci? Are vreo împrejurare cu modul în care evaluați și comparați uneltele front-end? Există și alte priorități pe care ați putea să le fi luat în considerare (de exemplu, accesibilitatea etc.) într-un proiect ca acesta? Sau aveți un proiect în care a trebuit să vă reduceți alegerile dintr-o grămadă de opțiuni diferite? Vă rog să împărtășiți în comentarii pentru că aș vrea să știu! 

A, și dacă doriți să vedeți cum arată când animați un pachet întreg de cărți, puteți accesa site-ul meu și juca un joc de Solitaire. Distrează-te!