捲動式動畫成效的個案研究

Yuriko Hirota

捲動驅動動畫有哪些新功能？

捲動驅動動畫是一種方法，可根據使用者的捲動位置，為網站或網路應用程式增添互動性和視覺效果。這能有效吸引使用者持續互動，並讓您的網站在視覺上更具吸引力。

過去，建立捲動驅動動畫的唯一方法，就是回應主執行緒上的捲動事件。這會造成兩個主要問題：

• 捲動功能是在單獨的執行緒上執行，因此會以非同步方式傳送捲動事件。
• 主執行緒動畫可能會發生卡頓。

這使得製作難以或難以與捲動同步的高效捲動式動畫。

我們現在推出一組新的 API，可支援捲動驅動的動畫，您可以透過 CSS 或 JavaScript 使用這些 API。API 會盡可能減少使用主執行緒資源，讓捲動導向動畫更容易實作，也更加順暢。捲動驅動動畫 API 目前支援下列瀏覽器：

本文將新方法與傳統 JavaScript 技巧進行比較，說明如何透過新 API 輕鬆製作流暢的捲動動畫。

捲動導向動畫 CSS API 與傳統 JavaScript 的差異

以下範例進度列是使用類別 JavaScript 技術建立而成。

每當 scroll 事件發生時，文件都會回應，計算使用者捲動至 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 + "%";
})

以下示範顯示搭配使用新 API 與 CSS 時相同的進度列。

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

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

新的 animation-timeline CSS 功能會自動將捲動範圍中的某個位置轉換為進度百分比，因此可完成所有繁重的工作。

這裡有個有趣的部分：假設您在兩個版本的網站上都進行了大幅度的計算，而這些版本會佔滿大部分的主執行緒資源。

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

如您所料，由於主執行緒資源交接，傳統 JavaScript 版本會變得卡頓且緩慢。另一方面，CSS 版本完全不受繁重 JavaScript 工作影響，且可回應使用者的捲動互動。

如以下螢幕截圖所示，DevTools 中的 CPU 用量完全不同。

以下示範呈現由 CyberAgent 建立的捲動驅動動畫。您可以看到，當您捲動畫面時，相片會逐漸顯示。

新的捲動驅動動畫 JavaScript API 與傳統 JavaScript

新 API 的優點不僅限於 CSS。您也可以用 JavaScript 建立流暢的捲動式動畫。請參考以下範例：

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,
    }),
  }
);

這樣一來，您就能只使用 JavaScript 建立與先前 CSS 示範相同的進度列動畫。而且基礎技術與 CSS 版本相同。這個 API 會盡量減少主要執行緒資源的使用量，讓動畫比傳統 JavaScript 方法更流暢。

此外，這個新的 API 還可搭配現有的 Web Animations API (WAAPI) 和 CSS Animations API，啟用宣告式捲動導向動畫。

更多示範與資源

您可以透過這個示範網站查看各種以捲動為準的動畫實作方式，並比較使用 CSS 和 JavaScript 這些新 API 的示範情況。

如要進一步瞭解新的捲動式動畫，請參閱這篇文章和 2023 年 I/O 大會講座！