Анимированные компоненты и интерполяция стилей

react-spring предоставляет анимированные версии всех элементов HTML: animated.div, animated.span, animated.img, animated.button и т. д. Это прямые замены обычных аналогов с одним важным отличием: они могут принимать объекты SpringValue в свойствах стиля.

Обычные элементы React получают стиль в виде простого объекта со статическими значениями. SpringValues — это специальные объекты, которые обновляются на каждом кадре анимации, не проходя через цикл повторной отрисовки React. Только компоненты animated.* умеют подписываться на обновления SpringValue и напрямую изменять стиль DOM, полностью обходя React ради максимальной производительности.

Применяйте значения пружины непосредственно как свойства стиля CSS у анимированных компонентов. Например: style={{ opacity: opacity, transform: transform }}, где opacity и transform — это SpringValues, возвращённые useSpring. animated.div считывает эти значения на каждом шаге RAF (requestAnimationFrame) и применяет их к узлу DOM.

У SpringValues есть метод .to() для преобразования результата. Распространённый вариант использования — преобразовать числовое значение пружины в строку CSS: x.to(v => "translateX(" + v + "px)"). Функция получает текущее числовое значение и возвращает преобразованный результат, который применяется как стиль.

Метод .to() также принимает входные массивы для отображения диапазонов: x.to([0, 1], ["#ff0000", "#00ff00"]) преобразует значение пружины из диапазона [0, 1] в диапазон цветов от красного к зелёному. Так числовые значения пружины преобразуют в цвета, строки или любые значения, которые нельзя представить обычным числом.

Если пружина одновременно отслеживает несколько значений, их можно интерполировать вместе. Для пружины, отслеживающей { x, y }, можно написать: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). Обратный вызов .to() получает все значения в том порядке, в котором они указаны в конфигурации пружины.

Вы можете обернуть собственные компоненты с помощью animated(): const AnimatedCard = animated(Card). Обёрнутый компонент должен принимать свойство style и передавать его элементу DOM. Теперь AnimatedCard может получать SpringValues в свойстве стиля так же, как animated.div.

Сложные анимации часто объединяют несколько пружин. Например, в анимации появления одна пружина может отвечать за непрозрачность, а другая — за вертикальное положение. Применить обе к одному animated.div можно так: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

Важнейшая особенность react-spring с точки зрения производительности заключается в том, что обновления анимированных значений обходят механизм согласования React. Пока пружина анимируется, React НЕ выполняет повторную отрисовку компонента на каждом кадре. Вместо этого компонент animated.* напрямую обновляет свойство стиля узла DOM в каждом обратном вызове requestAnimationFrame, благодаря чему возможна анимация с частотой 60 кадров в секунду без дополнительных затрат React.

Распространённые варианты анимации с интерполяцией: плавное появление при монтировании с помощью opacity.to([0, 1], [0, 1]), увеличение масштаба при наведении с помощью scale.to(s => "scale(" + s + ")") и поворот при переключении с помощью rotation.to(r => "rotate(" + r + "deg)"). Объединение этих преобразований создаёт составные эффекты.

По умолчанию .to() с массивами диапазонов может продолжать вычисления за пределами заданного диапазона. Управлять этим можно с помощью параметра экстраполяции: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) не позволяет результату опуститься ниже 0 или подняться выше 100, даже если пружина выходит за границы. Это полезно для индикаторов выполнения и ограниченных анимаций.

Почему при применении значений пружины необходимо использовать animated.div, а не обычный div?

animated.div, animated.span и animated(CustomComponent) — это готовые замены, принимающие SpringValues в свойствах стиля. Метод .to() интерполирует значения пружины: преобразует их в строки CSS, диапазоны цветов или любой другой формат результата. Несколько пружин естественным образом объединяются в одном элементе. Главное преимущество с точки зрения производительности: обновления пружин обходят повторную отрисовку React, напрямую изменяя стили DOM в обратных вызовах RAF.