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”, np. przełączania stanów elementów interfejsu.
  • Używaj animacji JavaScript, gdy chcesz uzyskać zaawansowane efekty, takie jak odbijanie, zatrzymywanie, wstrzymywanie, przewijanie wstecz lub zwolnienie.
  • 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 są idealne do wyświetlania menu nawigacyjnego z boku lub wyświetlania opisu. Możesz użyć JavaScriptu do kontrolowania stanów, ale same animacje będą w CSS.
  • Używaj JavaScriptu, gdy potrzebujesz dużej kontroli nad animacjami. Interfejs Web Animations API to podejście oparte na standardach, dostępne obecnie 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 skoordynować 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 tworzenia animacji.

Tworzenie animacji za pomocą CSS

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

Poniżej znajduje się kod CSS, który przesuwa element 100px wzdłuż osi X i Y. Aby to zrobić, użyj przejścia CSS 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. W tym przypadku możesz odbierać zdarzenia transitionend dotyczące elementu, ale tylko wtedy, gdy możesz zrezygnować z obsługi starszych wersji Internet Explorera. Wersja 10 była pierwszą, która obsługiwała te zdarzenia. Wszystkie inne przeglądarki obsługują to zdarzenie od jakiegoś czasu.

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 za pomocą przejść, ale bez interakcji użytkownika, takich jak klikanie, i z nieskończoną liczbą powtórzeń. 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 może Ci pomóc w tworzeniu potrzebnych wersji kodu CSS z preiksem, co pozwala zapisywać wersję bez prefiksu w plikach źródłowych.

Tworzenie animacji za pomocą JavaScript i interfejsu Web Animations API

Tworzenie animacji za pomocą JavaScript jest bardziej skomplikowane niż pisanie przejść lub animacji 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.

Dzięki animacjom JavaScript masz 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.