Узнайте, как добавить простую анимацию в свое приложение React с минимальными усилиями по написанию кода.
Анимация является важной частью почти каждого современного веб-приложения. Это также одна из самых сложных частей, чтобы сделать все правильно.
Framer Motion — это библиотека, созданная для React, которая упрощает анимацию компонентов.
Как работает Framer Motion
Framer Motion использует компонент движения для анимации. Каждый элемент HTML/SVG имеет эквивалентный компонент движения, который поддерживает жесты и анимацию. Например, обычный HTML div выглядит так:
<див>див>
В то время как эквивалент Framer Motion выглядит так:
<движение.div>движение.div>
Компоненты движения поддерживают оживлять prop, запускающий анимацию при изменении его значений. Для сложных анимаций используйте использоватьAnimate крючок с прицелом исх.
Анимация в Framer Motion
Прежде чем использовать Framer Motion в своем проекте, вам необходимо Среда выполнения Node.js и менеджер пакетов Yarn, установленный на вашем компьютере и понять, что такое React и как его использовать.
Вы можете просмотреть и загрузить исходный код этого проекта с его Репозиторий GitHub. Использовать стартовые файлы ветку в качестве начального шаблона, чтобы следовать этому руководству, или окончательные файлы ветка для полной демонстрации. Вы также можете увидеть проект в действии через этот живая демонстрация.
Откройте терминал и запустите:
git clone [email protected]: makeuseofcode/framer-motion-app.git
CD Framer-Motion-приложение
пряжа
пряжа разработчик
Когда вы открываете локальный: 5173 в вашем браузере вы увидите это:
Теперь вы можете создать свою первую простую анимацию, кнопку, которая увеличивается при наведении и сжимается, когда курсор уходит.
Открой источник/приложение.jsx файл в редакторе кода. Этот файл содержит функциональный компонент, который возвращает фрагмент React. Импортировать Кнопка компонент, затем визуализировать его, передавая в текст опора:
Анимированная кнопка</h4>
Наведите указатель мыши на кнопку, чтобы увидеть эффект</div>
Далее отредактируйте Кнопка.jsx файл и импортировать движение полезность от фреймер-движение:
Импортировать { движение } от"фреймер-движение"
Теперь замените штатный кнопка элемент с движение.[элемент] компонент. В этом случае используйте кнопка движения компонент.
Затем добавьте при наведении жест и передать объект значений, который Framer Motion должен анимировать, когда пользователь наводит курсор на кнопку.
шкала: 1.1 }}> {текст}
</motion.button>
Кнопка теперь будет анимироваться, когда вы наведете указатель мыши на нее или из нее:
Вам может быть интересно, почему эта демонстрация не использует CSS-анимации вместо. Framer Motion имеет преимущества перед CSS, поскольку он интегрируется с состоянием React и обычно приводит к более чистому коду.
Затем попробуйте что-то более сложное: анимацию модального окна. В Фон.jsx, импортируйте утилиту движения и создайте функциональный компонент с по щелчку и дети реквизит. Вернуть движение.div компонент с классом "фон" и по щелчку прослушиватель в JSX.
экспортпо умолчаниюфункцияФон() {
возвращаться (<>
</motion.div>
</>)
}
Затем добавьте три реквизита, а именно: исходный, оживить, и Выход. Эти реквизиты представляют исходное состояние компонента, состояние, в которое компонент должен быть анимирован, и состояние, в котором компонент должен находиться после анимации, соответственно.
Добавлять по щелчку и дети реквизит для движение.div и установите продолжительность перехода на 0,34 секунды:
экспортпо умолчаниюфункцияФон ({onClick, дети}){
возвращаться (<>
onClick={onClick}
имя_класса="фон"
инициал = {{ непрозрачность: 0, фонФильтр:"размытие (0px)" }}
анимировать={{ непрозрачность: 1, фонФильтр:"размытие (3,4 пикселя)" }}
выход={{ непрозрачность: 0, фонФильтр:"размытие (0px)"}}
переход={{
продолжительность: 0.34,
}}
>
{дети}
</motion.div>
</>)
}
Фон Компонент является оболочкой для Модальный компонент. Щелчок по фону закрывает модальное окно. В Modal.jsx, Импортировать движение и фоновый компонент. Функциональный компонент по умолчанию принимает реквизиты: closeModal и текст. Создайте вариантную переменную как объект.
константа варианты = {
исходный: {
у: "-200%",
непрозрачность: 1,
},
видимо: {
у: "50%",
переход: {
продолжительность: 0.1,
тип: "весна",
демпфирование: 32,
жесткость: 500
}
},
Выход: {
у: "200%",
}
}
Возвратите компонент motion.div, обернутый компонентом Backdrop, с реквизитом «variants», указывающим на объект вариантов. Варианты — это набор предопределенных состояний анимации, в которых может находиться компонент.
onClick={(e) => e.stopPropagation()}
имя_класса="модальный"
варианты={варианты}
начальный='исходный'
анимировать =«видимый»
выход='Выход'
>
{текст}
</motion.div>
</Backdrop>
Затем вам нужно добавить функциональность для отображения модального окна, когда пользователь нажимает кнопку. Открой App.jsx файл и импортировать использование состояния Реагирующий хук и Модальный компонент.
Импортировать { состояние использования } от"реагировать";
Импортировать Модальный от"./компоненты/модальный";
Затем создайте модальныйOpen состояние со значением по умолчанию, установленным на ЛОЖЬ.
константа [modalOpen, setModalOpen] = useState(ЛОЖЬ);
Далее определите функцию closeModal который устанавливает модальныйOpen к ложному.
функцияcloseModal() {
УстановитьМодалОткрыть(ЛОЖЬ)
}
В верхней части фрагмента React условно визуализируйте Модальный компонент и передать соответствующий текст опора с опорой closeModal.
{modalOpen && <Модальныйтекст=«Это модальная анимация с помощью Framer Motion»}
Затем, во втором раздел элемент, визуализировать кнопка элемент с обработчиком событий onClick, который устанавливает для modalOpen значение false.
Вы могли заметить, что React размонтирует модальный компонент из DOM без анимации выхода. Чтобы это исправить, вам понадобится AnimatePresence компонент. Импортировать AnimatePresence из фреймер-движение.
Импортировать {AnimatePresence} от'фреймер-движение';
Теперь поместите модальный компонент в компонент AnimatePresence и установите исходный свойство false и режим ждать".
ЛОЖЬ} режим="ждать">
{modalOpen && <Модальныйтекст=«Это модальная анимация с помощью Framer Motion»closeModal={closeModal} />}
</AnimatePresence> Компонент AnimatePresence позволяет завершить анимацию выхода до того, как React отключит ее от DOM.
Framer Motion может анимировать компоненты при прокрутке с помощью в то время какInView опора Открой ScrollElement.jsx, и импортируйте движение полезность. Изменять див к движение.div с классом "элемент прокрутки".
инициал = {{ непрозрачность: 0, шкала: 0, вращать: 14 }}
покаИнвиев={{ непрозрачность: 1, шкала: 1, вращать: 0 }}
переход={{ продолжительность: .8 }}
область просмотра = {{ один раз: истинный }}
имя_класса='элемент прокрутки'
>
Элемент прокрутки
</motion.div>
окно просмотра prop указывает на объект, который устанавливает один раз к истинный. Далее, в App.jsx файл, импортируйте ScrollElement компонент и определите переменную scrollElementCount, которая содержит целочисленное значение.
позволять ScrollElementCount=14;
Напоследок раздел элемент, создайте массив с определенной длиной, определяемой scrollElementCount который отображает каждый элемент массива и генерирует компонент с уникальным ключом на основе индекса я.
{[... Массив (scrollElementCount)].map((х, я) =><ScrollElementключ={я} />)}
Теперь, возвращаясь к браузеру, элементы должны анимироваться, когда вы прокручиваете их в поле зрения.
Альтернативы Framer Motion
Framer Motion — не единственная библиотека анимации на рынке. Если вам не нравится, как работает Framer Motion, вы можете попробовать другие библиотеки, такие как Реагировать Весна.
Вы также можете использовать анимацию CSS, которая изначально поддерживается всеми современными браузерами, но используемые методы могут быть сложными для изучения и настройки.
Улучшение взаимодействия с пользователем с помощью анимации
Каждый пользователь ожидает гладкой работы при использовании веб-приложения. Веб-сайт или приложение без анимации кажутся статичными и невосприимчивыми. Анимации улучшают взаимодействие с пользователем, потому что вы можете использовать их для обратной связи с пользователем, когда он выполняет определенное действие.
