framer motion 1160x620 - Встречайте Framer Motion, библиотека с открытым исходным кодом

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 будет автоматически анимироваться с быстрым переходом.

<motion.div animate={{ x: 100 }} />

Этот переход может быть дополнительно настроен в Popmotion с использованием знакомых анимаций tween, spring и inertia.

<motion.div animate={{ x: 100 }} transition={{ duration: 2 }} />

Открыть пример в CodeSandbox 

Ключевые фреймы

Каждое значение в animate также может быть установлено в виде массива для определения ключевых фреймов, через которые Motion будет последовательно анимировать.

<motion.div animate={{ scale: [1, 2, 1] }} />

Открыть пример в CodeSandbox ›

Variants

Framer Motion также сохраняет самую мощную функцию Pose – возможность управлять сложными анимациями на больших деревьях React, просто переключая один параметр (prop). Определяя variants для набора компонентов, добавление метки варианта к animate распространит эту анимацию на все дочерние элементы.

Открыть пример в CodeSandbox ›

Анимации жестов

Framer Motion также расширяет встроенную обработку событий в React, поддерживая распознавание жестов, наведения, касания и перетаскивания.

Мощные параметры while  позволяют компонентам motion временно анимироваться на новые позиции, когда жест активен.

<motion.a whileHover={{ scale: 1.1 }} />

Открыть пример в CodeSandbox 

Жест перетаскивания

Простой, но мощный API drag позволяет легко перетаскивать компонент по одной или обеим осям, определять эластичные границы и включать блокировку направления.

<motion.div drag=”x” />

Открыть пример в 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

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Крупнейший релиз Framer X15, производительность и стабильность

Улучшена производительность, плавный зуму, масштабирование графики и, более чем 150 улучшений рабочего процесса

Как начать использовать Sketch и Framer X. Руководство для начинающих

Это руководство расскажет, как создавать интерактивные прототипы, используя Framer X и Sketch

Как Dropbox использует Framer X и реальные данные для создания дизайна

С релизом Framer X наша команда решила перестроить Desktop Kit с нуля, используя реальные данные. Мы рады поделиться несколькими компонентами, которые мы создали в ходе первой недели наших экспериментов.