Kako sem izbral knjižnico animacij za svojo igro Solitaire

Za knjižnice animacij je na voljo ogromno knjižnic CSS in JavaScript. Pravzaprav jih je toliko, da se zdi izbira pravega za vaš projekt nemogoča. To je situacija, s katero sem se soočil, ko sem se odločil zgraditi spletna igra Solitaire. Vedel sem, da bom potreboval knjižnico animacij, toda katero je bilo pravo izbrati?

V tem članku bom pregledal, kaj sem upošteval, na kaj moram biti pozoren in vam predstavil nekaj najbolj priljubljenih razpoložljivih knjižnic. Z vami bom šel skozi nekaj primerov iz resničnega sveta, da ponazorim svoje točke, in na koncu, upam, da boste bolje opremljeni od mene, ko sem prvič moral izbrati knjižnico animacij.

Vaša kilometrina s tem nasvetom se lahko seveda razlikuje. Vse, kar delim tukaj, je specifično za stvar, ki sem jo želel zgraditi. Vaš projekt ima lahko popolnoma drugačne zahteve in prioritete in to je v redu. Mislim, da je tukaj pomembno pridobiti poročilo iz prve roke razmišljanje kot front-end razvijalec z določenim ciljem.

Ko smo že pri tem, se imam za razvijalca sprednjega dela, vendar je moje ozadje izjemno težko v oblikovanju. Torej poznam kodo, vendar ne v tolikšni meri kot nekdo, ki je inženir JavaScript. Samo to sem želel razjasniti, ker izkušnje zagotovo lahko vplivajo na končno odločitev.

Tukaj je cilj

Preden se lotimo sprejemanja odločitev, si oglejmo vrste animacij, ki sem jih moral narediti v tej različici igre, prilagojeni CSS-Tricks:

Precej sladko, kajne? V teh animacijah ni nič povsem trivialnega. Veliko se dogaja — včasih hkrati — in veliko je treba orkestrirati. Poleg tega večino animacij sprožijo interakcije uporabnikov. Tako sem imel pri odločitvi nekaj prednostnih nalog:

• Gladke animacije: Način uporabe animacij ima lahko velik vpliv na to, ali tečejo gladko ali prikazujejo malo nemirno.
• Uspešnost: Sprejetje katere koli knjižnice bo dodalo težo projektu in želel sem, da je moja igra čim manjša.
• Udobje: Želel sem lepo, čisto sintakso, ki olajša pisanje in upravljanje animacij. Zamenjal bi celo malo dodatne ugodnosti za majhne stroške zmogljivosti, če mi omogoča pisanje boljše kode, ki jo je bolj vzdržljivo. Tudi to je dobra napoved za oblikovalca, ki je postal razvijalec.
• Podpora za brskalnik: Seveda sem želel, da bi moja igra delovala v katerem koli sodobnem brskalniku z uporabo neke oblike progresivnih izboljšav, da bi preprečila popolno zastarevanje starejših brskalnikov. Poleg tega sem si vsekakor želel nekaj primernega za prihodnost.

To sem vzel s seboj, ko sem šel iskat pravo orodje za to posebno delo.

Izbira med CSS ali JavaScript knjižnice animacij

Prva stvar, o kateri sem razmišljal pri izbiri knjižnice animacij, je bila, ali naj uporabim knjižnico, ki temelji na CSS ali JavaScript. Tam je veliko odlične knjižnice CSS, mnogi med njimi z odličnim delovanjem, kar je bilo zame velika prednostna naloga. Želel sem narediti nekaj zahtevnih animacij, kot je možnost zaporedja animacij in povratnih klicev po zaključku animacije. Vse to je povsem mogoče s čistim CSS - kljub temu je veliko manj gladko kot tisto, kar ponuja večina knjižnic JavaScript.

Poglejmo, kako izgleda preprosta zaporedna animacija v CSS, in jo primerjamo z jQueryjem, ki ima veliko vgrajenih pomočnikov za animacijo:

Animacije so videti enake, vendar so ustvarjene drugače. Za izdelavo animacije CSS moramo najprej definirati animacijo ključne sličice v našem CSS in jo pripeti razredu:

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

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

Nato izvedemo animacijo z uporabo JavaScripta in poslušamo povratni klic CSS za 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);

Če se stvari dogajajo na različnih mestih, je morda v redu v preprostem primeru, kot je ta, vendar lahko postane zelo zmedeno, ko stvari postanejo nekoliko bolj zapletene. 

Primerjajte to s tem, kako je animacija narejena z jQuery:

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

Tu se vse dogaja na istem mestu, kar poenostavi stvari, če bi animacije v prihodnosti postale bolj zapletene.

Zdelo se je jasno, da je knjižnica JavaScript prava pot, toda katero je bilo pravo izbrati za svojo igro Solitaire? Mislim, jQuery je odličen in še danes pogosto uporablja, vendar to ni nekaj, na kar bi rad obesil klobuk. Obstaja veliko knjižnic za animacije JavaScript, zato sem želel razmisliti o nečem, kar je izdelano posebej za obvladovanje vrste težkih animacij, ki sem jih imel v mislih.

Izbira knjižnice animacij JavaScript

Hitro mi je postalo jasno, da ne manjka knjižnic animacij JavaScript in nove, vznemirljive tehnologije. Vsi imajo prednosti in slabosti, zato poglejmo nekaj tistih, o katerih sem razmišljal, in zakaj.

