От основ до сложной оркестрованной анимации
Framer-motion - это библиотека, которая поддерживает анимацию во Framer, и теперь она доступна как независимый пакет, который мы можем использовать в приложениях React. Он имеет очень простой декларативный API, который упрощает создание и оркестровку сложных анимаций с минимальным объемом кода. В этой статье мы начнем с самых простых анимаций и постепенно перейдем к более продвинутым.
Примечание. Примеры анимации в статье могут выглядеть некорректно из-за низкой частоты кадров изображений в формате GIF. Будьте уверены, настоящая анимация гладкая. Вы можете поиграть с ними в песочнице.
Настраивать
Мы можем начать с framer-motion, просто установив его с помощью команды yarn add framer-motion.
Чтобы анимировать элементы, нам нужно отказаться от примитивных элементов HTML (div, span, path и т. Д.) В пользу их «наполненных движением» аналогов - motion.div, motion.span, motion.path и т. Д. Эти элементы предоставляют свойства, которые мы ' Вам нужно будет добавить нашу анимацию.
Сделайте так, чтобы все двигалось
Чтобы создать простейшую анимацию, мы можем указать свойство animate, которое принимает объект со свойствами CSS, которые мы хотим анимировать. Вот как мы можем анимировать непрозрачность и цвет фона div:
Свойства, которые мы передаем animate, представляют конечное состояние анимации. Framer-motion будет определять начальное состояние на основе указанных свойств CSS или их значений по умолчанию. Например, непрозрачность по умолчанию для элементов CSS равна 1 (даже если мы не устанавливаем ее явно), поэтому framer-motion знает, как анимировать ее до 0.5.
Мы также можем установить начальные значения анимируемых свойств CSS, используя initial prop. Он также принимает объект со свойствами CSS, которые сообщают framer-motion, какими должны быть начальные значения. В приведенном ниже примере мы исчезаем в прямоугольнике за счет анимации свойств y и opacity:
Стоит отметить, что свойство y является особенным - это не настоящее свойство CSS, но framer-motion понимает его. Существует множество свойств, связанных с CSS transform, которые имеют ярлыки в framer-motion, поэтому, когда мы изменяем свойство y, мы фактически применяем анимацию к свойству transform: translateY(). Точно так же есть scale, rotate, scaleX, scaleY и некоторые другие свойства, полный список вы можете найти здесь.
Анимация изменений состояния
Анимации, которые мы сделали до сих пор, запускаются только при монтировании компонентов. Теперь давайте посмотрим, как мы можем анимировать элементы при изменении какого-либо внутреннего состояния.
Мы можем установить для свойства animation разные значения в зависимости от внутреннего состояния, и framer-motion будет анимировать между этими значениями при изменении состояния:
Обратите внимание, что компонент повторно визуализируется только при изменении состояния, а не на каждом кадре анимации, что делает анимацию очень эффективной.
Варианты
Настоящая сила кадра-движения заключается в использовании вариантов. Давайте начнем с изучения того, как мы можем переписать предыдущий пример, чтобы использовать варианты.
Мы начнем с извлечения встроенного определения анимируемых свойств из animate prop в отдельный объект. Этот объект будет содержать пары ключ-значение, где ключи - это некоторые значимые имена, которые мы даем нашим анимируемым свойствам, а значения - это сами свойства. Затем мы можем передать этот объект вариантов в variants prop, а внутри animation мы можем переключать анимацию на основе названий строк, которые мы им дали:
Этот пример работает, но не очень полезен. Сила вариантов заключается в оркестровке сложных анимаций по всему дереву компонентов, и чтобы убедиться в этом, нам понадобится пример немного большего размера.
В компоненте ниже у нас есть контейнер div, внутри которого находятся три дочерних div. Контейнер div использует ту же onClick анимацию, которую мы видели раньше:
Теперь мы можем анимировать дочерние элементы одновременно с родительскими, установив их собственные объекты вариантов. Когда описательные имена дочерних анимаций совпадают с именами родительской, дочерние анимации будут запускаться одновременно с родительской анимацией.
Обратите внимание, как варианты container и box имеют одинаковые ключи active и disabled:
Варианты настройки
Варианты также позволяют нам оркестровать дочернюю анимацию. Мы можем сделать это, предоставив свойство transition внутри объекта анимации.
Например, мы можем установить свойство staggerChildren children, которое указывает задержку в секундах между дочерними анимациями:
Обратите внимание, что переход применяется только тогда, когда мы переходим в данный вариант. Поскольку мы определили свойство transition внутри варианта active, постепенная анимация применяется только при переходе от disabled к active, но не при переходе от active к disabled.
По умолчанию варианты начинают анимировать родительский элемент и его дочерние элементы одновременно. Мы можем контролировать это поведение, используя свойство when. Мы можем установить его на beforeChildren, чтобы родительский элемент был анимирован первым, или на afterChildren, чтобы родительский элемент анимировался после его дочерних элементов:
В этой конфигурации родительский div сначала меняет цвет фона, а затем дочерние элементы вращаются с задержкой в шахматном порядке.
Есть намного больше свойств вариантов, которыми мы можем управлять - задержки анимации, направление смещения и т. Д. Вы можете найти больше информации о них в документации framer-motion.
Подведение итогов
В этой статье мы увидели, как легко анимировать компоненты React с помощью декларативного API, предоставляемого framer-motion. Однако мы коснулись лишь поверхности, так как framer-motion может намного больше - жесты, перетаскивание, работа с контурами SVG и многое другое. Если вам интересно узнать больше, ознакомьтесь с моим новым курсом, который охватывает все замечательные функции, которые может предложить framer-motion:
Первоначально опубликовано на https://konstantinlebedev.com.
