Kuidas ma valisin oma pasjanssimängu jaoks animatsioonikogu

Animatsiooniteekide jaoks on seal palju nii CSS-i kui ka JavaScripti teeke. Tegelikult nii palju, et oma projekti jaoks õige valimine võib tunduda võimatu. Just sellise olukorraga seisin silmitsi, kui otsustasin ehitada Internetis Solitaire mäng. Teadsin, et mul on vaja animatsiooniteeki, kuid milline oli õige valik?

Selles artiklis käsitlen, milliseid kaalutlusi tegin, millele tähelepanu pöörata ja tutvustan teile mõnda populaarseimat saadaolevat teeki. Vaatan koos teiega mõned näited oma mõtete illustreerimiseks ja loodetavasti olete lõpuks paremini varustatud kui mina, kui pidin esimest korda animatsiooniteegi valima.

Teie läbisõit selle nõuande järgi võib muidugi erineda. Kõik, mida ma siin jagan, on seotud asjaga, mida tahtsin ehitada. Teie projektil võivad olla täiesti erinevad nõuded ja prioriteedid ning see on OK. Ma arvan, et siin on oluline saada vahetu ülevaade mõeldes nagu esiotsa arendaja kindla eesmärgiga.

Sellest rääkides pean end küll esiotsa arendajaks, kuid minu taust on disainilt üliraske. Nii et ma tean koodi, kuid mitte nii palju kui keegi, kes on JavaScripti insener. Tahtsin seda lihtsalt selgitada, sest kogemus võib kindlasti lõplikku otsust mõjutada.

Siin on eesmärk

Enne kui hakkame otsustama, vaatame, milliseid animatsioone pidin selles mängu CSS-trikkidega täiendatud versioonis tegema:

Päris magus, eks? Nendes animatsioonides pole midagi triviaalset. Toimub palju – mõnikord samaaegselt – ja palju orkestreerimist. Lisaks käivitab enamik animatsioone kasutaja interaktsioonidest. Nii et see jättis mulle oma otsuse tegemisel mõned prioriteedid:

• Sujuvad animatsioonid: Animatsioonide rakendamisel võib olla suur mõju sellele, kas need toimivad sujuvalt või kuvatakse pisut katkendlikkust.
• Performance: Mis tahes raamatukogu vastuvõtmine lisab projektile kaalu ja ma tahtsin, et mu mäng oleks võimalikult lahja.
• Mugavus: Tahtsin kena ja puhast süntaksit, mis muudab animatsioonide kirjutamise ja haldamise lihtsamaks. Ma vahetaksin isegi väikese lisamugavuse väikese jõudluskulu vastu, kui see võimaldab mul kirjutada paremat ja paremini hooldatavat koodi. See tõotab jällegi head disaineriks saanud arendaja jaoks.
• Brauseri tugi: Muidugi tahtsin, et mu mäng töötaks kõigis kaasaegsetes brauserites, kasutades mingit järkjärgulist täiustust, et takistada pärandbrauserite täielikku rikkumist. Lisaks tahtsin kindlasti tulevikukindlust.

Just selle võtsin endaga kaasa, kui läksin selle töö jaoks sobivat tööriista otsima.

Valik CSS-i või JavaScripti vahel animatsiooni raamatukogud

Esimene asi, mida ma animatsiooniteegi valimisel kaalusin, oli see, kas valida CSS-i või JavaScript-põhise teegiga. On palju suurepärased CSS-i raamatukogud, paljud neist suurepärase jõudlusega, mis oli minu jaoks esmatähtis. Otsisin teha raskeid animatsioone, näiteks animatsioone järjestada ja animatsiooni lõpetamisel tagasihelistamisi saada. See kõik on puhta CSS-iga täiesti võimalik – siiski on see palju vähem sujuv kui enamik JavaScripti teeke.

Vaatame, kuidas näeb lihtne järjestatud animatsioon CSS-is välja, ja võrdleme seda jQueryga, millel on palju sisseehitatud animatsiooniabilisi:

Animatsioonid näevad välja samad, kuid on loodud erinevalt. CSS-animatsiooni tegemiseks peame esmalt määrama oma CSS-is võtmekaadri animatsiooni ja lisama selle klassi:

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

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

Seejärel käivitame animatsiooni JavaScripti abil ja kuulame elemendi CSS-i tagasihelistamist:

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

Asjade toimumine erinevates kohtades võib sellise lihtsa näite puhul olla hea, kuid see võib muutuda väga segaseks, kui asjad muutuvad veidi keerulisemaks. 

Võrrelge seda sellega, kuidas jQueryga animatsiooni tehakse:

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

Siin toimub kõik samas kohas, lihtsustades asju, kui animatsioonid peaksid tulevikus keerulisemaks muutuma.

Tundus selge, et JavaScripti teek oli õige tee, kuid milline oli minu Solitaire'i mängu jaoks õige valik? Ma mõtlen, jQuery on suurepärane ja kasutatakse laialdaselt ka tänapäeval, aga see pole asi, mille pähe ma mütsi riputada tahaks. JavaScripti animatsiooniteeke on palju, seega tahtsin kaaluda midagi, mis on loodud spetsiaalselt selliste raskete animatsioonide jaoks, mida ma silmas pidasin.

JavaScripti animatsiooniteegi valimine

Mulle sai kiiresti selgeks, et JavaScripti animatsiooniteegid ja uusi põnevaid tehnoloogiaid. Neil kõigil on eelised ja puudused, seega vaatame läbi mõned neist, mida kaalusin ja miks.

