Держите важные вещи под рукой
В этом выпуске ByteSize мы рассмотрим создание анимированного сжатого заголовка с помощью триггера прокрутки. Мы будем использовать некоторые из основных идей, которые мы использовали в компоненте бесконечной прокрутки, а также представим несколько новых, таких как анимированные переходы.
Как всегда, мы начнем с нового веб-приложения Flask + React, руководство по созданию которого вы можете найти здесь.
Мы также будем довольно широко использовать Material-UI (включая значки), поэтому обязательно установите его:
npm я @material-ui/ядро @material-ui/icons
Если вам просто нужен код, вы можете найти репозиторий здесь
Начиная
Заголовок, который мы собираемся сделать, основан на том же, который я интегрирую в Offbrand. Для этого нам понадобится изображение, отображаемое имя, имя пользователя, биография, а также соответствующие социальные ссылки. Я использую свой собственный профиль Offbrand и помещаю информацию в статическую константу данных (в app/static/src/Data.jsx)
Теперь мы возьмем этот объект и импортируем его в файл компонента заголовка и создадим заголовок базового профиля. Первый шаг — макет изображения, отображаемого имени, имени пользователя и биографии (в app/static/src/Header.jsx).
Социальные сети
Далее идут социальные иконки. Мы определим специальную функцию для рендеринга наших значков, в том числе функцию переключения, чтобы вернуть правильный в зависимости от учетной записи. Мы также будем использовать интеграцию FontAwesome с Material-UI для получения значков. Для этого нам также потребуется импортировать другую библиотеку (fg-loadcss).
npm установить fg-loadcss
А теперь о компоненте SocialIcon (в app/static/src/SocialIcons.jsx)
Разобраться с TikTok было непросто, потому что иконка на FontAwesome по какой-то причине у меня не работала должным образом, поэтому мне пришлось импровизировать и найти SVG в Интернете, который я затем отредактировал и использовал.
Социальный Аккордеон
Теперь, когда у нас есть функция социальной иконки, мы можем импортировать ее в файл Header.jsx и использовать. Поскольку учетные записи социальных сетей представлены в виде массива объектов, мы можем условно сопоставить массив (в зависимости от количества записей) и отобразить объекты. Я считаю, что более 4 или 5 значков вместе могут стать немного чрезмерными, поэтому я нарезал социальный список, если он длиннее 4 элементов, чтобы поместить все лишнее в расширяемую строку с компонентом аккордеона. (в app/static/src/Header.jsx)
Минималистский
Закончив наш первоначальный заголовок, мы перейдем к созданию свернутого варианта. Мы можем адаптировать компонент AppBar из Material-UI (в app/static/src/Header.jsx)
Хороший слушатель
Когда обе версии нашего заголовка завершены, теперь нам нужно решить, когда каждая из них будет показана пользователю. Мы будем использовать функцию handleScroll, которая переключает маленькое состояние каждый раз, когда пользователь прокручивает страницу за пороговое значение, установленное сжатием. Мы будем использовать useEffect, чтобы настроить прослушиватель событий прокрутки для запуска этой функции. Затем мы устанавливаем видимость нашей панели приложений и контейнера в виде тернарного оператора на основе небольшого состояния (в app/static/src/Header.jsx).
Это не все
Но мы можем сделать больше.
Все это включение и выключение нашего сжатого заголовка происходит довольно резко. Мы можем анимировать переход, чтобы сделать его менее резким и более интерактивным. Мы можем реализовать анимацию Fade и Slide из Material-UI, чтобы легко добиться этого.
Единственная проблема, с которой вы можете столкнуться, — это когда вы пытаетесь «сложить» анимации, такие как Fade и Slide, вместе. В этом случае вам нужно только добавить div между переходами, чтобы убедиться, что CSS от одного не мешает другому. Для значков социальных сетей я также использовал значение индекса, чтобы создать прогрессивную задержку, чтобы они входили с небольшим смещением друг относительно друга (в app/static/src/Header.jsx).
…Примечание
Последнее замечание о производительности. Использование библиотеки иконок FontAwesome — это здорово, однако время ее загрузки может быть довольно невыносимым (иногда ~ 9 секунд). Есть способ ускорить рендеринг менее чем до 100 мс, добавив небольшой скрипт в заголовок вашего файла index.html. Это предварительно загружает библиотеку вместе с вашим пакетом, чтобы она была готова вместе с вашим веб-приложением, а не ждала начала загрузки позже (в app/static/templates/index.html).
Законченный
На этом наш компонент заголовка готов!
Как всегда, спасибо за чтение, и обязательно вернитесь, потому что в следующий раз мы будем работать над добавлением глубины нашей странице с анимацией параллакса.
Вы также можете найти больше руководств по компонентам Flask + React здесь:
Удачного взлома!
