Статья о том, как создать собственную анимацию прокрутки с помощью Framer Motion с React.

СОДЕРЖАНИЕ

  • вступление
  • Framer Motion
  • Начиная
  • useViewPortScroll ()
  • useSpring ()
  • useTransform ()
  • Решение

вступление

В этой статье + руководстве мы рассмотрим все необходимые инструменты и методы, необходимые для создания анимации, которая отслеживает прогресс позиции пользователя при прокрутке веб-страницы в браузере. Это будет включать текущий процент, а также анимированное визуальное представление процента.

Если это ваш первый опыт работы с Framer Motion, это не обязательно, но я рекомендую сначала прочитать мою статью «Как использовать Framer Motion с React», чтобы лучше понять основы. Ссылка внизу.

Framer Motion

Давайте поговорим немного о Framer Motion и о том, что это такое. Framer Motion предоставляет простой API, который делает переходы и анимацию мощными. Поскольку это упрощает работу, вы можете делать с ней необычные вещи и действительно выводить анимацию на новый уровень.

Начиная

Поехали! Во-первых, нам нужно установить наши зависимости в наш проект React.

Framer-Motion требует, чтобы вы использовали React версии 16.8 или выше.

Внутри вашего приложения реакции выполните следующую команду, чтобы установить нашу зависимость движения фреймера.

npm install --save framer-motion

Теперь, когда он установлен, вы можете импортировать движение в свои компоненты через

import { motion } from “framer-motion"

Я также буду использовать стилизованные компоненты, чтобы сделать макет моей страницы красивее. Теперь в этом нет необходимости, вы можете легко добавить CSS в каскадную таблицу стилей. Но если вы хотите иметь тот же код, что и я, устанавливаю в ваш проект стилизованные компоненты.

npm install --save styled-components

Теперь в вашем проекте React есть все, что нужно для написания кода. Если вы хотите следовать за мной точно так же, как я, клонируйте мои стартовые файлы. Это включает в себя набор элементов для прокрутки страницы.

git clone https://github.com/StevenCreates/framer-motion-scroll-progress-starter-files.git

Если вы не хотите клонировать, вот стартовый файл без дополнительного содержимого, чтобы его можно было прокручивать.

useViewportScroll ()

Что это?

useViewportScroll - это ловушка, похожая на любую ловушку React. При использовании он возвращает значения или MotionValues, которые обновляются при прокрутке области просмотра в браузере.

Это значения движения, которые вернет хук:

  • scrollX - Расстояние горизонтальной прокрутки в пикселях.
  • scrollY - Расстояние вертикальной прокрутки в пикселях.
  • scrollXProgress - Прогресс горизонтальной прокрутки от 0 до 1.
  • scrollYProgress - Прогресс вертикальной прокрутки от 0 до 1.

Важно отметить, что вы не можете установить высоту основного текста или HTML на 100% или подобное, потому что это мешает браузеру точно измерять длину страницы.

Как мы это используем

В нашем случае мы будем использовать возвращаемое значение scrollYProgress, так как мы хотим отслеживать прогресс между 0 и 1.

const { scrollYProgress } = useViewportScroll();

useSpring ()

Что это?

Хук useSpring Framer Motion создаст новое значение MotionValue, которое будет использовать пружинную анимацию для анимации в новом состоянии.
Чтобы использовать useSpring, все, что вам нужно, - это передать (источник, конфигурация), и произойдет волшебство.

Как мы это используем

Источником будет scrollyYProgress, который мы извлекаем из useViewportScroll.

Потому что useSpring выполняет весеннюю анимацию и поддерживает скорость между анимациями, чтобы создать более привлекательную анимацию. Мы можем контролировать это, добавляя различные значения в config.

Давайте добавим пружине немного жесткости, более высокие значения создадут более резкое движение, и по умолчанию для жесткости установлено значение 100.

Теперь добавление некоторого демпфирования к нашей конфигурации определит силу противодействующей силы. Если демпфирование установлено на 0, пружина будет иметь силу противодействия. Если установлено значение 0, пружина будет колебаться бесконечно.

const pathLength = useSpring(scrollYProgress, { stiffness: 400, damping: 90 });

useTransform ()

Что это?

useTransform преобразует / создает MotionValue, преобразуя выходные данные другого MotionValue, просто отображая его из одного диапазона значений в другой.

