17.09.2024 в 18:37

Создание плавного анимированного меню с помощью React и Frame Motion

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

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

Приведем пример подхода к задаче.

Инструменты и библиотеки

Для создания плавной пошаговой анимации в меню мы использовали:

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

Настройка компонентов

AnimatedMenuButtons

Ключевой компонент – AnimatedMenuButtons, отвечает за рендеринг пунктов меню и управление их состоянием анимации. Рассмотрим ключевые части кода:

Свойства компонента:

Компонент AnimatedMenuButtons принимает три основных свойства:

menuItems: массив, содержащий информацию о каждом пункте меню.
MenuButton: пользовательский компонент React, используемый для рендеринга кнопок меню.

Фрагмент кода:

interface Props {
  menuItems: any[];
  MenuButton: React.FC<any>;
}

Настройка анимации

Для создания эффекта пошагового отображения пунктов меню, мы использовали возможности Framer Motion, такие как motion и stagger.

Функция staggerMenuItems задерживает появление каждого элемента списка на 0.24 секунды, создавая плавный и последовательный переход между ними.

const staggerMenuItems = stagger(0.24, { startDelay: 0.05 });

Это создает чистую анимацию с задержкой, где каждая кнопка плавно скользит в поле зрения после небольшой задержки и исчезает таким же образом при нажатии.

Добавление анимации с помощью Framer Motion

Управление анимациями

Для управления анимацией используется хук useAnimate из Framer Motion. Функция animate обрабатывает переходы для элементов меню. Изначально каждый элемент меню (li) имеет нулевую прозрачность и сдвинут на 200px вправо. Затем он анимируется до полной прозрачности и исходного положения.

animate(
  "li",
  { opacity: 1, translateX: 0 },
  {
    duration: 0.8,
    delay: staggerMenuItems,
  }
);

Анимация при клике

При клике на элемент меню, функция clickHandler запускает анимацию, где элемент плавно исчезает, скользя обратно вправо. Важно отметить, что эта анимация запускается до того, как событие onClick, предоставленное элементом меню, будет обработано.

const clickHandler = (onClick: () => void) => {
  animate(
    "li",
    { opacity: 0, translateX: 200 },
    {
      duration: 0.8,
      delay: staggerMenuItems,
      onComplete: () => {
        onClick && onClick();
      },
    }
  );
};

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

Отображение элементов меню

Каждый элемент меню отображается внутри компонента motion.li, где задано начальное состояние анимации. Событие onClick передается вниз, чтобы запустить функцию clickHandler, которая запускает анимацию перед выполнением логики клика по элементу.

<motion.li
  key={index}
  initial={{
    opacity: 0,
    translateX: 200,
  }}
  onClick={() => clickHandler(item.onClick)}
>
  <MenuButton {...item} />
</motion.li>

Итог: Framer Motion для интерактивного меню

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

Если вы хотите сделать ваш следующий проект более динамичным и привлекательным, настоятельно рекомендую попробовать Framer Motion. Эта библиотека невероятно универсальна, и всего несколькими строками кода вы можете превратить статичный интерфейс в динамичный и занимательный.

Полный код доступен по ссылке: https://codesandbox.io/p/sandbox/animated-menu-65zz88

Источник:

#JavaScript #React #TypeScript

Войти на сайт