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

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);
}

Новая функция 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 совершенно иное, как показано на следующих снимках экрана.

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

Новые API JavaScript для анимации с помощью прокрутки в сравнении с классическим 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 !