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

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

Framer Motion предоставляет простой способ добавления анимации к вашим компонентам. Вот пример анимации элемента div:

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

В этом фрагменте кода элемент div начинается с начальной непрозрачности, равной 0, и плавно переходит к непрозрачности, равной 1, в течение 1 секунды.

2. Эффекты перехода:

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

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

В этом примере элемент div увеличивается на 20 % при наведении на него курсора, создавая интерактивный эффект.

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

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

import { motion } from "framer-motion";
const App = () => {
  return (
    <motion.button
      animate={{
        scale: [1, 1.2, 0.8, 1.2, 1],
        rotate: [0, 180, 360, 180, 0]
      }}
      transition={{ duration: 2, repeat: Infinity }}
    >
      Animate Me!
    </motion.button>
  );
};

В этом фрагменте кода кнопка анимируется при различных масштабах и поворотах, создавая эффект циклической анимации.

4. Жесты и перетаскивание:

Framer Motion обеспечивает встроенную поддержку жестов и перетаскивания. Вот пример перетаскивания рамки:

import { motion } from "framer-motion";
const App = () => {
  return (
    <motion.div drag>
      Drag me!
    </motion.div>
  );
};

В этом примере элемент div можно перетаскивать по экрану с помощью касания или мыши.

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

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