Studium przypadku dotyczące wydajności animacji przewijanych

Co nowego w animacjach przewijanych?

Animacje wyświetlane po przewinięciu to sposób na zwiększenie interaktywności i atrakcyjności wizualnej witryny lub aplikacji internetowej, uruchamianymi przez pozycję przewijania strony. W ten sposób możesz utrzymać zaangażowanie użytkowników i poprawić wizualną atrakcyjność witryny.

W przeszłości jedynym sposobem tworzenia animacji przewijanych w ramach przewijania było reagowanie na zdarzenie przewijania w wątku głównym. Spowodowało to 2 główne problemy:

• Przewijanie odbywa się w osobnym wątku, dlatego zdarzenia przewijania są wyświetlane asynchronicznie.
• Animacje w wątku głównym mogą zacinać się.

To sprawia, że tworzenie wydajnych animacji opartych na przewijaniu, które są zsynchronizowane z przewijaniem, jest niemożliwe lub bardzo trudne.

Wprowadzamy teraz nowy zestaw interfejsów API do obsługi animacji przewijanych, których można używać z kodu CSS lub JavaScript. Interfejs API stara się wykorzystywać jak najmniejszą liczbę zasobów wątków głównych, co sprawia, że animacje wyświetlane podczas przewijania są o wiele łatwiejsze do wdrożenia i są bardziej płynne. Interfejs API animacji opartych na przewijaniu jest obecnie obsługiwany w tych przeglądarkach:

W tym artykule porównujemy nowe podejście z klasyczną techniką JavaScript, aby pokazać, jak łatwe i płynne mogą być animacje przewijane w nowym interfejsie API.

Interfejs CSS API animacji opartych na przewijaniu i klasyczny JavaScript

Poniższy przykładowy pasek postępu został utworzony przy użyciu technik klasowych JavaScriptu.

Dokument odpowiada za każdym razem, gdy wystąpi zdarzenie scroll, aby obliczyć, jaki procent elementu scrollHeight przewinął użytkownik.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

Poniższa wersja demonstracyjna pokazuje ten sam pasek postępu z wykorzystaniem nowego interfejsu API i CSS.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

Nowa funkcja CSS animation-timeline automatycznie konwertuje pozycję w zakresie przewijania na procent postępu, aby wykonać najcięższą pracę.

A teraz ciekawa część – załóżmy, że w obu wersjach witryny masz zaimplementowane bardzo ciężkie obliczenia, które zużywałyby większość zasobów głównego wątku.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Jak można było się spodziewać, klasyczna wersja JavaScript staje się niestabilna i powolna z powodu połączenia zasobów wątków głównych. Z drugiej strony intensywna praca JavaScriptu nie ma wpływu na wersję CSS i może reagować na przewijanie przez użytkownika.

Wykorzystanie procesora jest zupełnie inne w Narzędziach deweloperskich, co widać na poniższych zrzutach ekranu.

Poniższy przykład przedstawia zastosowanie animacji przewijanej przez przewijanie utworzone przez CyberAgent. Zobaczysz, że zdjęcie zanika w miarę przewijania.

Nowy interfejs JavaScript API oparty na przewijaniu i klasyczny JavaScript

Zalety nowego interfejsu API nie ograniczają się tylko do CSS. Za pomocą JavaScriptu możesz także tworzyć płynne animacje przewijane. Przyjrzyjmy się temu przykładowi:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Dzięki temu możesz za pomocą JavaScriptu utworzyć taką samą animację paska postępu jak w poprzedniej demonstracji CSS. Zastosowana technologia jest taka sama jak w przypadku wersji CSS. Interfejs API stara się wykorzystywać jak najmniejszą liczbę zasobów wątków głównych, aby animacje były płynniejsze w porównaniu do klasycznego JavaScriptu.

Ten nowy interfejs API działa też w połączeniu z istniejącymi interfejsami Web Animations API (WAAPI) i CSS Animations API, aby umożliwiać deklaratywną animację przewijaną.

Więcej prezentacji i materiałów

Różne implementacje animacji opartych na przewijaniu możesz zobaczyć w tej witrynie demonstracyjnej, gdzie możesz porównać wersje demonstracyjne tych nowych interfejsów API obejmujących CSS i JavaScript.

Jeśli chcesz dowiedzieć się więcej o nowych animacji opartych na przewijaniu, zapoznaj się z tym artykułem oraz z konferencją I/O 2023.