Встроенные анимации

Chakra UI предоставляет удобные инструменты для создания анимаций без необходимости подключения сторонних библиотек. Основным механизмом работы с анимациями является компонент motion из интеграции с библиотекой Framer Motion, который позволяет легко добавлять эффекты появления, трансформации, перемещения и изменения прозрачности.

Использование компонента motion

Для начала нужно импортировать motion:

import { chakra, shouldForwardProp } from "@chakra-ui/react";
import { motion, isValidMotionProp } from "framer-motion";

const MotionBox = chakra(motion.div, {
  shouldForwardProp: (prop) => isValidMotionProp(prop) || shouldForwardProp(prop),
});

Здесь создаётся MotionBox — обёртка над обычным Box, которая поддерживает все свойства Chakra UI и одновременно свойства анимаций Framer Motion, такие как initial, animate, exit и whileHover.

Простейшие анимации появления

Для анимации появления элементов используется сочетание свойств initial и animate:

<MotionBox
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
  bg="teal.500"
  w="200px"
  h="100px"
/>

Разбор кода:

  • initial задаёт исходное состояние компонента перед анимацией.
  • animate определяет конечное состояние.
  • transition управляет временем и типом перехода.
  • Свойства Chakra UI (bg, w, h) работают одновременно с анимацией.

Анимации при наведении

Chakra UI позволяет легко комбинировать стандартные стили с анимациями при событиях, таких как hover:

<MotionBox
  whileHover={{ scale: 1.05, rotate: 2 }}
  transition={{ type: "spring", stiffness: 300 }}
  bg="purple.400"
  p={6}
  borderRadius="md"
>
  Hover Me
</MotionBox>

Особенности:

  • whileHover автоматически активируется при наведении курсора.
  • Использование spring создаёт более живую анимацию с эффектом упругости.

Переходы между состояниями с animate

Для сложных интерфейсов важно плавно менять состояния компонентов:

<MotionBox
  initial={{ x: -100, opacity: 0 }}
  animate={{ x: isOpen ? 0 : -100, opacity: isOpen ? 1 : 0 }}
  transition={{ duration: 0.3 }}
  bg="blue.300"
  w="300px"
  h="150px"
/>

Ключевые моменты:

  • Свойство animate может быть динамическим, управляться состояниями React.
  • Позволяет создавать слайдеры, модальные окна, раскрывающиеся панели с минимальным кодом.

Использование variants для повторного использования анимаций

Для больших проектов полезно вынести анимации в объект variants:

const boxVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
};

<MotionBox
  variants={boxVariants}
  initial="hidden"
  animate="visible"
  bg="green.400"
  w="250px"
  h="120px"
/>

Преимущества:

  • Анимации можно переиспользовать для нескольких компонентов.
  • Упрощает поддержку и изменение эффектов.

Анимации списка и стеки элементов

Chakra UI интегрируется с AnimatePresence для управления входом и выходом элементов:

import { AnimatePresence } from "framer-motion";

<AnimatePresence>
  {items.map((item) => (
    <MotionBox
      key={item.id}
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.3 }}
      bg="orange.300"
      m={2}
      p={4}
      borderRadius="md"
    >
      {item.text}
    </MotionBox>
  ))}
</AnimatePresence>

Особенности:

  • AnimatePresence обеспечивает плавное исчезновение элементов при удалении из массива.
  • Комбинация с Chakra UI позволяет легко применять стили и отступы к каждому элементу.

Встроенные хуки для анимаций

Chakra UI также предлагает хуки для упрощённых анимаций, например useDisclosure в сочетании с MotionBox:

import { useDisclosure, Button } from "@chakra-ui/react";

const { isOpen, onToggle } = useDisclosure();

<Button onCl ick={onToggle}>Toggle Box</Button>

<MotionBox
  initial={{ height: 0, opacity: 0 }}
  animate={{ height: isOpen ? "100px" : 0, opacity: isOpen ? 1 : 0 }}
  overflow="hidden"
  bg="cyan.300"
  w="200px"
/>

Преимущества:

  • Простое управление показом/скрытием компонентов.
  • Позволяет создавать аккордеоны, раскрывающиеся панели и тултипы с плавной анимацией.

Настройка easing и кастомных кривых

Framer Motion поддерживает различные кривые ускорения через transition:

<MotionBox
  initial={{ x: -50 }}
  animate={{ x: 0 }}
  transition={{ duration: 0.7, ease: [0.42, 0, 0.58, 1] }}
  bg="pink.400"
  w="220px"
  h="100px"
/>
  • Массив [0.42, 0, 0.58, 1] задаёт кастомную кривую Безье.
  • Можно использовать стандартные типы linear, easeIn, easeOut, easeInOut.

Комбинация с responsive стилями

Chakra UI позволяет одновременно использовать анимации и адаптивные стили:

<MotionBox
  initial={{ scale: 0.8 }}
  animate={{ scale: 1 }}
  transition={{ duration: 0.4 }}
  w={["100px", "150px", "200px"]}
  h={["100px", "150px", "200px"]}
  bg="yellow.300"
/>
  • Анимация будет корректно работать на всех точках останова.
  • Поддержка массива размеров и цветов делает интерфейсы полностью адаптивными.

Заключение по встроенным анимациям

Chakra UI предоставляет мощный и простой способ анимировать элементы, объединяя:

  • Плавные переходы (transition, ease, spring).
  • Управление состоянием (animate, initial, exit).
  • Переиспользуемые варианты (variants).
  • Интеграцию с компонентами Chakra UI и адаптивными стилями.

Такой подход позволяет создавать динамичные интерфейсы с минимальным количеством кода и высокой читаемостью.

Оглавление