Анимация SVG (масштабируемая векторная графика) придает веб-интерфейсам жизнь и интерактивность, делая их визуально привлекательными. В этой статье мы рассмотрим различные методы создания SVG-анимации с использованием библиотеки Framer Motion в React. Framer Motion предоставляет мощный набор инструментов для простого создания плавной и выразительной анимации. Мы рассмотрим различные методы и предоставим примеры кода для демонстрации каждого подхода.

Содержание:

1. Базовая SVG-анимация

2. Анимация ключевых кадров

3. Анимация пути

4. Морфинг анимации

5. Преобразование анимации

6. Интерактивная анимация

7. Анимация на основе прокрутки

8. Базовая SVG-анимация.
   Для начала давайте рассмотрим базовую SVG-анимацию с использованием Framer Motion. Вот пример анимации свойства непрозрачности элемента SVG:

import { motion } from 'framer-motion';
const BasicSvgAnimation = () => {
  return (
    <svg>
      <motion.circle
        cx="50"
        cy="50"
        r="25"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
      />
    </svg>
  );
};

1. Анимация ключевых кадров.
   Framer Motion позволяет нам определять ключевые кадры для более сложной анимации. Вот пример анимации положения элемента SVG с помощью ключевых кадров:

import { motion } from 'framer-motion';
const KeyframesSvgAnimation = () => {
  return (
    <svg>
      <motion.circle
        cx="50"
        cy="50"
        r="25"
        animate={{
          x: [0, 100, 0],
          y: [0, 50, 0],
        }}
        transition={{ duration: 2, repeat: Infinity }}
      />
    </svg>
  );
};

1. Анимация пути:
   Анимация пути элемента SVG может создать завораживающие эффекты. Вот пример анимации пути элемента SVG <path>с помощью Framer Motion:

import { motion } from 'framer-motion';
const PathAnimation = () => {
  return (
    <svg>
      <motion.path
        d="M100,100 L200,100 L150,200 Z"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 2 }}
      />
    </svg>
  );
};

1. Морфинг анимации:
   Framer Motion позволяет нам плавно трансформироваться между различными формами SVG. Вот пример анимации морфинга круга и квадрата:

import { motion } from 'framer-motion';
const MorphingAnimation = () => {
  return (
    <svg>
      <motion.morphSvg
        from="circle"
        to="rect"
        cx="50"
        cy="50"
        r="25"
        width="50"
        height="50"
      />
    </svg>
  );
};

1. Преобразование анимации:
   элементы SVG можно трансформировать различными способами. Framer Motion обеспечивает простые в использовании преобразования для анимации SVG. Вот пример анимации вращения элемента SVG:

import { motion } from 'framer-motion';
const TransformAnimation = () => {
  return (
    <svg>
      <motion.rect
        width="100"
        height="100"
        initial={{ rotate: 0 }}
        animate={{ rotate: 360 }}
        transition={{ duration: 2, repeat: Infinity }}
      />
    </svg>
  );
};

1. Интерактивная анимация.
   Framer Motion позволяет создавать интерактивную SVG-анимацию, реагируя на действия пользователя. Вот пример анимации элемента SVG при наведении курсора мыши:

import { motion } from 'framer-motion';
const InteractiveAnimation = () => {
  return (
    <svg>
      <motion.circle
        cx="50"
        cy="50"
        r="25"
        whileHover={{ scale: 1.2 }}
        whileTap={{ rotate: 180 }}
      />
    </svg>
  );
};

1. Анимация на основе прокрутки.
   Framer Motion также поддерживает анимацию на основе прокрутки, при которой элементы SVG анимируются в зависимости от положения прокрутки. Вот пример анимации элемента SVG при прокрутке:

import { motion, useViewportScroll } from 'framer-motion';
const ScrollAnimation = () => {
  const { scrollYProgress } = useViewportScroll();
  return (
    <svg>
      <motion.circle
        cx="50"
        cy="50"
        r="25"
        style={{
          y: scrollYProgress.interpolate([0, 1], [0, 100]),
                 position: 'fixed',
        }}
      />
    </svg>
  );
};

В этой статье мы рассмотрели различные методы создания SVG-анимации с использованием Framer Motion в React. Мы рассмотрели базовую анимацию SVG, анимацию ключевых кадров, анимацию пути, анимацию морфинга, анимацию преобразования, интерактивную анимацию и анимацию на основе прокрутки. Используя возможности Framer Motion, мы можем создавать потрясающие и динамичные SVG-анимации, которые повышают удобство использования наших веб-приложений.

Реализуя эти методы, вы сможете вывести SVG-анимацию на новый уровень и создать уникальные и привлекательные пользовательские интерфейсы в своих проектах React.

Не забывайте экспериментировать, сочетать разные техники и раскрыть свой творческий потенциал! Приятной анимации!