React Lottie Player — популярная библиотека, которая позволяет разработчикам легко интегрировать красивые анимации в свои приложения React. В этой статье мы рассмотрим некоторые креативные методы запуска анимации Lottie специально при наведении курсора мыши. Итак, пристегнитесь и будьте готовы добавить интерактивного волшебства в свои веб-проекты!

Метод 1: CSS-эффекты при наведении
Один простой способ вызвать анимацию Лотти при наведении — использовать CSS. Вы можете применить эффект наведения к элементу, и при наведении на этот элемент вы сможете воспроизвести анимацию Лотти. Вот пример того, как этого можно добиться:

import React, { useState } from 'react';
import Lottie from 'react-lottie';
import animationData from './animation.json';
const AnimatedOnHover = () => {
  const [isHovered, setIsHovered] = useState(false);
  const handleHover = () => {
    setIsHovered(true);
  };
  const handleMouseLeave = () => {
    setIsHovered(false);
  };
  return (
    <div
      onMouseEnter={handleHover}
      onMouseLeave={handleMouseLeave}
    >
      <Lottie
        options={{
          animationData,
          autoplay: isHovered,
        }}
      />
    </div>
  );
};
export default AnimatedOnHover;

Метод 2: оболочка компонента React
Другой подход заключается в создании пользовательского компонента-оболочки, который инкапсулирует как анимацию Lottie, так и функциональность наведения. Таким образом, вы можете повторно использовать компонент во всем приложении. Вот пример:

import React, { useState } from 'react';
import Lottie from 'react-lottie';
import animationData from './animation.json';
const LottieOnHover = ({ animation }) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleHover = () => {
    setIsHovered(true);
  };
  const handleMouseLeave = () => {
    setIsHovered(false);
  };
  return (
    <div
      onMouseEnter={handleHover}
      onMouseLeave={handleMouseLeave}
    >
      <Lottie
        options={{
          animationData: animation || animationData,
          autoplay: isHovered,
        }}
      />
    </div>
  );
};
export default LottieOnHover;

Метод 3: использование React-Tooltip
Если вы хотите запускать анимацию Лотти при наведении курсора на всплывающую подсказку или значок информации, вы можете использовать библиотеку React-Tooltip. Вот пример:

import React from 'react';
import Lottie from 'react-lottie';
import animationData from './animation.json';
import ReactTooltip from 'react-tooltip';
const LottieWithTooltip = () => {
  return (
    <div>
      <span data-tip data-for="lottie-tooltip">
        <i className="fa fa-info-circle"></i>
      </span>
      <ReactTooltip id="lottie-tooltip">
        <Lottie
          options={{
            animationData,
            autoplay: true,
          }}
        />
      </ReactTooltip>
    </div>
  );
};
export default LottieWithTooltip;

Метод 4: использование CSS-переходов
CSS-переходы можно комбинировать с React Lottie Player для создания плавной анимации при наведении. Анимируя непрозрачность или масштаб компонента Lottie, вы можете добиться визуально привлекательных эффектов. Вот пример:

import React from 'react';
import Lottie from 'react-lottie';
import animationData from './animation.json';
import './styles.css';
const LottieWithTransitions = () => {
  return (
    <div className="lottie-container">
      <Lottie
        options={{
          animationData,
          autoplay: false,
        }}
      />
    </div>
  );
};
export default LottieWithTransitions;

Метод 5: использование React Spring
React Spring — это мощная библиотека анимации, которую можно комбинировать с React Lottie Player для создания расширенных эффектов при наведении. Вот пример того, как этого можно добиться:

import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';
import Lottie from 'react-lottie';
import animationData from './animation.json';
const LottieWithReactSpring = () => {
  const [isHovered, setIsHovered] = useState(false);
  const springProps = useSpring({
    transform: isHovered ? 'scale(1.2)' : 'scale(1)',
  });
  const handleHover = () => {
    setIsHovered(true);
  };
  const handleMouseLeave = () => {
    setIsHovered(false);
  };
  return (
    <animated.div
      onMouseEnter={handleHover}
      onMouseLeave={handleMouseLeave}
      style={springProps}
    >
      <Lottie
        options={{
          animationData,
          autoplay: false,
        }}
      />
</animated.div>
  );
};
export default LottieWithReactSpring;

В этой статье мы рассмотрели пять различных методов реализации React Lottie Player при наведении курсора мыши. От простых CSS-эффектов при наведении курсора мыши до продвинутых анимаций с помощью React Spring — теперь у вас есть целый ряд возможностей для добавления интерактивных и увлекательных анимаций Lottie в ваши проекты React. Поэкспериментируйте с этими методами и воплотите в жизнь свои веб-приложения!