12.12.2022 в 14:33

Создание плавной анимации в React с помощью Framer-Motion

React.js это популярная библиотека JavaScript для создания пользовательских интерфейсов. Это позволяет вам создавать повторно используемые компоненты, которые могут совместно использоваться различными частями вашего приложения. Framer-motion - это популярная библиотека анимации для React, которая позволяет легко создавать плавные анимации на основе жестов.

Вот простое руководство о том, как использовать React.js и Framer-motion вместе для создания анимированной кнопки:

Во-первых, вам нужно будет убедиться, что у вас есть React.js и Framer-motion, установленный в вашем проекте. Вы можете сделать это, выполнив следующую команду:

npm install react react-dom framer-motion

Затем создайте новый файл с именем «Button.js» и добавьте следующий код:

import React from 'react';
import { motion } from 'framer-motion';

const Button = ({ onClick }) => {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
    >
      Click me!
    </motion.button>
  );
};

export default Button;

Этот код создает новый компонент Button, который использует компонент motion.button, предоставляемый Framer-motion. При наведении курсора мыши на кнопку она будет анимирована в масштабе 1,1. При нажатии на кнопку она будет анимирована в масштабе 0,95.

Чтобы использовать этот компонент Button в вашем приложении, вы можете импортировать его и добавить в свой JSX следующим образом:

import Button from './Button';

const App = () => {
  return (
    <div>
      <Button onClick={() => console.log('Button was clicked!')} />
    </div>
  );
};

Этот код создает новый компонент приложения, который использует компонент Button. Когда кнопка нажата, она отправит сообщение на консоль.

Вы можете узнать больше о React.js и Framer-motion, прочитав документацию и изучив примеры на их соответствующих веб-сайтах.

#React

452

Войти на сайт

Создание плавной анимации в React с помощью Framer-Motion