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

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 !