Porównanie animacji CSS z JavaScriptem

Możesz animować tekst za pomocą CSS lub JavaScriptu. Których z nich użyjesz i dlaczego?

Paul Lewis

Sam Thorogood

Są 2 główne sposoby tworzenia animacji w internecie: za pomocą CSS i JavaScriptu. To, który z nich wybierzesz, zależy od innych zależności projektu i efektów, jakie chcesz osiągnąć.

Podsumowanie

• Używaj animacji CSS, aby tworzyć prostsze ujęcia przejścia, takie jak przełączanie stanów elementów interfejsu.
• Jeśli chcesz uzyskać zaawansowane efekty, takie jak odbijanie, zatrzymywanie, wstrzymywanie, przewijanie do tyłu lub spowolnienie, skorzystaj z animacji JavaScript.
• Jeśli zdecydujesz się na animację za pomocą JavaScriptu, użyj interfejsu Web Animations API lub nowoczesnej platformy, która Ci odpowiada.

Większość podstawowych animacji można tworzyć za pomocą CSS lub JavaScriptu, ale ilość pracy i czas ich pracy może się różnić (zobacz też Skuteczność kodu CSS i JavaScript). Każdy z nich ma swoje wady i zalety, ale mamy tu kilka dobrych wskazówek:

• Użyj CSS, jeśli masz mniejsze, niezależne 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 ostatecznie użyjesz JavaScriptu do sterowania stanami, ale same animacje znajdują się w CSS.
• Używaj JavaScriptu, jeśli potrzebujesz znaczącej 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 uzyskujesz rzeczywiste obiekty, które świetnie sprawdzają się w złożonych aplikacjach zorientowanych obiektowo. JavaScript jest też przydatny przy zatrzymywaniu, wstrzymywaniu, spowalnianiu lub odwracaniu animacji.
• Użyj narzędzia requestAnimationFrame bezpośrednio, jeśli chcesz ręcznie administrować całą sceną. Jest to zaawansowana metoda JavaScript, ale może się przydać, jeśli tworzysz grę lub rysujesz w obszarze roboczym HTML.

Jeśli używasz już platformy JavaScript, która zawiera funkcje animacji, np. metody jQuery’s .animate() lub TweenMax od GreenSock, prawdopodobnie lepszym rozwiązaniem będzie trzymanie się tej metody w animacjach.

Animuj za pomocą CSS

Animowanie przy użyciu CSS to najprostszy sposób na to, aby coś poruszyło się na ekranie. To podejście jest deklaratywne, ponieważ określa to, 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. Po dodaniu klasy move wartość transform zmienia się i rozpoczyna się przejście.

.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śla wygląd animacji. Więcej informacji na temat wygładzania znajdziesz w przewodniku po podstawach wygładzania.

Jeśli (jak w powyższym przykładzie) utworzysz osobne klasy CSS do zarządzania animacjami, możesz za pomocą JavaScriptu włączać i wyłączać poszczególne animacje:

box.classList.add('move');

Dzięki temu aplikacje zachowują równowagę. Możesz skupić się na zarządzaniu stanem za pomocą JavaScriptu i po prostu ustawić odpowiednie klasy dla elementów docelowych, pozostawiając przeglądarkę do obsługi 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 je obsługiwała. Wszystkie inne przeglądarki przez jakiś czas obsługiwały wydarzenie.

Kod JavaScript wymagany do nasłuchiwania przejścia pod koniec 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 animacji.

Uwaga: jeśli nie masz doświadczenia z animacjami, klatki kluczowe to stary termin z animacji rysowanych odręcznie. Animatorzy tworzyli dla danego działania określone klatki, tzw. kluczowe klatki, które pozwalały na uchwycenie najbardziej ekstremalnych części ruchu. Następnie rysowali poszczególne klatki między klatkami kluczowymi. Dzisiaj mamy podobny proces w przypadku animacji CSS: instruujemy przeglądarkę, jakie wartości powinny mieć właściwości CSS w określonych punktach, i wypełnia luki.

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ż zmieniać wiele właściwości 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 definiuje ona samą animację niezależnie od elementu docelowego i używa właściwości animation-name do wyboru odpowiedniej animacji.

Jeśli chcesz, by Twoje 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 w języku JavaScript jest dla porównania – bardziej skomplikowane niż pisanie przejść czy animacji CSS, ale zwykle daje programistom znacznie większe możliwości. Za pomocą interfejsu Web Animations API możesz animować określone właściwości CSS lub tworzyć obiekty z efektami kompozycyjnymi.

Animacje JavaScript są imperatywne, ponieważ piszesz je w kodzie. Możesz je również umieszczać w innych obiektach. Poniżej znajduje się kod JavaScript, który trzeba napisać, by 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 wygląd elementu. Jeśli chcesz, aby obiekt pozostał w lokalizacji, do której został przeniesiony, zmień jego style podstawowe po zakończeniu animacji, zgodnie z naszym przykładem.

Wypróbuj

Interfejs Web Animations API jest stosunkowo nowym standardem W3C. Większość nowoczesnych przeglądarek obsługuje go natywnie. W przypadku, które nie obsługują nowoczesnych przeglądarek, dostępny jest kod polyfill.

Animacje JavaScript zapewniają pełną kontrolę nad stylami elementu na każdym etapie. Oznacza to, że możesz spowalniać animacje, wstrzymywać je, zatrzymywać, odwracać i manipulować elementami według własnego uznania. Jest to szczególnie przydatne, gdy tworzysz złożone aplikacje zorientowane na obiekty, ponieważ możesz prawidłowo przedstawić swoje działanie.