Привет! Итак, вы хотите добавить волновой эффект к своим компонентам React с помощью Material-UI? Вам повезло! В этой статье блога я познакомлю вас с несколькими методами достижения того стильного и интерактивного волнового эффекта, которым известен Material Design. Давайте погрузимся!

Метод 1: использование библиотеки Ripple

Один простой способ добавить эффект пульсации — использовать библиотеку Material-UI Ripple. Эта библиотека предоставляет простой способ интеграции эффекта пульсации в ваши компоненты. Для начала вам необходимо установить пакет @mui/material:

npm install @mui/material

После установки вы можете импортировать компонент Rippleи обернуть его вокруг нужного элемента:

import React from 'react';
import { Ripple } from '@mui/material';
const MyButton = () => {
  return (
    <Ripple>
      <button className="my-button">Click me!</button>
    </Ripple>
  );
};

Метод 2: собственный подход CSS

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

import React from 'react';
import './MyButton.css'; // Import the custom CSS file
const MyButton = () => {
  return <button className="my-button">Click me!</button>;
};

И в файле MyButton.css:

.my-button {
  position: relative;
  overflow: hidden;
}
.my-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  opacity: 0.6;
  pointer-events: none;
  animation: ripple 1s linear;
}
@keyframes ripple {
  to {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

Метод 3: анимация React Spring

Другой подход — использовать библиотеку React Spring для создания анимации. Этот метод позволяет создавать более сложные волновые эффекты с настраиваемой анимацией. Сначала установите пакет react-spring:

npm install react-spring

Затем импортируйте необходимые компоненты и хуки:

import React from 'react';
import { useSpring, animated } from 'react-spring';
const MyButton = () => {
  const [ripple, setRipple] = useSpring(() => ({
    from: { opacity: 0, scale: 0 },
    to: { opacity: 1, scale: 1 },
    config: { duration: 500 },
  }));
  const handleClick = (event) => {
    const { pageX, pageY } = event;
    setRipple({ left: pageX, top: pageY });
  };
  return (
    <div onClick={handleClick}>
      <animated.div
        className="my-button"
        style={{
          position: 'absolute',
          left: ripple.left,
          top: ripple.top,
          opacity: ripple.opacity,
          transform: ripple.scale.interpolate((s) => `scale(${s})`),
        }}
      />
      Click me!
    </div>
  );
};

Это лишь некоторые из множества подходов, которые вы можете использовать, чтобы добавить волновой эффект к своим компонентам React с помощью Material-UI. Не стесняйтесь исследовать другие библиотеки или экспериментировать с различными анимациями для достижения желаемого результата. Приятного кодирования!