Porównanie animacji CSS z JavaScriptem

Możesz animować go za pomocą CSS lub JavaScriptu. Którą usługę wybrać i dlaczego?

Sam Thorogood

Animacje w internecie można tworzyć na 2 główne sposoby: za pomocą CSS i JavaScriptu. To, który z nich wybierzesz, zależy od innych zależności projektu oraz efektów, jakie chcesz uzyskać.

Podsumowanie

  • Użyj animacji CSS, aby uzyskać prostsze przejścia „one-shot”, takie jak przełączanie stanów elementów interfejsu.
  • Użyj animacji JavaScript, jeśli chcesz mieć zaawansowane efekty, takie jak odbijanie, zatrzymywanie, wstrzymywanie, przewijanie do tyłu czy spowolnienie.
  • Jeśli zdecydujesz się na tworzenie animacji w języku JavaScript, użyj interfejsu Web Animations API lub nowoczesnej platformy, która Ci odpowiada.

Większość podstawowych animacji można tworzyć za pomocą CSS lub JavaScript, ale czas i nakład pracy są różne (zobacz też porównanie wydajności CSS i JavaScript). Każde rozwiązanie ma swoje wady i zalety, ale poniżej podajemy kilka wskazówek:

  • Używaj CSS, jeśli masz mniejsze, samodzielne stany elementów interfejsu. Przejścia i animacje CSS idealnie nadają się do wyświetlania menu nawigacyjnego z boku lub wyświetlania etykietki. Być może do kontrolowania stanów będziesz używać JavaScriptu, ale same animacje będą znajdować się w kodzie CSS.
  • Używaj JavaScriptu, gdy potrzebujesz znacznej kontroli nad animacjami. Interfejs Web Animations API to podejście oparte na standardach, które jest obecnie dostępne w większości nowoczesnych przeglądarek. W ten sposób powstają rzeczywiste obiekty, które idealnie sprawdzają się w złożonych aplikacjach zorientowanych na obiekty. JavaScript jest też przydatny, gdy chcesz zatrzymać, wstrzymać, spowolnić lub cofnąć animacje.
  • Używaj narzędzia requestAnimationFrame bezpośrednio, jeśli chcesz ręcznie administrować całą sceną. To zaawansowana metoda JavaScript, ale może być przydatna, jeśli tworzysz grę lub rysujesz na płótnie HTML.

Jeśli korzystasz już z platformy JavaScript, która zawiera funkcje animacji, na przykład z metodą .animate() jQuery lub TweenMax firmy GreenSock, możesz ogólniej poprzestać na tym w swoich animacjach.

Tworzenie animacji za pomocą CSS

Animacja za pomocą CSS to najprostszy sposób na przeniesienie czegoś na ekran. Jest to opisane jako deklaratywne, ponieważ to Ty decydujesz, co ma się stać.

Poniżej znajdziesz kod CSS, który przenosi element 100px zarówno do osi X, jak i do Y. Jest to możliwe za pomocą przejścia CSS, które ma ustawione przejście na 500ms. Po dodaniu klasy move wartość transform zostaje zmieniona i rozpoczyna się przenoszenie.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Wypróbuj

Oprócz czasu trwania przejścia dostępne są też opcje wygładzania, które określa odbiór animacji. Więcej informacji na temat wygładzania znajdziesz w przewodniku Podstawy wygładzania.

Jeśli tak jak w powyższym fragmencie kodu tworzysz osobne klasy CSS do zarządzania animacjami, możesz użyć JavaScriptu do włączania i wyłączania każdej animacji:

box.classList.add('move');

W ten sposób Twoje aplikacje będą lepiej zrównoważone. Możesz skupić się na zarządzaniu stanem za pomocą JavaScriptu i po prostu ustawić odpowiednie klasy elementów docelowych, pozostawiając przeglądarkę do obsługi animacji. Jeśli pójdziesz tą trasą, możesz nasłuchiwać zdarzeń transitionend w elemencie, ale tylko wtedy, gdy możesz zrezygnować z obsługi starszych wersji Internet Explorera – pierwsza wersja obsługiwała te zdarzenia w wersji 10. Wszystkie inne przeglądarki obsługują to wydarzenie już od jakiegoś czasu.

Kod JavaScript wymagany do nasłuchiwania zakończenia przejścia wygląda tak:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

Oprócz korzystania z przejść CSS możesz też używać animacji CSS, które dają znacznie większą kontrolę nad poszczególnymi klatkami kluczowymi, czasami trwania i iteracjami.

Możesz na przykład animować pole w taki sam sposób z przejściami, ale bez interakcji użytkownika, np. z kliknięciem, lub z nieskończonymi powtórzeniami. Możesz też wprowadzać zmiany w wielu usługach naraz.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Wypróbuj

Animacje CSS definiują animację niezależnie od elementu docelowego i używasz właściwości animation-name do wybierania odpowiedniej animacji.

Jeśli chcesz, aby Twoje animacje CSS działały w starszych przeglądarkach, musisz dodać prefiksy dostawców. W tworzeniu potrzebnych wersji CSS z prefiksami pomaga wiele narzędzi, które pozwalają zapisać wersję bez prefiksu w plikach źródłowych.

Animuj z użyciem języka JavaScript i interfejsu Web Animations API

Tworzenie animacji w języku JavaScript jest z kolei bardziej skomplikowane niż pisanie przejść i animacji CSS, ale zwykle zapewnia programistom znacznie więcej możliwości. Interfejs Web Animations API pozwala animować określone właściwości CSS lub tworzyć obiekty efektów kompozycyjnych.

Animacje w języku JavaScript są wymagane, bo zapisujesz je w tekście jako część kodu. Możesz też umieścić je w innych obiektach. Poniżej znajduje się kod JavaScript, który trzeba napisać, aby odtworzyć opisane wcześniej przejście CSS:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Domyślnie Animacje internetowe zmieniają tylko sposób wyświetlania elementu. Jeśli chcesz, aby obiekt pozostał w miejscu, do którego został przeniesiony, po zakończeniu animacji zmodyfikuj jego style bazowe, zgodnie z naszym przykładem.

Wypróbuj

Interfejs Web Animations API jest stosunkowo nowym standardem opracowanym przez W3C. Jest on natywnie obsługiwany w większości nowoczesnych przeglądarek. W przypadku nieobsługiwanych przeglądarek dostępny jest kod polyfill.

Animacje JavaScript dają pełną kontrolę nad stylami elementów na każdym etapie. To oznacza, że możesz spowolnić animacje, wstrzymać je, zatrzymać, cofnąć i edytować elementy według własnego uznania. Jest to szczególnie przydatne, jeśli tworzysz złożone aplikacje oparte na obiektach, bo możesz właściwie uchwycić swoje działanie.