Для этого вам необходимо передать ему следующие (значение, inputRange, outputRange, options).

Диапазон ввода может быть только линейным рядом чисел. Для сравнения, диапазон вывода может быть любым значением, поддерживаемым Framer Motion.

  • Числа
  • Цвета
  • Тени
  • Так далее

Как мы это используем

Наша цель прямо сейчас - превратить данные, которые мы получаем от useViewportScroll, в проценты для отображения.

Чтобы разбить useTransform ():

Если вы помните, значением будет наш scrollYProgress, который дает нам прогресс прокрутки между числами 0 и 1. Пример: 0,2857.

InputRange будет [0, 1], а наш outPut должен представлять что-то близкое к процентному соотношению, например [0, 100].

const yRange = useTransform(scrollYProgress, [0, 1], [0, 100]);

Теперь наш вывод должен быть в диапазоне от 0 до 100 при прокрутке.

Давайте возьмем yRange и обновим процентное состояние из нашего стартового файла с помощью хука Reacts useEffect.

Использование onChange для получения yRange в его текущей позиции при каждом изменении. Это все еще не дает нам идеального процента. Числа выводятся так: 34.9084 нам нужны только числа до десятичной дроби. Добавив Math.trunc, мы можем удалить любые числа после десятичной дроби, что даст нам идеальное процентное число.

useEffect(() =>
     yRange.onChange((v) => {
     setCurrentPercent(Math.trunc(yRange.current))
}),[yRange]);

Решение

Теперь, когда у нас есть все значения, которые нам нужны в SVG для завершения анимации, я собираюсь использовать круг.

Framer Motion оживляет SVG вместе с любым элементом HTML. В Framer Motion есть элемент, который добавляет ему дополнительную функциональность, добавляя motion.element в SVG, который становится motion.path.

В нашем motion.path мы собираемся использовать тег style вместе со стилем pathLength, чтобы это работало. Просто добавьте уже созданный pathLength из нашего хука useSpring в тег стиля. Это одна вещь, которая будет делать большую часть анимации в нашем SVG. Это сделает наши круги кольцом или штрихом, пока мы не дойдем до нижней части страницы, завершив кольцо.

Если бы мы оставили это так, это уже была бы потрясающая анимация, но мы можем сделать гораздо больше, так почему бы и нет?

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

Теперь нам нужно использовать процент, который мы храним в currentPercent. Мы можем добавить тройку к нашей заливке, которая сделает круг, а не просто кольцо, когда процент достигнет 100.

fill={currentPrecent === 100 ? "#CDFF00" : "none"}

Теперь, когда мы немного больше знакомы с элементами Framer Motions, давайте создадим motion.div и передадим его currentPercent в качестве дочернего элемента и придадим ему некоторый стиль, чтобы поместить его в центр нашего таймера.

<motion.div
style={{
position: "-webkit-sticky",
position: "absolute",
top: "40px",
left: "40px",
width: "120px",
height: "120px",
opacity: pathLength,
}}
>
{currentPrecent}
</motion.div>

И последнее, но не менее важное: давайте добавим немного цвета и всплеска к нашей анимации загрузки в зависимости от того, какой процент она составляет. Создайте переменную useState currentProgressColor, передайте ее нашему атрибуту stroke и добавьте useEffect с троичной логикой, которая будет изменять цвет обводки в зависимости от процента.

Не стесняйтесь экспериментировать с любыми из этих разных вещей и создавать свою собственную анимацию прокрутки!

Вот окончательный код:

Вот как должен выглядеть конечный продукт.

Заключение

Спасибо за чтение «Как создать анимацию прокрутки с помощью Framer Motion and React».

Ознакомьтесь с другими моими статьями о Framer Motion:



Создание анимированного таймера обратного отсчета с помощью Framer Motion и React
Руководство по созданию собственного анимированного таймера обратного отсчета с помощью Framer Motion, React и ловушки обратного отсчета использования. javascript.plainenglish.io





Как создать счетчик загрузки с помощью Framer Motion and React
Создать счетчик загрузки с помощью только Framer Motion и React javascript.plainenglish.io





Как использовать Framer Motion с React
В этой серии руководств и статей будут рассмотрены примеры и концепции Framer Motion, используемые в React + Styled… medium.com



Еще раз спасибо за чтение!