Ta strona została przetłumaczona przez Cloud Translation API.

Studium przypadku dotyczące wydajności animacji przewijanych

Yuriko Hirota

Co nowego w animacjach uruchamianych przez przewijanie?

Animacje wywoływane przez przewijanie to sposób na dodanie interakcji i atrakcyjności wizualnej do witryny lub aplikacji internetowej. Są one wywoływane przez pozycję przewijania użytkownika. Może to być świetny sposób na utrzymanie zaangażowania użytkowników i ulepszenie atrakcyjności wizualnej witryny.

Wcześniej jedynym sposobem tworzenia animacji zależnych od przewijania było reagowanie na zdarzenie przewijania w głównym wątku. Spowodowało to 2 główne problemy:

Przewijanie jest wykonywane w ramach osobnego wątku, dlatego zdarzenia przewijania są przesyłane asynchronicznie.
Animacje wątku głównego mogą być niepłynne.

To uniemożliwia lub bardzo utrudnia tworzenie wydajnych animacji synchronizowanych z przewijaniem.

Wprowadzamy teraz nowy zestaw interfejsów API, które obsługują animacje sterowane przewijaniem. Możesz ich używać w CSS lub JavaScript. Interfejs API stara się używać jak najmniejszej liczby zasobów głównego wątku, co znacznie ułatwia implementację animacji sterowanych przez przewijanie i czyni je płynniejszymi. Interfejs API animacji sterowanych przewijaniem jest obecnie obsługiwany w tych przeglądarkach:

Obsługa przeglądarek

Źródło

W tym artykule porównujemy nowe podejście ze standardową techniką JavaScript, aby pokazać, jak łatwe i płynne mogą być animacje sterowane przewijaniem przy użyciu nowego interfejsu API.

Interfejs API animacji sterowanych przewijaniem w porówniu z klasycznym JavaScriptem

Ten przykładowy pasek postępu został utworzony za pomocą klas JavaScript.

Dokument reaguje za każdym razem, gdy nastąpi zdarzenie scroll, aby obliczyć, do ilu procent 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 + "%";
})

Ten demonstracyjny przykład pokazuje ten sam pasek postępu, który korzysta z nowego interfejsu API z użyciem 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, dzięki czemu wykonuje całą ciężką pracę.

Teraz ciekawostka: załóżmy, że w obu wersjach witryny zaimplementowano bardzo obciążające obliczenia, które pochłaniają 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 się było spodziewać, klasyczna wersja JavaScriptu staje się niestabilna i powolna z powodu połączenia zasobów głównego wątku. Z drugiej strony wersja w CSS nie jest w ogóle obciążona pracą JavaScriptu i może reagować na działania użytkownika związane z przewijaniem.

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

Porównanie wątku głównego.

Ten pokaz demonstracyjny przedstawia animację sterowaną przewijaniem stworzoną przez CyberAgent. Gdy przewijasz, zdjęcie pojawia się stopniowo.

Nowy interfejs JavaScript API do animacji sterowanych przewijaniem w porównaniu z klasycznym JavaScriptem

Korzyści z nowego interfejsu API nie ograniczają się tylko do usługi porównywania cen. Za pomocą JavaScript możesz też tworzyć płynne animacje uruchamiane przez przewijanie. Zapoznaj się z tym przykładem:

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 utworzyć tę samą animację paska postępu, która była widoczna w poprzednim pokazie CSS, używając tylko JavaScript. Technologia podstawowa jest taka sama jak w przypadku wersji usługi porównywania cen. Interfejs API stara się używać jak najmniej zasobów głównego wątku, dzięki czemu animacje są znacznie płynniejsze niż w przypadku klasycznego podejścia do JavaScriptu.

Ten nowy interfejs API współpracuje też z dotychczasowym interfejsem Web Animations API (WAAPI) i interfejsem CSS Animations API, aby umożliwić deklarowanie animacji sterowanych przewijaniem.

Więcej wersji demonstracyjnych i materiałów

Różne implementacje animacji sterowanej przewijaniem można sprawdzić w witrynie demonstracyjnej, w której można porównać wersje demonstracyjne korzystające z tych nowych interfejsów API w CSS i JavaScript.

Jeśli chcesz dowiedzieć się więcej o nowych animacjach zależnych od przewijania, przeczytaj ten artykuł i oglądaj wykład z konferencji I/O 2023.