Оркестрация анимации с помощью Framer Motion в React.js [Пошаговое руководство с примерами]
Framer Motion — это библиотека движений с открытым исходным кодом, которая управляет анимацией и жестами Framer X в проектах React.js. Если вы знакомы с Popmotion, Framer Motion является преемником популярной библиотеки анимации Pose. Обе библиотеки предоставляют декларативный API, который упрощает создание и оркестрацию анимаций в проектах React.js.
В этом руководстве я хочу продемонстрировать, как управлять анимацией с помощью Framer Motion в проектах React.js. Мы будем реализовывать анимацию декларативным и императивным способом. Результатом этого урока является макет с боковым меню, которое мы будем анимировать с помощью его элементов.
Начиная
Прежде чем мы начнем, мы должны немного знать Framer Motion API, который состоит из Framer API и Motion API. Основное различие между двумя API заключается в том, что в Framer Library основным строительным блоком является Frame, тогда как Motion использует motion компонентов. Компонент Frame всегда отображает компонент div, а компонент motion можно использовать для каждого допустимого элемента HTML и SVG.
Для получения более подробной информации вы можете проверить документацию Framer Motion. В этом сообщении блога я буду использовать компонент motion.
Для получения дополнительной информации нажмите здесь.
Первоначально опубликовано на https://andrejgajdos.com 12 января 2020 г.