O API za spletne animacije je en tak primer, ki bi lahko v prihodnosti nadomestil številne knjižnice animacije JavaScript. Z njim boste lahko ustvarili zapletene zamaknjene animacije brez nalaganja zunanjih knjižnic in z enako zmogljivostjo kot animacije CSS. Edina pomanjkljivost je, da vsi brskalniki še ne podpirajo. 

O <canvas> element predstavlja še eno vznemirljivo priložnost. V njem lahko animiramo stvari z JavaScriptom, kot bi to storili z DOM, vendar je animacija upodobljena kot rastr, kar pomeni, da lahko naredimo nekaj visoko zmogljivih animacij. Edina pomanjkljivost je, da je element platna v bistvu upodobljen kot slika v DOM, tako da če iščemo popolnost slikovnih pik, morda ne bomo imeli sreče. Kot nekoga, ki je zelo v skladu z oblikovanjem, je bilo to zame prelomno.

Potreboval sem nekaj preizkušenega, zato sem vedel, da bom verjetno moral uporabiti eno od številnih knjižnic JavaScript. Začel sem iskati knjižnice in zožil svojo izbiro na Anime.js in GSAP. Zdelo se je, da oba dobro obvladujeta kompleksne animacije in sta imela odlične ocene glede delovanja. Anime je dobro vzdrževana knjižnica z več kot 42.000 zvezdicami na GitHubu, medtem ko je GSAP zelo priljubljena, v bitkah preizkušena knjižnica s cvetočo skupnostjo.

Aktivna skupnost je bila zame ključnega pomena, saj sem potreboval prostor, kjer bi lahko prosil za pomoč, in nisem želel uporabljati knjižnice, ki bi jo lahko kasneje opustili. Menil sem, da je to del mojih zahtev glede udobja.

Zaporedje animacij in povratnih klicev

Ko sem zožil izbiro, je bil naslednji korak implementacija kompleksne animacije z uporabo mojih dveh knjižnic. Ponavljajoča se animacija v igri solitaire je animacija karte, ki se nekam premakne in nato obrne, zato poglejmo, kako to izgleda:

Obe animaciji izgledata super! So gladki in implementacija obeh je bila precej enostavna. Obe knjižnici sta imeli a funkcijo časovnice zaradi česar je bilo ustvarjanje zaporedij preprosto. Takole izgleda implementacija v 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
})

Animeji timeline() funkcija ima vgrajene povratne klice na začetku in koncu animacije, ustvarjanje zaporedja pa je preprosto kot dodajanje zaporednih animacij. Najprej premaknem kartico, nato svojo zadnjo sliko obrnem za 90 stopinj, da uide iz vidnega polja, nato pa svojo sprednjo sliko obrnem za 90 stopinj, da pride v vidno polje.

Ista izvedba z uporabo GSAP timeline() funkcija izgleda zelo podobno:

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

Čas odločitve

Zdi se, da je glavna razlika med Anime in GSAP sintaksa, kjer je GSAP morda nekoliko bolj dodelan. Zataknil sem se z dvema odličnima knjižnicama, ki sta imeli zelo podobno funkcionalnost, sta se lahko ukvarjali s kompleksno animacijo in imeli uspešno skupnost. Zdelo se je, kot da imam izenačeno dirko!

Prednost	anime	GSAP
Smooth animations	✅	✅
Uspešnost	✅	✅
Udobje	✅	✅
Podpora brskalniku	✅	✅

Torej, zakaj sem izbral eno knjižnico namesto druge?

Zelo me je skrbelo, kako bo knjižnica ravnala pod pritiskom. Zaostajajoče animacije v igri, kot je Solitaire, lahko močno vplivajo na to, kako zabavno je igrati igro. Vedel sem, da ne bom mogel v celoti videti, kako deluje knjižnica, preden sem ustvaril igro. Na srečo je GSAP naredil a stres test ki je med seboj primerjal različne knjižnice animacij, vključno z Anime.

Če pogledamo to, se je GSAP vsekakor zdel vrhunska knjižnica za obravnavo množice kompleksnih animacij. GSAP mi je dajal več kot 26 sličic na sekundo pri težki animaciji, ki jo je Anime dosegel šele pri 19. Ko sem več prebral o GSAP in pogledal njihove forume, je postalo jasno, da je bila zmogljivost za fante najvišja prioriteta. za GSAP.

In čeprav tako GSAP kot Anime obstajata že nekaj časa, je repo Anime nekoliko let miroval, medtem ko se je GSAP v zadnjih nekaj mesecih zavezal.

Končal sem z uporabo GSAP in svoje odločitve nisem obžaloval!

Kaj pa ti? Ali se kaj od tega ujema s tem, kako ocenjujete in primerjate sprednja orodja? Ali obstajajo druge prednostne naloge, ki ste jih morda upoštevali (npr. dostopnost itd.) pri projektu, kot je ta? Ali pa imate projekt, pri katerem ste morali zmanjšati svoje izbire med množico različnih možnosti? Delite v komentarjih, ker bi rad vedel! 

Oh, in če želite videti, kako je videti, ko animirate cel komplet kart, se lahko odpravite na moje spletno mesto in igrajte igro Solitaire. Zabavaj se!