Porównanie animacji CSS z JavaScriptem

Animacje możesz tworzyć za pomocą CSS lub JavaScriptu. Którego z nich używać i dlaczego?

Sam Thorogood

Istnieją 2 podstawowe sposoby tworzenia animacji w internecie: za pomocą CSS i JavaScriptu. Wybór zależy od innych zależności projektu i efektów, które chcesz uzyskać.

Podsumowanie

  • Używaj animacji CSS do tworzenia prostszych przejść „jednego strzału”, takich jak przełączanie stanów elementów interfejsu.
  • Używaj animacji JavaScript, gdy chcesz uzyskać zaawansowane efekty, takie jak odbijanie, zatrzymywanie, wstrzymywanie, przewijanie wstecz lub spowolnienie.
  • Jeśli zdecydujesz się na animację w JavaScript, użyj interfejsu Web Animations API lub nowoczesnego frameworku, z którym Ci wygodnie.

Większość podstawowych animacji można utworzyć za pomocą CSS lub JavaScriptu, ale nakład pracy i czasu różni się w zależności od wybranego języka (patrz też Skuteczność kodu CSS w porównaniu z JavaScriptem). Każde z nich ma swoje wady i zalety, ale warto pamiętać o tych wskazówkach:

  • Używaj CSS, gdy masz mniejsze, samodzielne stany elementów interfejsu. Przejścia i animacje CSS idealnie nadają się do umieszczenia menu nawigacyjnego z boku lub do wyświetlania etykietki. Być może zechcesz użyć JavaScriptu do sterowania stanami, ale same animacje znajdują się w CSS.
  • Używaj JavaScriptu, gdy potrzebujesz dużej 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. Dzięki temu uzyskujemy prawdziwe obiekty, które są idealne do stosowania w skomplikowanych aplikacjach obiektowych. Kod JavaScript jest też przydatny, gdy chcesz zatrzymać, wstrzymać, spowolnić lub odwrócić animację.
  • Użyj bezpośrednio funkcji requestAnimationFrame, jeśli chcesz ręcznie skonfigurować całą scenę. Jest to zaawansowane podejście do JavaScriptu, ale może być przydatne, jeśli tworzysz grę lub rysujesz na płótnie HTML.

Jeśli jednak korzystasz już z ramy JavaScript, która zawiera funkcje animacji, np. z metody .animate() w jQuery lub z biblioteki TweenMax firmy GreenSock, może Ci być wygodniej używać tych funkcji do animacji.

Tworzenie animacji za pomocą CSS

Animacja za pomocą CSS to najprostszy sposób na stworzenie animacji na ekranie. Takie podejście nazywamy deklaratywnym, ponieważ określasz w nim, co ma się wydarzyć.

Poniżej znajdziesz kod CSS, który przenosi element 100px zarówno na osi X, jak i Y. Jest to możliwe dzięki przejściu CSS ustawionym na 500ms. Gdy dodasz klasę move, wartość transform ulegnie zmianie i rozpocznie się proces przejścia.

.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ą opcje wygładzania, które określają charakter animacji. Więcej informacji o wygładzaniu znajdziesz w przewodniku Podstawy wygładzania.

Jeśli, podobnie jak w powyższym fragmencie kodu, utworzysz osobne klasy CSS do zarządzania animacjami, możesz włączać i wyłączać każdą animację za pomocą kodu JavaScript:

box.classList.add('move');

Dzięki temu aplikacje będą działać w stosunkowo równym stopniu. Możesz skupić się na zarządzaniu stanem za pomocą JavaScriptu i po prostu ustawić odpowiednie klasy na elementach docelowych, pozostawiając przeglądarce obsługę animacji. Jeśli je wykorzystasz, możesz nasłuchiwać zdarzeń transitionend elementu, ale tylko wtedy, gdy możesz zrezygnować z obsługi starszych wersji Internet Explorera (wersja 10 była pierwszą wersją, która obsługiwała te zdarzenia). Wszystkie inne przeglądarki przez jakiś czas obsługiwały wydarzenie.

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

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

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

Oprócz przejść CSS możesz też używać animacji CSS, które dają Ci znacznie większą kontrolę nad poszczególnymi keyframe’ami, czasem trwania i iteracjami animacji.

Możesz na przykład animować pole w taki sam sposób jak z przejściami, ale tak samo będzie z nieskończoną liczbą powtórzeń i bez interakcji użytkownika, takich jak kliknięcie. Możesz też zmienić kilka usług jednocześnie.

.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

W przypadku animacji CSS animację definiujesz niezależnie od elementu docelowego, a właściwości animation-name używasz do wyboru wymaganej animacji.

Jeśli chcesz, aby animacje CSS działały w starszych przeglądarkach, musisz dodać prefiksy dostawców. Wiele narzędzi pomaga w tworzeniu potrzebnych wersji arkusza CSS z prefiksami, co pozwala na zapisywanie w plikach źródłowych wersji bez prefiksu.

Animacja za pomocą JavaScriptu i interfejsu Web Animations API

Tworzenie animacji za pomocą JavaScript jest w porównaniu bardziej skomplikowane niż tworzenie przejść lub animacji za pomocą kodu CSS, ale zwykle daje deweloperom znacznie więcej możliwości. Możesz użyć interfejsu Web Animations API, aby animować określone właściwości CSS lub tworzyć obiekty efektów złożonych.

Animacje JavaScript są imperatywne, ponieważ piszesz je w kodziku. Możesz też umieszczać je w innych obiektach. Poniżej znajduje się kod JavaScript, który należy napisać, aby odtworzyć omówione 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 modyfikują tylko prezentację elementu. Jeśli chcesz, aby obiekt pozostał w miejscu, do którego się przemieścił, po zakończeniu animacji zmień jego style, tak jak w naszym przykładzie.

Wypróbuj

Interfejs Web Animations API to stosunkowo nowy standard W3C. Jest on obsługiwany natywnie w większości nowoczesnych przeglądarek. W przypadku przeglądarek nowoczesnych, które nie obsługują polyfill, dostępny jest kod polyfill.

Animacje JavaScript zapewniają pełną kontrolę nad stylami elementu na każdym etapie. Oznacza to, że możesz zwolnić animacje, wstrzymać je, zatrzymać, odwrócić i manipulować elementami według uznania. Jest to szczególnie przydatne, jeśli tworzysz złożone aplikacje zorientowane obiektowo, ponieważ możesz prawidłowo opakować zachowanie.