此页面由 Cloud Translation API 翻译。

滚动驱动型动画性能的案例研究

Yuriko Hirota

滚动条驱动的动画有哪些新变化？

滚动驱动型动画是一种可通过用户的滚动位置触发，为您的网站或 Web 应用添加互动性和视觉吸引力的方式。这是一种非常有效的方式，可以提高用户互动度并让您的网站更具视觉吸引力。

过去，创建滚动条驱动的动画的唯一方法是在主线程中响应滚动事件。这导致了两个主要问题：

滚动是在单独的线程中执行的，因此会异步传送滚动事件。
主线程动画可能会出现卡顿。

因此，创建与滚动同步且性能出色的滚动条驱动型动画是不可能的，或者非常困难。

我们现在推出了一组新的 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 工作的影响，并且可以响应用户的滚动互动。

在 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

更多演示和资源