Основы React Spring: хук useSpring

Традиционные CSS-анимации используют фиксированную длительность: анимация выполняется X миллисекунд и останавливается. react-spring анимирует значения с помощью физики пружины — движением управляют tension (жёсткость пружины) и friction (сопротивление, которое пружина оказывает движению). Благодаря этому движение естественно замедляется и выглядит более органично.

Хук useSpring({ from, to }) определяет анимируемое значение. Начальные значения задаются в from, а целевые — в to. useSpring возвращает объект springs, в котором каждый ключ является SpringValue — анимируемой версией соответствующего числового значения или цвета.

Параметр config управляет поведением пружины. tension (по умолчанию 170) отвечает за жёсткость: большие значения обеспечивают более резкое движение к цели. friction (по умолчанию 26) отвечает за затухание: при меньших значениях пружина сильнее колеблется. mass (по умолчанию 1) добавляет инерцию. Вместе эти три значения определяют характер анимации.

react-spring поставляется с предустановленными конфигурациями, которые можно использовать без дополнительной настройки: config.default — сбалансированная конфигурация общего назначения, config.gentle — медленная и плавная, config.wobbly создаёт колебания благодаря низкому трению, config.stiff — быстрая и резкая, а config.slow — очень постепенная. Импортируйте их из react-spring.

Значения, возвращаемые useSpring, являются объектами SpringValue, а не обычными числами. Их нельзя напрямую отображать в JSX или использовать в обычных объектах стилей. Их необходимо применять к компонентам animated.*, которые умеют подписываться на обновления пружины и эффективно применять их к DOM.

Передача immediate: true в useSpring заставляет значения мгновенно перейти к целевым, минуя анимацию пружины. Это полезно при первоначальной отрисовке, когда пользователь включил параметр «уменьшение движения» в настройках OS, или когда нужно программно сбросить положение без каких-либо визуальных перемещений.

Вы можете обратить анимацию пружины, меняя местами начальные и конечные значения. Распространённый шаблон — хранить логическое состояние переключателя и вычислять начальное и конечное значения на его основе: когда переключатель выключен, выполнять анимацию от 0 к 1; когда включён — от 1 к 0. react-spring плавно переключается между состояниями.

useSpring может возвращать массив из двух элементов: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). Объект api предоставляет программный контроль. Вызовите api.start({ x: 100 }), чтобы анимировать переход к новому значению, api.stop(), чтобы зафиксировать анимацию, и api.set({ x: 50 }), чтобы мгновенно перейти к значению без анимации.

Используйте декларативный вариант useSpring({ from, to }), когда анимация зависит от состояния React, которое обычным образом изменяется. Используйте императивный вариант с api.start(), когда нужно запускать анимации из обработчиков событий, жестов или асинхронных операций, не вызывая повторную отрисовку в React.

useSpring принимает обратные вызовы жизненного цикла в своей конфигурации. onStart срабатывает, когда пружина начинает анимироваться. onChange срабатывает на каждом кадре и получает текущее значение — это удобно для побочных эффектов, отслеживающих положение. onRest срабатывает, когда пружина достигает конечного значения и останавливается, сообщая о завершении анимации.

В декларативном варианте useSpring автоматически повторно запускает анимацию, когда переданные ему значения изменяются. Например, useSpring({ opacity: isVisible ? 1 : 0 }) будет анимировать непрозрачность при каждом изменении isVisible. Это самый простой способ связать анимации пружины с состоянием компонента.

Что в конфигурации react-spring контролируют параметры натяжение и трение?

react-spring выполняет анимацию на основе физики: натяжение (жёсткость), трение (затухание) и масса определяют движение. useSpring({ from, to }) возвращает объекты SpringValue, применяемые к компонентам animated.*. Предустановленные конфигурации (мягкая, упругая, жёсткая, медленная) подходят для распространённых случаев. Императивный интерфейс [springs, api] обеспечивает программный контроль с помощью api.start(), api.stop() и api.set(). onRest срабатывает, когда анимация останавливается.