Содержание
Добавление плавных и профессиональных анимаций в пользовательские интерфейсы может оказаться непростой задачей. В этом уроке я покажу вам, как использовать Framer Motion в ваших приложениях React для создания красивых анимаций.
Это руководство идеально подходит, если вы новичок в Framer Motion или просто хотите, чтобы ваши анимации выделялись. Мы вместе пройдем через все шаги, чтобы облегчить добавление красивых, профессиональных штрихов к вашим проектам. Давайте начнем!
Что мы будем создавать?
В этом уроке я шаг за шагом проведу вас через реализацию полноценного компонента анимированной боковой панели на React и Framer Motion.
Вы также можете ознакомиться с этим подробным видеоуроком, который я создал на основе этой статьи.
Анимированный компонент сайдбара
Начало работы
Чтобы начать работу с этим уроком, я подготовил для вас шаблонный проект, который содержит все необходимые зависимости, так что вам не нужно настраивать свой проект с нуля.
Просто клонируйте starter boilerplate из репозитория GitHub, а затем следуйте руководству.
- Starter Boilerplate: View on GitHub
- Финальная версия: Посмотреть на GitHub
Что такое Framer Motion?
Framer Motion - это простая, но мощная библиотека анимации для React. С помощью Framer Motion вы сможете без труда добавлять плавные и профессиональные анимации и взаимодействия в свои React-проекты.
Framer Motion позволяет создавать такие вещи, как плавно скользящие кнопки, исчезающий текст или даже сложные анимации всего несколькими простыми строками кода.
Возможно, вам будет интересно узнать, что Framer Motion - это основа Framer, популярного инструмента для профессиональных веб-дизайнеров. Именно ему доверяют эксперты в создании крутых анимаций, которые часто можно увидеть на действительно качественных сайтах.
Как создать простую навигационную панель в React
В этом разделе вы создадите простую навигационную панель. Просто откройте файл components/Navigation и вставьте следующий код:
//📁components/Navigation
import { Sidebar } from './Sidebar';
import { FiGithub } from 'react-icons/fi';
export const Navigation = () => {
return (
<nav className="flex items-center justify-between border-b-2 border-zinc-800 px-5 py-2">
<div className="flex items-center gap-3">
<Sidebar />
Анимированная боковая панель
</div>
<a
className="text-orange-400 bg-orange-700/20 flex items-center gap-2 rounded-xl px-4 py-2"
href=""
>
<FiGithub className="text-lg" />
Исходный код
</a>
</nav>
);
};
Этот компонент отображает панель навигации на веб-странице. Внутри этой навигационной панели есть две основные секции. Первая секция включает в себя компонент Sidebar. Вторая секция содержит элемент ссылки, стилизованный под кнопку с иконкой.
Этот код, по сути, устанавливает базовый интерфейс навигации с некоторыми предопределенными стилями для приложения React.
Как создать простой компонент боковой панели в React
В этом разделе вы создадите простой компонент боковой панели в React. Прежде всего, откроем components/Sidebar и добавим следующий код:
//📁components/Sidebar
export const Sidebar = () => {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useClickAway(ref, () => setOpen(false));
const toggleSidebar = () => setOpen((prev) => !prev);
return (
<>
<кнопка
onClick={toggleSidebar}
className="rounded-xl border-2 border-zinc-800 p-3"
aria-label="toggle sidebar"
>
<GiHamburgerMenu />
</button>
{ open && (
<>
<div
aria-hidden="true"
className="fixed bottom-0 left-0 right-0 top-0 z-40 bg-[rgba(0,0,0,0.1)] backdrop-blur-sm"
></div>
<div
className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full max-w-xs border-r-2 border-zinc-800 bg-zinc-900"
ref={ref}
aria-label="Sidebar"
>
<div className="flex items-center justify-between border-b-2 border-zinc-800 p-5">
<span>Welcome</span>
<кнопка
onClick={toggleSidebar}
className="rounded-xl border-2 border-zinc-800 p-3"
aria-label="закрыть сайдбар"
>
<AiOutlineRollback />
</button>
</div>
<ul>
{items.map((item, idx) => {
const { title, href, Icon } = item;
return (
<li key={title}>
<a
onClick={toggleSidebar}
href={href}
className="flex items-center justify-between gap-5 border-b-2 border-zinc-800 p-5 transition-all hover:bg-zinc-900"
>
<span>{title}</span>
<div>
<Icon className="text-2xl" />
</div>
</a>
</li>
);
})}
</ul>
</div>
</>
)}
</>
);
};
const items = [
{ title: 'Home', Icon: BiHomeSmile, href: '#' }
{ title: 'About', Icon: BiUser }
{ title: 'Contact', Icon: HiOutlineChatBubbleBottomCenterText, href: '#' }
{ title: 'Настройки', Icon: FiSettings, href: '#' },
{ title: 'Магазин', Icon: FiShoppingCart, href: '#' }
];
Этот компонент создает сворачиваемое меню навигации в боковой панели.
При нажатии на кнопку боковой панели она либо открывается, либо закрывается. Внутри боковой панели находятся такие пункты меню, как Дом, Об информации, Контакты и так далее, представленные в виде иконок.
При нажатии на любой из этих пунктов выполняется действие, например, переход на другую страницу.
Компонент также обрабатывает различные взаимодействия, например, щелчок за пределами боковой панели для ее закрытия.
В целом, этот компонент создает функциональное и интерактивное боковое меню для веб-приложения. Вот как выглядит ваша боковая панель на данный момент:
Компонент боковой панели
Хотя эта боковая панель отлично функционирует, вы можете заметить, что в ней нет анимации. Теперь давайте интегрируем Framer Motion и включим в боковую панель плавную анимацию.
Как анимировать React-компоненты с помощью Framer Motion
Теперь, когда у вас есть функциональная боковая панель, давайте улучшим ее с помощью анимации, чтобы добавить немного изюминки. Откройте components/Sidebar и добавьте следующий код:
import { useRef, useState } из 'react';
import { GiHamburgerMenu } from 'react-icons/gi';
import { AnimatePresence, motion } from 'framer-motion';
import { useClickAway } from 'react-use';
import { AiOutlineRollback } from 'react-icons/ai';
import { BiHomeSmile, BiUser } from 'react-icons/bi';
import { HiOutlineChatBubbleBottomCenterText } from 'react-icons/hi2';
import { FiSettings, FiShoppingCart } from 'react-icons/fi';
export const Sidebar = () => {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useClickAway(ref, () => setOpen(false));
const toggleSidebar = () => setOpen((prev) => !prev);
return (
<>
<кнопка
onClick={toggleSidebar}
className="rounded-xl border-2 border-zinc-800 p-3"
aria-label="toggle sidebar"
>
<GiHamburgerMenu />
</button>
<AnimatePresence mode="wait" initial={false}>
{открыть && (
<>
<motion.div
{...framerSidebarBackground}
aria-hidden="true"
className="fixed bottom-0 left-0 right-0 top-0 z-40 bg-[rgba(0,0,0,0.1)] backdrop-blur-sm"
></motion.div>
<motion.div
{...framerSidebarPanel}
className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full max-w-xs border-r-2 border-zinc-800 bg-zinc-900"
ref={ref}
aria-label="Sidebar"
>
<div className="flex items-center justify-between border-b-2 border-zinc-800 p-5">
<span>Welcome</span>
<кнопка
onClick={toggleSidebar}
className="rounded-xl border-2 border-zinc-800 p-3"
aria-label="закрыть сайдбар"
>
<AiOutlineRollback />
</button>
</div>
<ul>
{items.map((item, idx) => {
const { title, href, Icon } = item;
return (
<li key={title}>
<a
onClick={toggleSidebar}
href={href}
className="flex items-center justify-between gap-5 border-b-2 border-zinc-800 p-5 transition-all hover:bg-zinc-900"
>
<motion.span {...framerText(idx)}>{title}</motion.span>
<motion.div {...framerIcon}>.
<Icon className="text-2xl" />
</motion.div>
</a>
</li>
);
})}
</ul>
</motion.div
</>
)}
</AnimatePresence>
</>
);
};
const items = [
{ title: 'Home', Icon: BiHomeSmile, href: '#' }
{ title: 'About', Icon: BiUser }
{ title: 'Contact', Icon: HiOutlineChatBubbleBottomCenterText, href: '#' }
{ title: 'Настройки', Icon: FiSettings, href: '#' },
{ title: 'Магазин', Icon: FiShoppingCart, href: '#' }
];
const framerSidebarBackground = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0, transition: { delay: 0.2 } },
переход: { продолжительность: 0.3 },
};
const framerSidebarPanel = {
initial: { x: '-100%' },
animate: { x: 0 },
exit: { x: '-100%' },
transition: { duration: 0.3 },
};
const framerText = (delay) => {
возврат {
initial: { opacity: 0, x: -50 },
animate: { opacity: 1, x: 0 },
transition: {
задержка: 0.5 + delay / 10,
},
};
};
const framerIcon = {
initial: { scale: 0 },
animate: { scale: 1 },
переход: {
тип: 'пружина',
жесткость: 260,
демпфирование: 20,
задержка: 1.5,
},
};
Теперь давайте пройдемся по изменениям, которые вы только что добавили в компонент боковой панели:
- **
motionиз Framer Motion**:motion- это элемент, предоставляемый библиотекой Framer Motion. Он используется для обертывания других компонентов или элементов, чтобы включить эффекты анимации. В этом коде мы использовали его для анимации различных элементов боковой панелибар, например, фоновые наложения и иконки. - **
AnimatePresenceиз Framer Motion**:AnimatePresence- это компонент из Framer Motion, который помогает нам анимировать компоненты, когда они монтируются или демонтируются. Он используется для обертывания элементов, которые могут появляться или исчезать динамически. В этом коде мы использовали его для обработки анимации при открытии или закрытии боковой панели. - Анимационные объекты:
framerSidebarBackground- Этот объект содержит свойства, которые определяют, как анимируется фоновый слой боковой панели. У него есть три состояния: начальное (когда он не виден), анимированное (когда он полностью виден) и выход (когда он исчезает).opacityиспользуется для управления прозрачностью оверлея.transitionопределяет, как анимация переходит из одного состояния в другое, включая продолжительность анимации и задержку. framerSidebarPanel: Этот объект определяет анимацию самой панели боковой панели, управляя ее скольжением в поле зрения.xиспользуется для установки горизонтального положения боковой панели. Как иframerSidebarBackground, он определяет начальное, анимационное и конечное состояния, а также свойства перехода.framerTextиframerIcon: Эти объекты определяют анимацию для текста и иконок в элементах боковой панели. Они управляют такими свойствами, как непрозрачность, положение (x) и масштаб, чтобы создать плавные переходы и эффекты.
Эти объекты анимации обеспечивают структурированный способ определения того, как различные элементы боковой панели должны анимироваться при появлении или исчезновении. Они используют комбинацию таких свойств, как непрозрачность, положение и масштаб, чтобы анимировать компоненты React.
Окончательный результат
Поздравляем! Вы успешно оживили боковую панель с помощью React и Framer Motion. 🎉
Заключение
В этом уроке вы узнали, как создать полностью анимированную боковую панель с помощью Framer Motion.
Теперь вы можете добавлять плавные и профессиональные анимации в свои приложения React.
Возможности для создания впечатляющих и сложных анимаций с помощью Framer Motion безграничны.
Не стесняйтесь демонстрировать свои проекты на Twitter with me - я буду рад увидеть, как ваши творческие идеи воплощаются в жизнь!