Hogyan választottam animációs könyvtárat a pasziánsz játékomhoz

Rengeteg CSS- és JavaScript-könyvtár található az animációs könyvtárak számára. Valójában olyan sok, hogy lehetetlennek tűnik kiválasztani a megfelelőt a projektjéhez. Ezzel a helyzettel szembesültem, amikor úgy döntöttem, hogy építek egy online pasziánsz játék. Tudtam, hogy szükségem lesz egy animációs könyvtárra, de melyiket válasszam a legjobban?

Ebben a cikkben áttekintem, milyen szempontokat vettem figyelembe, mire kell figyelni, és bemutatom a legnépszerűbb elérhető könyvtárakat. Végigmegyek veled néhány valós példán, hogy illusztráljam a gondolataimat, és a végén, remélhetőleg, jobban felkészültél, mint én, amikor először kellett animációs könyvtárat választanom.

Az Ön futásteljesítménye ezzel a tanáccsal természetesen változhat. Minden, amit itt megosztok, egy olyan dologra vonatkozik, amelyet meg akartam építeni. Lehet, hogy a projektje teljesen eltérő követelményekkel és prioritásokkal rendelkezik, és ez rendben van. Szerintem itt az a fontos, hogy első kézből kapjunk beszámolót front-end fejlesztőként gondolkodva meghatározott céllal.

Apropó, front-end fejlesztőnek tartom magam, de hátterem rendkívül nehéz a tervezésben. Tehát ismerem a kódot, de nem olyan mértékben, mint egy JavaScript mérnök. Csak tisztázni akartam, mert a tapasztalat minden bizonnyal befolyásolhatja a végső döntést.

Itt a cél

Mielőtt bármiféle döntéshozatalba kezdenénk, vessünk egy pillantást arra, hogy milyen animációkat kellett készítenem a játék CSS-trükkökkel kiegészített verziójában:

Nagyon édes, igaz? Semmi sem triviális ezekben az animációkban. Sok minden történik – néha egyszerre – és sok a hangszerelnivaló. Ráadásul az animációk többségét a felhasználói interakciók váltják ki. Így maradt néhány prioritás a döntésemnél:

• Sima animációk: Az animációk alkalmazásának módja nagy hatással lehet arra, hogy zökkenőmentesen futnak-e, vagy egy kis szaggatottságot jelenítenek meg.
• Teljesítmény: Bármely könyvtár elfogadása növeli a projekt súlyát, és azt akartam, hogy a játékom a lehető legkevesebb legyen.
• Kényelem: Szép, tiszta szintaxist szerettem volna, ami megkönnyíti az animációk írását és kezelését. Még egy kis plusz kényelmet is elcserélnék egy kis teljesítményköltségre, ha jobb, karbantarthatóbb kódot írhatok. Ez ismét jót ígér egy tervezőből lett fejlesztő számára.
• Böngésző támogatás: Természetesen azt akartam, hogy a játékom minden modern böngészőn működjön, valamilyen progresszív fejlesztéssel, hogy megakadályozzuk a régi böngészők teljesen elromlását. Ráadásul mindenképpen jövőbiztosságot akartam.

Ezt vittem magammal, miközben kerestem a megfelelő szerszámot ehhez a munkához.

Választás a CSS vagy a JavaScript között animációs könyvtárak

Az első dolog, amit az animációs könyvtár kiválasztásakor mérlegeltem, az volt, hogy CSS vagy JavaScript alapú könyvtárat válasszak. Sok van belőlük nagyszerű CSS-könyvtárak, sok közülük kiváló teljesítménnyel, ami kiemelt fontosságú volt számomra. Nagy teljesítményű animációkat szerettem volna készíteni, például animációk sorrendjét, és visszahívást kapni az animáció befejezésekor. Mindez teljesen lehetséges a tiszta CSS-sel – ennek ellenére sokkal kevésbé zökkenőmentes, mint amit a legtöbb JavaScript-könyvtár kínál.

Nézzük meg, hogyan néz ki egy egyszerű szekvenált animáció a CSS-ben, és hasonlítsuk össze a jQuery-vel, amely rengeteg beépített animációs segéddel rendelkezik:

Az animációk ugyanúgy néznek ki, de másképp készülnek. A CSS-animáció elkészítéséhez először meg kell határoznunk a kulcsképkocka animációt a CSS-ben, és csatolnunk kell egy osztályhoz:

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

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

Ezután JavaScript segítségével végrehajtjuk az animációt, és figyelünk az elem CSS-visszahívására:

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

Ha a dolgok különböző helyeken történnek, az jó lehet egy ilyen egyszerű példában, de ez nagyon zavaró lehet, ha a dolgok egy kicsit bonyolultabbá válnak. 

Hasonlítsa össze az animációt a jQuery-vel:

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

Itt minden ugyanazon a helyen történik, leegyszerűsítve a dolgokat, ha a jövőben az animációk bonyolultabbá válnának.

Világosnak tűnt, hogy a JavaScript-könyvtár a megfelelő út, de melyiket válasszam a pasziánsz játékomhoz? Úgy értem, a jQuery nagyszerű és még ma is széles körben használják, de nem erre akarom akasztani a kalapomat. Rengeteg JavaScript-animációs könyvtár létezik, ezért meg akartam fontolni valamit, ami kifejezetten az általam elképzelt nehéz animációk kezelésére készült.

JavaScript animációs könyvtár kiválasztása

Gyorsan nyilvánvalóvá vált számomra, hogy nincs hiány JavaScript animációs könyvtárakban és új, izgalmas technológiák. Mindegyiknek megvannak az előnyei és a hátrányai, ezért nézzünk meg néhányat, amelyekről és miértekről beszéltem.

