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

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

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

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

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

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

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

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