Создайте анимированную кнопку-тумблер с использованием framer-motion и React

Опубликовано: 8 Августа, 2022

В этой статье мы узнаем, как создать анимированную кнопку-переключатель, используя

фреймер-движение
React.js

Предпосылки:

NodeJS должен быть установлен
Знание JavaScript (ES6).
1. Функция стрелки (ES6)
2. Тернарный оператор
3. document.body.style.backgroundColor
Знание HTML/CSS.
Базовые знания ReactJS.
1. Реагировать на состояние использования
2. Реагировать на использованиеЭффект

Создание приложения React и установка модуля:

Шаг 1: Теперь вы начнете новый проект, используя приложение create-react-app, поэтому откройте свой терминал и введите:

npx create-react-app toggle-switch

Шаг 2: После создания папки проекта, т. е. тумблера, перейдите к ней с помощью следующей команды.

cd toggle-switch

Шаг 3: Добавьте пакеты npm, которые вам понадобятся во время проекта:

npm install framer-motion

или же

npm i framer-motion

Шаг 4: Теперь откройте только что созданный проект в вашем любимом редакторе кода, я использую Visual Studio Code и рекомендую вам использовать его.

Откройте папку src и удалите следующие файлы:

логотип.svg
сервисворкер.js
setupTests.js
index.css
App.test.js (если есть)

Структура проекта: дерево структуры папок должно выглядеть так.

Я настоятельно рекомендую вам написать этот код вместо того, чтобы просто копировать-вставлять и играть с CSS, немного подправить его в соответствии с вашим вкусом и потребностями.

Подход:

Мы собираемся использовать функцию const & arrow для кодирования служебного компонента « Switch» , который будет использоваться для создания тумблера.
В Switch мы напишем код для изменения имени класса и источника изображения в соответствии с состоянием isOn , переданным в качестве реквизита при деструктуризации.
Переключатель и его анимация будут достигнуты с помощью компонента motion.div кадра -движения и атрибута анимации для него.
В приложении мы собираемся использовать хук useState для управления состоянием «isOn», которое изменяется при нажатии на кнопку-переключатель, которая, в свою очередь, используется для изменения имени класса, цвета фона и источника изображения.
Хук React useEffect используется для создания побочного эффекта всякий раз, когда изменяется состояние «isOn», чтобы соответствующим образом изменить цвет фона всей страницы.

Пример:

App.js

import React from "react";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import "./App.css";
  
const Switch = ({ isOn, ...rest }) => {
  
  // initialize the customClassName according to the
  // state of the "isOn" using ternary operator
  const customClassName = 
     `toggleSwitch ${isOn ? "on" : "off"}`;
  
  // initialize the src according to the
  // state of the "isOn" using ternary operator
  const src = isOn
    ? 
"Toggle 1st Image link"
    : 
"Toggle 2nd Image link";
  
  return (
    <motion.div animate className=
        {customClassName} {...rest}>
      <motion.div animate>
        <img src={src} />
      </motion.div>
    </motion.div>
  );
};
  
const App = () => {
  // useState hook is used to manage the state of
  // "isOn" that is used to change the className, 
  // background-color and img src accordingly
  const [isOn, setIsOn] = useState(false);
  
  useEffect(() => {
    // background-color changes every time "isOn" 
    // changes using JavaScript DOM methods
    document.body.style.backgroundColor = 
              isOn ? "#1c1c1c" : "#ffffff";
  }, [isOn]);
  
  return <Switch isOn={isOn} onClick={() => 
                          setIsOn(!isOn)} />;
};
  
export default App;

App.css

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* for smooth transition*/
  transition: 0.5s ease-in-out;
}
  
* {
  box-sizing: border-box;
}
  
.toggleSwitch {
  width: 170px;
  height: 100px;
  border-radius: 100px;
  padding: 10px;
  display: flex;
  cursor: pointer;
  z-index: 2;
}
  
/* CSS for switch when "on"*/
.toggleSwitch.on {
  background-color: #1aad66;
  justify-content: flex-end;
  /* for smooth transition*/
  transition: 0.5s ease-in-out;
}
  
/*CSS for switch when "off"*/
.toggleSwitch.off {
  background-color: #dddddd;
  justify-content: flex-start;
}
  
.toggleSwitch div {
  width: 80px;
  height: 80px;
  border-radius: 100%;
}
  
img {
  width: 80px;
  height: 80px;
  border-radius: 100%;
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
  
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Шаг для запуска приложения: Запустите приложение с помощью следующей команды из корневого каталога проекта.

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод.

Technical Scripter

Создайте анимированную кнопку-тумблер с использованием framer-motion и React

App.js

App.css

index.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