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 zwiększenie atrakcyjności wizualnej witryny.

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

• Przewijanie jest wykonywane w osobnym wątku i dlatego dostarcza zdarzenia przewijania asynchronicznie.
• Animacje wątku głównego mogą być niepłynne.

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

Teraz wprowadzamy nowy zestaw interfejsów API do obsługi animacji przewijanych, z których można korzystać za pomocą CSS lub JavaScriptu. Interfejs API stara się wykorzystywać jak najmniejszą liczbę zasobów głównych wątków, dzięki czemu implementowanie animacji przewijanych jest znacznie łatwiejsze i płynniejsze. Interfejs API animacji przewijanych jest obecnie obsługiwany w tych przeglądarkach:

W tym artykule porównujemy nowe podejście ze standardową techniką JavaScriptu, aby pokazać, jak proste 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

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 użytkownik przewinął.

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 prezentacja przedstawia ten sam pasek postępu w przypadku nowego interfejsu API z 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ę.

A teraz interesujący moment: załóżmy, że zastosowano bardzo zaawansowane obliczenia w obu wersjach witryny, które wykorzystywał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);
}

Zgodnie z oczekiwaniami klasyczną wersję JavaScriptu staje się niestabilna i wolna z powodu połączenia głównego zasobów wątku. Z drugiej strony na wersję CSS nie ma wpływu zbyt intensywna praca związana z JavaScriptem i może reagować na wykonywane przez użytkownika interakcje związane z przewijaniem.

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

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

Nowy interfejs JavaScript API z animacjami przewijanymi a klasyczny JavaScript

Korzystanie z nowego interfejsu API nie jest ograniczone tylko do usługi porównywania cen. Za pomocą języka JavaScript możesz również tworzyć płynne animacje przewijane. 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ć przy użyciu JavaScriptu tę samą animację paska postępu widoczną w poprzedniej prezentacji CSS. 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.

Nowy interfejs API współpracuje też z dotychczasowym interfejsem Web Animations API (WAAPI) i interfejsem CSS Animations API, aby umożliwić deklaratywną animację sterowaną przewijaniem.

Więcej wersji demonstracyjnych i materiałów

Różne implementacje animacji przewijanych możesz zobaczyć w tej witrynie demonstracyjnej, na której możesz porównać wersje demonstracyjne za pomocą nowych interfejsów API CSS i JavaScriptu.

Jeśli chcesz dowiedzieć się więcej o nowych animacjach opartych na przewijaniu, przeczytaj ten artykuł i prezentację I/O 2023.