本頁面由 Cloud Translation API 翻譯而成。

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

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 API 與傳統 JavaScript

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

更多示範和資源