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

Yuriko Hirota

Что нового в анимации на основе прокрутки

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

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

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

Из-за этого невозможно или очень сложно создавать эффективную анимацию на основе прокрутки, которая синхронизирована с прокруткой.

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

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

Сравнение CSS API для анимации на основе прокрутки и классического JavaScript

В приведенном ниже примере индикатор выполнения создан с помощью классических методов JavaScript.

Документ реагирует на каждое событие scroll, чтобы рассчитать, на сколько процентов пользователь прокрутил элемент scrollHeight.

document.addEventListener("scroll&q>uot;, () = {
  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 для анимации на основе прокрутки и классический JavaScript

Преимущества нового API доступны не только для ССЦ. С помощью 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. В основе обеих версий лежит одна и та же технология. API старается использовать как можно меньше ресурсов основного потока, поэтому анимация получается гораздо более плавной, чем при использовании классического подхода JavaScript.

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

Дополнительные демонстрации и ресурсы

Посмотреть примеры анимации, управляемой прокруткой, можно на демосайте. Там вы найдете демонстрации с использованием новых API из CSS и JavaScript.

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