Кейс по производительности анимации с прокруткой

Yuriko Hirota

Что нового в анимации, управляемой прокруткой?

Анимация, запускаемая при прокрутке, — это способ добавить интерактивности и визуальной привлекательности вашему веб-сайту или веб-приложению, активируемая положением прокрутки пользователем. Это может стать отличным способом удержать внимание пользователей и сделать ваш веб-сайт более привлекательным с визуальной точки зрения.

Раньше единственным способом создания анимации, управляемой прокруткой, было реагирование на событие прокрутки в основном потоке. Это вызывало две основные проблемы:

• Прокрутка выполняется в отдельном потоке, поэтому события прокрутки передаются асинхронно.
• Анимация в основном потоке подвержена рывкам .

Это делает создание высокопроизводительных анимаций, синхронизированных с прокруткой, невозможным или очень сложным.

Мы представляем новый набор API для поддержки анимаций, управляемых прокруткой, которые можно использовать из CSS или JavaScript. API стремится использовать как можно меньше ресурсов основного потока, что значительно упрощает реализацию анимаций, управляемых прокруткой, и делает их намного плавнее. В настоящее время API для анимаций, управляемых прокруткой, поддерживается в следующих браузерах:

Browser Support

• 115
• 115
• 
• 26

Source

В этой статье новый подход сравнивается с классической техникой JavaScript, чтобы показать, насколько легко и плавно можно создавать анимации, управляемые прокруткой, с помощью нового API.

Примечание: Следующие преимущества в производительности, достигаемые за счет использования анимации, управляемой прокруткой, доступны начиная с Chrome 116.

Анимация, управляемая прокруткой, с помощью 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);
}

Новая функция CSS animation-timeline автоматически преобразует позицию в диапазоне прокрутки в процент прогресса, выполняя таким образом всю основную работу.

А вот что интересно — предположим, вы внедрили в обе версии веб-сайта очень ресурсоемкое вычисление, которое поглотило бы большую часть ресурсов основного потока.

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 и может реагировать на действия пользователя при прокрутке страницы.

Использование ЦП в инструментах разработчика отображается совершенно иначе, как показано на следующих скриншотах.

В следующем примере демонстрируется применение анимации, управляемой прокруткой, созданной с помощью CyberAgent . Вы можете увидеть, что фотография плавно появляется по мере прокрутки.

Новые анимации, управляемые прокруткой, в сравнении с классическим 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,
    }),
  }
);

Это позволяет создать ту же анимацию индикатора выполнения, что и в предыдущем примере с CSS, используя только JavaScript. Базовая технология та же, что и в версии с CSS. API старается использовать как можно меньше ресурсов основного потока, что делает анимацию намного плавнее по сравнению с классическим подходом на JavaScript.

Кроме того, этот новый API работает совместно с существующими API веб-анимаций (WAAPI) и API CSS-анимаций , что позволяет создавать декларативные анимации, управляемые прокруткой.

Больше демонстраций и ресурсов

Вы можете ознакомиться с различными вариантами реализации анимации, управляемой прокруткой, на этом демонстрационном сайте , где можно сравнить демонстрационные примеры, использующие новые API из CSS и JavaScript.

Если вас интересует более подробная информация о новых анимациях, управляемых прокруткой, ознакомьтесь с этой статьей и докладом на конференции I/O 2023 !