Изучение Framer Motion: подробное руководство с примерами кода

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

  1. Базовые анимации.
    Framer Motion обеспечивает простой способ анимации элементов. Вот пример анимации элемента div:
import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello, Framer Motion!
    </motion.div>
  );
};
  1. Варианты.
    Варианты позволяют определять многократно используемые состояния анимации для элементов. Вот пример использования вариантов для создания прыгающей кнопки:
import { motion } from "framer-motion";
const buttonVariants = {
  initial: { scale: 1 },
  hover: { scale: 1.2 },
};
const MyComponent = () => {
  return (
    <motion.button
      variants={buttonVariants}
      initial="initial"
      whileHover="hover"
    >
      Click me!
    </motion.button>
  );
};
  1. Жесты.
    Framer Motion позволяет легко добавлять интерактивные жесты к вашим компонентам. Вот пример перетаскивания элемента div:
import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
    >
      Drag me!
    </motion.div>
  );
};
  1. Переходы страниц.
    Framer Motion позволяет создавать плавные переходы страниц. Вот пример плавного перехода между страницами:
import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Page content
    </motion.div>
  );
};
  1. Анимация SVG:
    Framer Motion поддерживает анимацию элементов SVG. Вот пример анимации круга SVG:
import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <svg>
      <motion.circle
        cx="50"
        cy="50"
        r="25"
        fill="blue"
        animate={{ cx: [null, 100, 50], cy: [null, 50, 100], fill: ["blue", "red"] }}
        transition={{ duration: 2, repeat: Infinity }}
      />
    </svg>
  );
};

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