A Web Animations API Ez az egyik ilyen eset, amely a jövőben sok JavaScript-animációs könyvtárat felválthat. Segítségével komplex, lépcsőzetes animációkat hozhat létre külső könyvtárak betöltése nélkül, és ugyanolyan teljesítménnyel, mint a CSS-animációk. Az egyetlen hátránya az még nem minden böngésző támogatja. 

A <canvas> elem újabb izgalmas lehetőséget kínál. Ebben animálhatunk dolgokat JavaScripttel, akárcsak a DOM-mal, de az animáció raszteres formában jelenik meg, ami azt jelenti, hogy néhány nagy teljesítményű animációt készíthetünk. Az egyetlen hátránya, hogy a vászon elem lényegében képként jelenik meg a DOM-ban, így ha pixel-tökéletességet keresünk, lehet, hogy nem lesz szerencsénk. A dizájnnal élesen összhangban lévő emberként ez egy törést jelentett számomra.

Szükségem volt valami kipróbált és tesztelt dologra, így tudtam, hogy valószínűleg a sok JavaScript-könyvtár egyikét kell választanom. Elkezdtem nézegetni a könyvtárakat, és leszűkítettem a választási lehetőségeimet Anime.js és a GSAP. Úgy tűnt, hogy mindketten jól kezelik az összetett animációkat, és kiváló megjegyzésekkel rendelkeztek a teljesítményről. Az Anime egy jól karbantartott könyvtár több mint 42.000 XNUMX csillaggal a GitHubon, míg a GSAP egy rendkívül népszerű, harcokban tesztelt könyvtár virágzó közösséggel.

Számomra kritikus volt az aktív közösség, mivel szükségem volt egy helyre, ahol segítséget kérhetek, és nem akartam olyan könyvtárat használni, amelyet később elhagyhatnak. Ezt kényelmi követelményeim részének tekintettem.

Animációk és visszahívások szekvenálása

Miután leszűkítettem a választási lehetőségeimet, a következő lépés egy komplex animáció megvalósítása volt a két könyvtáram segítségével. A pasziánszjátékban egy visszatérő animáció egy kártya elmozdulása valahol, majd megfordul, szóval nézzük meg, hogyan néz ki:

Mindkét animáció jól néz ki! Sima, és mindkettő megvalósítása meglehetősen egyszerű volt. Mindkét könyvtárnak volt egy idővonal funkció ami szellővé tette a sorozatok létrehozását. Így néz ki a megvalósítás az AnimeJS-ben:

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

Anime-k timeline() funkció beépített visszahívásokkal rendelkezik az animáció elején és végén, és a sorozat létrehozása olyan egyszerű, mint a szekvenciális animációk hozzáfűzése. Először megmozgatom a kártyát, majd 90 fokkal elfordítom a hátsó képemet, így eltűnik a látómezőből, majd 90 fokkal elfordítom az elülső képemet, így megjelenik.

Ugyanez a megvalósítás GSAP használatával timeline() funkció nagyon hasonlít:

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

Döntési idő

A fő különbség az Anime és a GSAP között a szintaxisban rejlik, ahol a GSAP egy kicsit kidolgozottabb lehet. Megakadtam két nagyszerű könyvtárnál, amelyek nagyon hasonló funkcionalitásúak voltak, képesek voltak megbirkózni az összetett animációkkal, és virágzó közösségük volt. Úgy tűnt, holtversenyem van!

Prioritás	Anime	GSAP
Sima animációk	✅	✅
teljesítmény	✅	✅
Kényelem	✅	✅
Böngésző támogatás	✅	✅

Szóval, mi késztetett arra, hogy az egyik könyvtárat válasszam a másik helyett?

Nagyon aggódtam amiatt, hogy a könyvtár hogyan viselkedik nyomás alatt. A késleltetett animációk egy olyan játékban, mint a Solitaire, nagyban befolyásolhatják a játék élvezetét. A játék létrehozása előtt tudtam, hogy nem fogom tudni teljesen látni a könyvtár teljesítményét. Szerencsére a GSAP elkészítette a stressz teszt amelyek összehasonlították a különböző animációs könyvtárakat, köztük az animét.

Ha ezt nézzük, a GSAP minden bizonnyal a kiváló könyvtárnak tűnt a rengeteg összetett animáció kezelésére. A GSAP 26 képkocka/másodperc sebességet adott nekem egy nehéz animáción, amelyet az Anime csak 19-nél tudott felülmúlni. Miután többet olvastam a GSAP-ről, és átnéztem a fórumaikat, világossá vált, hogy a srácok számára a teljesítmény a legfontosabb. a GSAP mögött.

És annak ellenére, hogy a GSAP és az Anime is létezett egy ideje, az Anime repója némileg szunnyadt néhány éve, míg a GSAP kötelezettségeket hajtott végre az elmúlt néhány hónapban.

Végül a GSAP-t használtam, és nem bántam meg a döntésemet!

És veled mi van? Összeegyeztethető-e ez azzal, ahogy Ön értékeli és összehasonlítja a front-end szerszámokat? Vannak más prioritások, amelyeket fontolóra vett (pl. akadálymentesítés stb.) egy ilyen projektben? Vagy van olyan projektje, ahol a különféle lehetőségek közül kellett leválasztania a választásait? Kérlek oszd meg kommentben, mert szeretném tudni! 

Ó, és ha szeretné látni, hogyan néz ki egy egész pakli kártya animációja során, látogasson el a webhelyemre, és játssz egy pasziánsz játékot. Érezd jól magad!