. Veebianimatsioonide API on üks selline juhtum, mis võib tulevikus asendada paljusid JavaScripti animatsiooniteeke. Selle abil saate luua keerulisi astmelisi animatsioone ilma väliseid teeke laadimata ja sama jõudlusega kui CSS-animatsioonid. Ainus puudus on see kõik brauserid seda veel ei toeta. 

. <canvas> element pakub veel ühe põneva võimaluse. Selles saame animeerida asju JavaScriptiga, nagu teeksime DOM-iga, kuid animatsioon renderdatakse rasterna, mis tähendab, et saame teha mõningaid suure jõudlusega animatsioone. Ainsaks puuduseks on see, et lõuendielement renderdatakse DOM-is sisuliselt pildina, nii et kui otsime pikslite täiuslikkust, ei pruugi meil õnne olla. Disainiga väga hästi kursis oleva inimesena oli see minu jaoks läbimurdja.

Mul oli vaja midagi proovitud ja testitud, nii et teadsin, et pean tõenäoliselt kasutama ühte paljudest JavaScripti teekidest. Hakkasin raamatukogusid vaatama ja piirasin oma valikuid Anime.js ja GSAP. Tundus, et mõlemad saavad keerukate animatsioonidega hästi hakkama ja neil olid jõudluse kohta suurepärased märkmed. Anime on hästi hooldatud raamatukogu, millel on GitHubis üle 42.000 XNUMX tärni, samas kui GSAP on ülipopulaarne, lahingutes testitud raamatukogu koos eduka kogukonnaga.

Aktiivne kogukond oli minu jaoks ülioluline, kuna vajasin kohta, kust abi küsida, ja ma ei tahtnud kasutada raamatukogu, mis võib hiljem maha jätta. Pidasin seda osaks oma mugavusnõuetest.

Animatsioonide ja tagasihelistamiste järjestamine

Kui mu valikud olid kitsendatud, oli järgmiseks sammuks keeruka animatsiooni rakendamine, kasutades oma kahte teeki. Korduv animatsioon pasjanssimängus on selline, et kaart liigub kuhugi ja läheb seejärel ümber, nii et vaatame, kuidas see välja näeb:

Mõlemad animatsioonid näevad suurepärased välja! Need on sujuvad ja mõlema rakendamine oli üsna lihtne. Mõlemas raamatukogus oli a ajajoone funktsioon mis muutis järjestuste loomise imelihtsaks. Selline näeb juurutamine välja AnimeJS-is:

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 omad timeline() funktsioon on sisseehitatud tagasihelistamisega animatsiooni alguses ja lõpus ning järjestuse loomine on sama lihtne kui järjestikuste animatsioonide lisamine. Esiteks liigutan kaarti, siis pööran oma tagumist pilti 90 kraadi, nii et see kaob vaateväljast, ja siis pööran oma esipilti 90 kraadi, nii et see tuleb nähtavale.

Sama teostus GSAP-ide abil timeline() funktsioon näeb välja väga sarnane:

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

Otsustamise aeg

Peamine erinevus Anime ja GSAP-i vahel näib olevat süntaks, kus GSAP võib olla veidi keerukam. Olin ummikus kahe suurepärase raamatukoguga, millel oli väga sarnane funktsionaalsus, mis said hakkama keeruka animatsiooniga ja millel oli edukas kogukond. Tundus, et mul oli viigijooks!

Prioriteet	Anime	GSAP
Siledad animatsioonid	✅	✅
jõudlus	✅	✅
Mugavus	✅	✅
Brauseri tugi	✅	✅

Niisiis, mis pani mind valima ühe raamatukogu teise asemel?

Olin väga mures selle pärast, kuidas raamatukogu surve all käitub. Hilinenud animatsioonide olemasolu sellises mängus nagu Solitaire võib mängu mängimise lõbusust oluliselt mõjutada. Teadsin, et ma ei saa enne mängu loomist täielikult näha, kuidas raamatukogu toimib. Õnneks oli GSAP teinud a stressitest mis võrdles erinevaid animatsiooniteeke üksteisega, sealhulgas Anime.

Seda vaadates näis GSAP kindlasti olevat suurepärane raamatukogu paljude keeruliste animatsioonidega tegelemiseks. GSAP andis mulle rohkem kui 26 kaadrit sekundis raskel animatsioonil, mida Anime suutis ületada vaid 19-ga. Pärast GSAP-i kohta põhjalikumat lugemist ja nende foorumite uurimist sai selgeks, et jõudlus oli poiste jaoks kõrgeim prioriteet. GSAP-i taga.

Ja kuigi nii GSAP kui ka Anime on juba mõnda aega eksisteerinud, on Anime repo paar aastat veidi soikunud, samas kui GSAP oli viimase paari kuu jooksul kohustusi võtnud.

Kasutasin lõpuks GSAP-i ega ole oma otsust kahetsenud!

Kuidas on sinuga? Kas see vastab teie esiotsa tööriistade hindamisele ja võrdlemisele? Kas sellise projekti puhul oleksite võinud kaaluda muid prioriteete (nt juurdepääsetavus jne)? Või on teil mõni projekt, mille käigus pidite oma valikud paljude erinevate võimaluste hulgast välja langema? Palun jagage kommentaarides, sest ma tahan teada! 

Oh, ja kui soovite näha, kuidas see terve kaardipaki animeerimisel välja näeb, võite minna minu saidile ja mängi Solitaire'i mängu. Olgu sul lõbus!