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

Yuriko Hirota

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

捲動驅動動畫可根據使用者的捲動位置觸發，為網站或網頁應用程式增添互動性和視覺趣味。這能有效吸引使用者，並提升網站的視覺吸引力。

過去，如要建立捲動驅動動畫，只能在主執行緒中回應捲動事件。這造成了兩大問題：

• 捲動是在獨立執行緒上執行，因此會以非同步方式傳送捲動事件。
• 主執行緒動畫容易發生延遲。

因此，您無法建立與捲動同步的高效能捲動驅動動畫，或難以建立這類動畫。

我們現在推出一組新的 API，支援捲動驅動動畫，可透過 CSS 或 JavaScript 使用。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 工作影響，可以回應使用者的捲動互動。

如下列螢幕截圖所示，開發人員工具中的 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 的示範內容。

如要進一步瞭解新的捲動驅動動畫，請參閱這篇文章和 I/O 2023 演講！