Статья о том, как создать собственный анимированный переключатель с помощью Framer Motion и React.
СОДЕРЖАНИЕ
- вступление
- Framer Motion
- Начало работы + Начальные файлы
- Жесты
- Анимация + переход
- onTap ()
- Цветовой переход
- Решение
вступление
В этой статье + руководстве мы рассмотрим все необходимые шаги, знания и методы, необходимые для создания анимированного переключателя. Это будет включать плавный переход от одной стороны переключателя к другому, вплоть до обновления цвета переключателя в зависимости от положения.
Framer Motion
Давайте поговорим немного о Framer Motion и о том, что это такое. Framer Motion предоставляет простой API, который делает переходы и анимацию простыми, но мощными. Поскольку это упрощает работу, вы можете делать с ней необычные вещи и действительно выводить анимацию на новый уровень.
Если это ваш первый опыт работы с Framer Motion, это не обязательно, но я рекомендую сначала прочитать мою статью «Как использовать Framer Motion с React», чтобы лучше понять основы. Ссылка внизу.
Начиная
Поехали! Во-первых, нам нужно установить наши зависимости в наш проект React.
Framer-Motion требует, чтобы вы использовали React версии 16.8 или выше.
Если вы хотите следовать за мной точно так же, как я, клонируйте мои стартовые файлы. Это включает в себя элемент переключения без какой-либо анимации.
Начальные файлы:
git clone https://github.com/StevenCreates/framer-motion-toggle-starter-files.git
Стартовые файлы предоставят вам этот переключатель (см. Изображение), который еще не работает. Вот где в игру вступают Framer-Motion и инструменты, которые я вам даю.
Если вы не используете мои стартовые файлы, вам нужно настроить свой проект React с помощью Framer Motion. Однако, если вы используете мои начальные файлы, теперь можете перейти к разделу «Жесты» статьи.
Внутри вашего приложения реакции выполните следующую команду, чтобы установить нашу зависимость движения фреймера.
npm install --save framer-motion
Теперь, когда он установлен, вы можете импортировать движение в свои компоненты с помощью:
import { motion } from “framer-motion"
Я также буду использовать стилизованные компоненты, чтобы сделать макет моей страницы красивее. Теперь в этом нет необходимости, вы можете легко добавить CSS в каскадную таблицу стилей. Но если вы хотите иметь тот же код, что и я, продолжайте и устанавливайте стилизованные компоненты в ваш проект.
npm install --save styled-components
Теперь в вашем проекте React есть все необходимое для написания кода и анимации.
Жесты
Жесты - это то, как пользователь взаимодействует с вашей веб-страницей или приложением. Простое объяснение жеста - это когда пользователь находится на вашей веб-странице и наводит курсор на элемент на странице, где ваш код делает что-то, когда он наводит курсор на этот элемент. Например, изменить цвет фона или показать всплывающую подсказку.
Framer Motion без проблем работает с событиями Reacts и поддерживает множество жестов (наведение, касание, панорамирование и перетаскивание).
Мы будем использовать жест касания (щелчка), чтобы оживить наш переключатель. Когда пользователь нажимает (щелкает) по нашему переключателю, мы фиксируем это событие и анимируем этот переключатель.
Анимация + переход
Теперь мы могли бы создать переключатель, который просто перемещается из одной стороны в другую, но нам нужен такой, который ощущается живым и приносит опыт.
Я говорил об анимации и переходе в других своих статьях, но давайте коснемся этого еще раз, если это ваша первая моя статья о Framer-Motion.
Анимации
Анимация - это когда у вас есть элемент, который оживает и движется в соответствии с законами физики.
Framer Motion упрощает анимацию, передавая анимированные свойства вашим JSX-элементам. После того, как вы получите эти реквизиты, создатель движения сгенерирует анимацию для вас.
Переходы
Переходы происходят во время анимации. Это действительно может сделать или сломать вашу анимацию.
Если вам не нравятся анимации по умолчанию из движения кадра, вы можете передать свой элемент или SVG в свойство перехода и настроить его.
Давайте добавим некоторые из них к нашему переключателю, чтобы заставить его перемещаться слева направо четко, как у переключателя.
Начиная с animate, я скажу ему двигаться по оси x 20.
Если мы добавим анимацию только с осью x, вы сможете увидеть, как быстро она перемещается слева направо. Не совсем та анимация, которую мы хотим.
Чтобы исправить это, нам нужно будет изменить переход, поскольку мы говорили до того, что переходы - это период времени, когда происходит анимация. Добавьте следующий код и посмотрите, как мы на самом деле воплотили его в жизнь.
Чтобы понять, что мы делаем во время перехода, давайте взглянем на каждую опору, которую мы передаем.
Весна
type: “spring" добавляет в анимацию стимулирующее физическое и реалистичное движение.
Framer-Motion по умолчанию использует анимацию для физических значений, таких как x, y, scale и rotate.
Жесткость
Добавление жесткости повлияет на движение пружины более резким движением в зависимости от того, насколько велико значение.
По умолчанию установлено значение 100.
Демпфирование
Демпфирование обеспечивает сопротивление или силу противодействующей силы (существенно замедляя ее). Если демпфирование установлено на 0, пружина будет колебаться бесконечно, и Framer-Motion устанавливает его на 10 по умолчанию.
Я настоятельно рекомендую вам повозиться со всем этим, чтобы получить полное представление о том, что происходит. А также сделать его своим.
onTap ()
onTap (событие, информация): недействительно
Теперь, когда у нас есть анимация переключения, проблема в том, что она анимируется при загрузке, и при нажатии с ней ничего не происходит. Давайте исправим это с помощью Framer-Motions onTap () prop.
Эта опора обеспечивает обратный вызов, когда жест касания успешно завершается на элементе. По сути то же самое, что и onClick ().
Чтобы выполнить onTap () и анимировать только что созданный переключатель, нам нужно будет сделать несколько вещей.
Во-первых, давайте воспользуемся перехватчиком React useState для хранения текущего значения позиции.
Затем давайте создадим функцию, которая при вызове обновляет значение позиции с 0 до 20 и наоборот.
Теперь нам нужно использовать нашу опору onTap (), о которой мы только что узнали, и передать ей функцию toggleOn (), которую мы только что создали, для ‹ToggleBackground› и ‹ToggleCircle›. Причина для того, чтобы сделать и то, и другое - я хочу, независимо от того, где на переключателе вы нажимаете, он оживляет.
И последнее, но не менее важное: теперь нам нужно изменить нашу анимированную опору, чтобы использовать новое значение useState toggleDirection вместо 20, которое мы передавали раньше.
Поздравляем, наш переключатель теперь анимирует onTap / onClick!
Цветовой переход
Теперь этот шаг не требуется, если вы довольны тем, как сейчас работает переключатель, это здорово! Но я хочу добавить немного особого чутья.
Теперь, когда у нас есть значение toggleDirection, мы можем использовать его в других аспектах нашего переключателя.
Я собираюсь использовать свойство style и ternary, чтобы добиться этого.
Теперь, когда переключатель нажат, в зависимости от toggleDirection цвет будет меняться.
Решение
Вот как теперь должен работать ваш переключатель!
Если вы пропустили какой-либо код, вот последний файл! Счастливых программистов, друзья!
Спасибо за чтение «Как создать анимацию переключения с помощью Framer Motion и React».
Ознакомьтесь с другими моими статьями о Framer Motion:
Еще раз спасибо за чтение!
Больше контента на plainenglish.io
