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

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

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 + "%";
})

以下示範在 CSS 中使用新版 API，可呈現相同的進度列。

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

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

全新的動畫時間軸 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 Animation API 搭配使用，啟用宣告式捲動式動畫。

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

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

捲動式動畫 CSS API 與傳統版 JavaScript

全新捲動式動畫 JavaScript API 與傳統 JavaScript 的比較

更多示範與資源