Studium przypadku dotyczące wydajności animacji przewijanych

Yuriko Hirota

Co nowego w animacjach opartych na przewijaniu?

Animacje wywoływane przewijaniem to sposób na dodanie interaktywności i atrakcyjności wizualnej do witryny lub aplikacji internetowej. Są one wywoływane przez pozycję przewijania użytkownika. To świetny sposób na utrzymanie zaangażowania użytkowników i zwiększenie atrakcyjności wizualnej witryny.

W przeszłości jedynym sposobem tworzenia animacji wywoływanych przez przewijanie było reagowanie na zdarzenie przewijania w głównym wątku. Powodowało to 2 główne problemy:

• Przewijanie odbywa się w osobnym wątku, dlatego zdarzenia przewijania są dostarczane asynchronicznie.
• Animacje w wątku głównym mogą powodować zacinanie 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 opartych na przewijaniu, których możesz 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 wdrażanie animacji opartych na przewijaniu i sprawia, że są one płynniejsze. Interfejs Scroll-driven Animations API 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 oparte na przewijaniu dzięki nowemu interfejsowi API.

Interfejs CSS API animacji opartych na przewijaniu a klasyczny JavaScript

Ten przykład paska postępu został utworzony przy użyciu technik JavaScriptu opartych na klasach.

Dokument reaguje za każdym razem, gdy występuje zdarzenie scroll, aby obliczyć, o ile procent użytkownik przewinął stronę.scrollHeight

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ższy przykład pokazuje ten sam pasek postępu, ale z użyciem 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 przekształca pozycję w zakresie przewijania na procent postępu, wykonując w ten sposób całą ciężką pracę.

Teraz przejdźmy do ciekawej części. Załóżmy, że w obu wersjach witryny wdrożono bardzo złożone 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 ze względu na złączenie zasobów wątku głównego. Z drugiej strony wersja CSS nie jest w ogóle dotknięta intensywną pracą JavaScriptu i może reagować na interakcje użytkownika związane z przewijaniem.

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

Ten przykładowy projekt demonstruje zastosowanie animacji opartej na przewijaniu utworzonej przez CyberAgent. Widać, że zdjęcie pojawia się stopniowo podczas przewijania.

Nowy interfejs JavaScript API do animacji opartych na przewijaniu a klasyczny JavaScript

Zalety nowego interfejsu API nie ograniczają się tylko do usług porównywania cen. Za pomocą JavaScriptu możesz też tworzyć płynne animacje oparte na przewijaniu. Przyjrzyj 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 utworzyć tę samą animację paska postępu, która była widoczna w poprzedniej wersji demonstracyjnej CSS, używając tylko JavaScriptu. Technologia bazowa jest taka sama jak w przypadku wersji usługi porównywania cen. Interfejs API stara się używać jak najmniej zasobów wątku głównego, dzięki czemu animacje są znacznie płynniejsze w porównaniu z klasycznym podejściem opartym na JavaScript.

Ten nowy interfejs API współpracuje też z dotychczasowymi interfejsami Web Animations API (WAAPI) i CSS Animations API, aby umożliwić deklaratywne animacje oparte na przewijaniu.

Więcej wersji demonstracyjnych i materiałów

Różne implementacje animacji opartej na przewijaniu możesz sprawdzić na tej stronie demonstracyjnej, gdzie możesz 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 opartych na przewijaniu, przeczytaj ten artykuł i obejrzyj prezentację z I/O 2023.