Как добавить анимацию в ваши приложения React с помощью Framer Motion

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

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

Framer Motion — это библиотека, созданная для React, которая упрощает анимацию компонентов.

Framer Motion использует компонент движения для анимации. Каждый элемент HTML/SVG имеет эквивалентный компонент движения, содержащий реквизиты для жестов и анимации. Например, обычный HTML-div выглядит так:

А эквивалент Framer Motion выглядит так:

Компоненты движения поддерживаютоживлять prop, который запускает анимацию при изменении его значений. Для сложных анимаций используйтеиспользоватьAnimateкрючок с областью действия ref.

Прежде чем использовать Framer Motion в своем проекте, вам необходимо установить на свой компьютер среду выполнения Node.js и менеджер пакетов Yarn, а также понять, что такое React и как его использовать.

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

Откройте терминал и запустите:

Когда вы открываетелокальный хост: 5173в своем браузере вы увидите это:

Теперь вы можете создать свою первую простую анимацию — кнопку, которая увеличивается при наведении и сжимается, когда курсор уходит.

Откройsrc/App.jsx файл в редакторе кода. Этот файл содержит функциональный компонент, который возвращает фрагмент React. ИмпортируйтеКнопкакомпонент, затем визуализируйте его, передавтекстопора:

Далее отредактируйтеКнопка.jsxфайл и импортируйтедвижениеполезность отФреймер-движение:

Теперь замените штатныйкнопкаэлемент сдвижение.[элемент] компонент. В этом случае используйтекнопка движениякомпонент.

Затем добавьтепри наведениижест и передайте объект значений, который Framer Motion должен анимировать, когда пользователь наводит курсор на кнопку.

Кнопка теперь будет анимироваться, когда вы наведете на нее указатель мыши или выйдете из нее:

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

Затем попробуйте что-то более сложное: анимируйте модальное окно. ВФон.jsx, импортируйте утилиту движения и создайте функциональный компонент с помощьюпо щелчкуидети реквизит. Вернутьдвижение.divкомпонент с классом «фон» ипо щелчкуслушатель в JSX.

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

Добавлятьпо щелчкуидетиреквизит длядвижение.divи установите длительность перехода на 0,34 секунды:

Фонкомпонент является оберткой дляМодальный компонент. Щелчок по фону закрывает модальное окно. ВМодал.jsx, Импортироватьдвижение и компонент «Фон». Функциональный компонент по умолчанию принимает реквизиты:closeМодальныйитекст . Создайте вариантную переменную как объект.

Верните компонент motion.div, обернутый компонентом Backdrop, со свойством «variants», указывающим на объект вариантов. Варианты — это набор предопределенных состояний анимации, в которых может находиться компонент.

Далее вам необходимо добавить функцию отображения модального окна, когда пользователь нажимает кнопку. Открой