Framer Motion – это новая готовая к работе веб-моушен-библиотека React с открытым исходным кодом.
С точки зрения прототипирования, Framer всегда идеально подходил для разработки продвинутых анимаций и жестов. В основе опыта нашего продукта лежит способность изобретать и повторять различные взаимодействия от скролла и постраничного просмотра до основанных на физике анимаций и жестов, основанных на прикосновениях. Эта беспрецедентная гибкость обеспечивается Framer Motion – нашей библиотекой JavaScript для готовых анимаций. И сегодня мы делаем Framer Motion доступным широкому сообществу дизайнеров, в качестве библиотеки анимации с открытым исходным кодом.
Framer Motion необычайно функционален, потому что решает еще одну важную проблему дизайна – передачу проекта разработчикам. Часто дизайнеры тратят не один день, совершенствуя анимации, только чтобы обнаружить, что мелкие детали теряются во время разработки. Используя одну и ту же библиотеку анимации при прототипировании и разработке, вы получите более надежный и эффективный способ, гарантирующий, что ваши анимации всегда будут неизменны.
Стоит также отметить, что Framer Motion является преемником популярной библиотеки Pose, которая имеет около 80 тыс. загрузок в месяц на NPM. Он также основан на Popmotion – библиотеке, которая тестировалась почти четыре года. Если вы уже используете Pose, то Framer Motion предлагает более простой и гибкий API с примерно одинаковым размером пакета.
В этой статье мы познакомимся с основными функциями Framer Motion.
Простые анимации
Анимация управляется универсальным параметром animate. Он может обслуживать самые простые и передовые варианты использования.
Он может принимать объект значений, который при изменении компонента motion будет автоматически анимироваться с быстрым переходом.
Этот переход может быть дополнительно настроен в Popmotion с использованием знакомых анимаций tween, spring и inertia.
Открыть пример в CodeSandbox ›
Ключевые фреймы
Каждое значение в animate также может быть установлено в виде массива для определения ключевых фреймов, через которые Motion будет последовательно анимировать.
Открыть пример в CodeSandbox ›
Variants
Framer Motion также сохраняет самую мощную функцию Pose – возможность управлять сложными анимациями на больших деревьях React, просто переключая один параметр (prop). Определяя variants для набора компонентов, добавление метки варианта к animate распространит эту анимацию на все дочерние элементы.
Открыть пример в CodeSandbox ›
Анимации жестов
Framer Motion также расширяет встроенную обработку событий в React, поддерживая распознавание жестов, наведения, касания и перетаскивания.
Мощные параметры while позволяют компонентам motion временно анимироваться на новые позиции, когда жест активен.
Открыть пример в CodeSandbox ›
Жест перетаскивания
Простой, но мощный API drag позволяет легко перетаскивать компонент по одной или обеим осям, определять эластичные границы и включать блокировку направления.
Открыть пример в CodeSandbox ›
MotionValues
Framer Motion использует MotionValues для отслеживания состояния и скорости каждого изменяющегося значения без запуска рендеринга React. Он создает их автоматически.
Но для расширенного контроля вы можете сами создавать MotionValues и формировать декларативные отношения между ними с помощью хуков useTransform и useSpring. В сочетании с анимацией, жестами и поддержкой SVG Framer Motion может создавать динамические эффекты с помощью очень небольшого кода.
Открыть пример в CodeSandbox ›
Готов к работе
Может быть Framer Motion и новая библиотека, но он готов к работе в Интернете. Он работал во Framer X с начала бета-тестирования Playground в этом году.
С Framer Motion мы попытались создать API, который дизайнеры полюбят для прототипирования, а разработчики захотят использовать в производстве. Поэтому мы постарались добавить подробную документацию, чтобы дизайнеры могли начать использовать приложение уже сегодня.
Еще больше примеров и информации о расширенных функциях Motion, таких как рендеринг на стороне сервера, поддержка переменных CSS, переходы макета, можно найти на новой целевой странице и в соответствующих документах.
Перевод статьи Matt Perry
Топ коментарі (0)