export const Play = ({ for: forId }) => { const onClick = () => { document.querySelector(`#${forId}`).play(); }; return ; }; ## Введение Когда ты переходишь на новую страницу на GitHub (а также на этом сайте), ты видишь индикатор загрузки в верхней части страницы. Анимация полосы плавная и выглядит естественно. Я объясню, какой пользовательский опыт лежит в основе этого, и создам аналогичный индикатор в React. В этом руководстве я буду использовать Remix как фреймворк для React. Однако ты можешь использовать любой другой React-фреймворк или библиотеку, если она поддерживает отслеживание состояния перехода страниц. ## Пользовательский опыт Ты можешь заметить, что процесс загрузки не является линейным. Он начинается быстро и замедляется, а затем продвигается мелкими шагами. Как только страница загружается, индикатор прогресса быстро достигает 100% и исчезает. Если ты проверишь вкладку сети в инструментах разработчика в браузере, то увидишь, что индикатор прогресса не имеет прямой связи с сетевым запросом, а больше похож на визуальный эффект. Этот дизайн намеренно использует психологический трюк, чтобы пользователь думал, что страница загружается быстрее. Давай сравним его с линейным индикатором прогресса и традиционным спиннером:

Как ты можешь видеть, линейный индикатор прогресса выглядит немного медленно, а спиннер не дает никакой обратной связи по поводу прогресса. Индикатор прогресса от GitHub дает пользователю ощущение движения вперед и делает процесс загрузки более приятным. ### Но почему? В взаимодействии человек-компьютер существует концепция под названием [воспринимаемая производительность](https://developer.mozilla.org/en-US/docs/Learn/Performance/Perceived_performance). Речь идет о том, насколько быстро пользователь чувствует, что работает система, а не о том, насколько она на самом деле быстрая. При линейных движениях они могут часто казаться резкими и механическими, что может вызывать больше умственного напряжения (большая когнитивная нагрузка). Более естественные движения, такие как ease и springing, могут казаться более предсказуемыми и легче воспринимаемыми. Исследования показали, что плавные переходы могут снизить когнитивную нагрузку на пользователей, делая интерфейсы более удобными. Это помогает системе казаться более отзывчивой. Более того, [Харрисон и др. (2007)](https://chrisharrison.net/projects/progressbars/ProgBarHarrison.pdf) обнаружили, что пользователи воспринимают индикатор прогресса как более быстрый, когда он следует кривой "Быстрого Ускорения" (Fast Power easing), что очень похоже на индикатор прогресса от GitHub. График прогресса

Мы можем прийти к выводу, что ключ к тому, чтобы индикатор прогресса казался быстрее, заключается в том, чтобы "начать быстро, замедлиться, а затем ускориться экспоненциально". ## Создание индикатора прогресса Теперь давай создадим аналогичный индикатор прогресса в React. Мы будем использовать Remix и его хук `useNavigation`, чтобы отслеживать состояние перехода страниц. Если ты используешь другие React-фреймворки, ты можешь использовать аналогичные API для достижения того же эффекта. ### Организация анимации Чтобы сделать ее еще более естественной, мы используем spring-анимацию из [react-spring](https://www.react-spring.dev/) для анимации индикатора прогресса (эта библиотека уже является хорошим примером того, как физически основанные анимации могут улучшить пользовательский опыт). Мы можем разделить анимацию на три этапа: 1. Начать быстро и быстро замедлиться 2. Прогрессировать медленно и устойчиво 3. Достигнуть 100% и исчезнуть С использованием императивных API от react-spring, мы легко можем достичь этого эффекта. Вот код: ```tsx import { useSpring, useSpringRef, animated } from 'react-spring'; export const ProgressBar = () => { const api = useSpringRef(); const props = useSpring({ ref: api, }); const start = useCallback(() => { void api.start({ from: { width: '0%' }, to: [ { width: '10%', config: { tension: 160, friction: 22, clamp: true } }, { width: '15%', config: { duration: 5000, easing: (value) => value } }, { width: '100%', config: { tension: 200, friction: 1000 } }, ], }); }, [api]); const end = useCallback(() => { void api.start({ to: [ { width: '100%', config: { duration: 300 } }, { opacity: 0, config: { duration: 300 } }, ], }); }, [api]); return ; }; ``` ```css .bar { pointer-events: none; position: fixed; top: 0; left: 0; height: 2px; background-color: #947dff; border-radius: 0 4px 4px 0; width: 0; z-index: 9999; } ``` Давай разберем код: У нас имеется ссылка на spring `api`, которая управляет анимацией. Когда нужно запустить индикатор прогресса, мы вызываем `start` с следующей конфигурацией: 1. Начало с 0% ширины. 2. Используется большое натяжение и тонкая настройка трения, чтобы индикатор прогресса стартовал быстро и быстро замедлился до 10%. Обратите внимание, что мы используем `clamp: true`, чтобы предотвратить превышение или колебания индикатора. 3. Прогресс до 15% с длительностью 5 секунд. Это буферный этап, чтобы сделать анимацию более естественной. 4. Прогресс до 100% с более высоким натяжением и трением, чтобы индикатор продвигался вперед с медленным движением пружины (GitHub использует случайные длины шагов здесь, но лично я предпочитаю плавное движение). Когда страница загружается, мы вызываем `end`, чтобы "перехватить" анимацию и быстро достичь 100% и исчезнуть. ### Обновление при переходах страниц Remix предоставляет хук `useNavigation`, который позволяет отслеживать состояние перехода страниц. Мы можем использовать его для запуска и завершения индикатора прогресса. Вот код: ```tsx import { useNavigation } from '@remix-run/react'; export const ProgressBar = () => { // ... const { state } = useNavigation(); // ... useEffect(() => { switch (state) { case 'navigating': case 'submitting': { start(); break; } default: { end(); break; } } }, [state, start, end]); }; ``` Не стесняйся настраивать стиль индикатора прогресса под дизайн твоего сайта и настройки параметров анимации в соответствии с твоими предпочтениями. Пока ты следуешь стилю анимации "Быстрого Ускорения", ты сможешь достичь того же результата. ## Заключение Взаимодействие человек-компьютер — очень интересная область. Даже такие мелочи, как индикатор загрузки, могут существенно повлиять на пользовательский опыт. В Logto мы заботимся не только о технической инфраструктуре и реализации, но и о пользовательском опыте и дизайне. Мы верим, что это также важные части дружественной для разработчиков платформы.