Jak wybrałem bibliotekę animacji do mojej gry w pasjansa?

Istnieje mnóstwo bibliotek CSS i JavaScript dla bibliotek animacji. Tak wielu, że wybór odpowiedniego do swojego projektu może wydawać się niemożliwy. Z taką sytuacją miałem do czynienia, kiedy zdecydowałem się zbudować gra online w pasjans. Wiedziałem, że potrzebuję biblioteki animacji, ale którą wybrać?

W tym artykule omówię, jakie rozważania podjąłem, na co zwrócić uwagę i przedstawię niektóre z najpopularniejszych dostępnych bibliotek. Przejdę z tobą przez kilka rzeczywistych przykładów, aby zilustrować moje punkty, i na koniec, miejmy nadzieję, będziesz lepiej wyposażony niż ja, kiedy po raz pierwszy musiałem wybrać bibliotekę animacji.

Twój przebieg z tą radą może się oczywiście różnić. Wszystko, czym się tutaj dzielę, dotyczy rzeczy, którą chciałem zbudować. Twój projekt może mieć zupełnie inne wymagania i priorytety i to jest OK. Myślę, że to, co jest tutaj ważne, to uzyskanie relacji z pierwszej ręki o myślenie jak front-end developer z określonym celem.

Mówiąc o tym, uważam się za programistę front-end, ale moje doświadczenie w projektowaniu jest bardzo ciężkie. Więc znam kod, ale nie w stopniu inżyniera JavaScript. Chciałem to wyjaśnić, ponieważ doświadczenie może z pewnością wpłynąć na ostateczną decyzję.

Oto cel

Zanim przejdziemy do podejmowania decyzji, przyjrzyjmy się rodzajom animacji, które musiałem wykonać w tej wersji gry ze sztuczkami CSS:

Całkiem słodko, prawda? W tych animacjach nie ma nic banalnego. Dużo się dzieje – czasami jednocześnie – i wiele do zaaranżowania. Ponadto większość animacji jest wyzwalana przez interakcje użytkownika. Tak więc pozostawiło mi to kilka priorytetów związanych z moją decyzją:

• Płynne animacje: Sposób, w jaki animacje są stosowane, może mieć duży wpływ na to, czy przebiegają płynnie, czy też są nieco niestabilne.
• Wydajność: Zaadoptowanie dowolnej biblioteki zwiększy wagę projektu i chciałem, aby moja gra była jak najbardziej szczupła.
• Wygoda: Chciałem mieć ładną, przejrzystą składnię, która ułatwi pisanie i zarządzanie animacjami. Zamieniłbym nawet trochę dodatkowej wygody na niewielki koszt wydajności, jeśli pozwoli mi to napisać lepszy, łatwiejszy w utrzymaniu kod. Ponownie, to dobrze wróży projektantowi, który został deweloperem.
• Obsługa przeglądarki: Oczywiście chciałem, aby moja gra działała na dowolnej nowoczesnej przeglądarce, korzystając z jakiejś formy progresywnego ulepszania, aby zapobiec całkowitemu zepsuciu starszych przeglądarek. Poza tym zdecydowanie chciałem zabezpieczyć się na przyszłość.

To właśnie zabrałem ze sobą, szukając odpowiedniego narzędzia do tej konkretnej pracy.

Wybór między CSS lub JavaScript biblioteki animacji

Pierwszą rzeczą, którą brałem pod uwagę przy wyborze biblioteki animacji, było to, czy wybrać bibliotekę opartą na CSS czy JavaScript. Tam jest wiele świetne biblioteki CSS, wiele z nich z doskonałymi wynikami, co było dla mnie priorytetem. Chciałem zrobić kilka ciężkich animacji, takich jak możliwość sekwencjonowania animacji i otrzymywania wywołań zwrotnych po zakończeniu animacji. To wszystko jest całkowicie możliwe z czystym CSS — mimo to jest o wiele mniej płynne niż to, co oferuje większość bibliotek JavaScript.

Zobaczmy, jak prosta sekwencyjna animacja wygląda w CSS i porównajmy ją z jQuery, które ma wiele wbudowanych pomocników animacji:

Animacje wyglądają tak samo, ale są tworzone inaczej. Aby stworzyć animację CSS, najpierw musimy zdefiniować animację klatki kluczowej w naszym CSS i dołączyć ją do klasy:

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

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

Następnie wykonujemy animację za pomocą JavaScript i nasłuchujemy wywołania zwrotnego CSS na elemencie:

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

W takim prostym przykładzie, że rzeczy dzieją się w różnych miejscach, może być w porządku, ale może stać się bardzo mylące, gdy sprawy staną się nieco bardziej złożone. 

Porównaj to z tym, jak animacja jest wykonywana za pomocą jQuery:

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

Tutaj wszystko dzieje się w tym samym miejscu, upraszczając, jeśli w przyszłości animacje staną się bardziej złożone.

Wydawało się jasne, że biblioteka JavaScript była właściwą drogą, ale którą wybrać w mojej grze Solitaire? Mam na myśli, jQuery jest świetny i nadal szeroko stosowany nawet dzisiaj, ale to nie jest coś, na czym chcę powiesić kapelusz. Istnieje wiele bibliotek animacji JavaScript, więc chciałem rozważyć coś stworzonego specjalnie do obsługi ciężkich animacji, o których myślałem.

Wybór biblioteki animacji JavaScript

Szybko stało się dla mnie jasne, że nie brakuje bibliotek animacji JavaScript i nowe, ekscytujące technologie. Wszystkie mają zalety i wady, więc przyjrzyjmy się niektórym z tych, które rozważałem i dlaczego.

