UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Встречайте Framer Motion, библиотека с открытым исходным кодом
Редакція
Редакція

Опубліковано

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

Этот переход может быть дополнительно настроен в 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)