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

1. Базовый вариант анимации:

Базовый вариант анимации — это самый простой способ анимировать элемент. Он позволяет определить начальное и целевое состояния элемента, а Framer Motion позаботится о переходе между ними. Вот пример:

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello, Framer Motion!
    </motion.div>
  );
};

1. Вариант анимации ключевых кадров:

Вариант анимации ключевых кадров позволяет вам определить несколько состояний элемента и указать переход между этими состояниями. Это обеспечивает больший контроль над последовательностью анимации. Вот пример:

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      animate={{ scale: [1, 1.5, 1] }}
      transition={{ duration: 1 }}
    >
      Scaling Animation
    </motion.div>
  );
};

1. Вариант анимации перехода:

Вариант анимации перехода позволяет анимировать изменения свойств при изменении состояния компонента. Это полезно, когда вы хотите анимировать появление или исчезновение компонента. Вот пример:

import { motion } from "framer-motion";
const MyComponent = ({ isOpen }) => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: isOpen ? 1 : 0 }}
      transition={{ duration: 0.5 }}
    >
      {isOpen ? "Open" : "Closed"}
    </motion.div>
  );
};

1. Вариант анимации при наведении:

Вариант анимации при наведении вызывает анимацию, когда пользователь наводит курсор на элемент. Это отличный способ добавить интерактивные эффекты в пользовательский интерфейс. Вот пример:

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      whileHover={{ scale: 1.2 }}
    >
      Hover Me!
    </motion.div>
  );
};

1. Вариант анимации перетаскивания:

Вариант анимации перетаскивания позволяет сделать элемент перетаскиваемым с плавной анимацией. Он идеально подходит для создания перетаскиваемых компонентов, таких как слайдеры или перетаскиваемые карточки. Вот пример:

import { motion } from "framer-motion";
const MyComponent = () => {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
    >
      Drag Me!
    </motion.div>
  );
};

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

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