Połączenia Interfejs API animacji internetowych jest jednym z takich przypadków, który może w przyszłości zastąpić wiele bibliotek animacji JavaScript. Dzięki niemu będziesz w stanie tworzyć złożone animacje naprzemiennie bez ładowania zewnętrznych bibliotek i z taką samą wydajnością jak animacje CSS. Jedyną wadą jest to, że nie wszystkie przeglądarki to jeszcze obsługują. 

Połączenia <canvas> element przedstawia kolejną ekscytującą okazję. W nim możemy animować rzeczy za pomocą JavaScript, tak jak w przypadku DOM, ale animacja jest renderowana jako raster, co oznacza, że ​​możemy tworzyć animacje o wysokiej wydajności. Jedyną wadą jest to, że element canvas jest zasadniczo renderowany jako obraz w DOM, więc jeśli szukamy perfekcji w pikselach, możemy mieć pecha. Jako ktoś, kto doskonale dopasowuje się do projektu, był to dla mnie przełom.

Potrzebowałem czegoś wypróbowanego i przetestowanego, więc wiedziałem, że prawdopodobnie muszę skorzystać z jednej z wielu bibliotek JavaScript. Zacząłem szukać bibliotek i zawęziłem wybór do Anime.js i GSAP. Obaj wydawali się dobrze radzić sobie ze złożonymi animacjami i mieli doskonałe oceny wydajności. Anime to dobrze utrzymana biblioteka z ponad 42.000 XNUMX gwiazd na GitHub, podczas gdy GSAP to bardzo popularna, sprawdzona w boju biblioteka z kwitnącą społecznością.

Aktywna społeczność miała dla mnie kluczowe znaczenie, ponieważ potrzebowałem miejsca, w którym można by poprosić o pomoc, a nie chciałem korzystać z biblioteki, która później mogła zostać porzucona. Uznałem to za część moich wymagań dotyczących wygody.

Sekwencjonowanie animacji i wywołań zwrotnych

Gdy miałem już zawężony wybór, następnym krokiem było zaimplementowanie złożonej animacji przy użyciu moich dwóch bibliotek. Powtarzająca się animacja w grze w pasjansa to ta, w której karta porusza się gdzieś, a następnie się obraca, więc zobaczmy, jak to wygląda:

Obie animacje wyglądają świetnie! Są płynne, a wdrożenie obu z nich było dość proste. Obie biblioteki miały funkcja osi czasu dzięki czemu tworzenie sekwencji było dziecinnie proste. Tak wygląda implementacja w 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
})

Anime timeline() funkcjonować jest wbudowana z wywołaniami zwrotnymi na początku i na końcu animacji, a tworzenie sekwencji jest tak proste, jak dołączanie sekwencyjnych animacji. Najpierw przesuwam kartę, potem obracam obraz z tyłu o 90 stopni, aby zniknął, a następnie obracam obraz z przodu o 90 stopni, aby był widoczny.

Ta sama implementacja przy użyciu GSAP timeline() funkcjonować wygląda bardzo podobnie:

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

Czas decyzji

Główną różnicą między anime a GSAP wydaje się być składnia, w której GSAP może być nieco bardziej rozbudowany. Utknąłem z dwiema świetnymi bibliotekami, które miały bardzo podobną funkcjonalność, były w stanie poradzić sobie ze złożoną animacją i miały dobrze prosperującą społeczność. Wyglądało na to, że miałem remis!

Priorytet	Anime	GSAP
Gładkie animacje	✅	✅
Wydajność	✅	✅
Wygoda	✅	✅
Obsługiwane przeglądarki	✅	✅

Więc co sprawiło, że wybrałem jedną bibliotekę, a nie drugą?

Byłem bardzo zaniepokojony tym, jak biblioteka zachowa się pod presją. Posiadanie opóźnionych animacji w grze takiej jak Solitaire może mieć duży wpływ na to, jak fajnie jest grać w tę grę. Wiedziałem, że nie będę w stanie w pełni zobaczyć, jak działa biblioteka, zanim stworzyłem grę. Na szczęście GSAP dokonał stress test które porównywały ze sobą różne biblioteki animacji, w tym Anime.

Patrząc na to, GSAP z pewnością wyglądał na lepszą bibliotekę do radzenia sobie z mnóstwem złożonych animacji. GSAP dawało mi ponad 26 klatek na sekundę w ciężkiej animacji, którą anime było w stanie osiągnąć dopiero w 19. Po przeczytaniu więcej na temat GSAP i zajrzeniu na ich forach stało się jasne, że wydajność była najwyższym priorytetem dla chłopaków za GSAP.

I chociaż zarówno GSAP, jak i Anime istnieją już od jakiegoś czasu, repozytorium anime było nieco uśpione przez kilka lat, podczas gdy GSAP dokonywał zmian w ciągu ostatnich kilku miesięcy.

Skończyło się na korzystaniu z GSAP i nie żałowałem swojej decyzji!

Jak o tobie? Czy cokolwiek z tego zgadza się z tym, jak oceniasz i porównujesz oprzyrządowanie front-endowe? Czy istnieją inne priorytety, które mogłeś wziąć pod uwagę (np. dostępność itp.) w takim projekcie jak ten? A może masz projekt, w którym musiałeś ograniczyć swoje wybory z kilku różnych opcji? Proszę podziel się komentarzami, bo chciałabym wiedzieć! 

Aha, a jeśli chcesz zobaczyć, jak wygląda animacja całej talii kart, możesz udać się na moją stronę i zagraj w pasjansa, baw się dobrze!