pmndrs/react-spring

Что это?

Ключевые возможности

• 01Анимации на основе пружин остаются плавными, даже если их прервать или изменить цель.
• 02Поддержка React DOM через @react-spring/web и react-three-fiber через @react-spring/three.
• 03Декларативное описание с помощью хуков, например useSpring, и императивное управление, когда оно нужно.
• 04Дополнительно доступны анимации с фиксированной длительностью и кривыми easing.
• 05Проект написан на TypeScript и опубликован в npm.

Сценарии использования

• Добавление переходов при прокрутке до элемента или его появлении, например плавного проявления React-компонентов.
• Анимация изменений состояния интерфейса: переключателей, раскрывающихся элементов или перетаскивания.
• Анимация 3D-объектов в сцене react-three-fiber.

Быстрый старт

1. 1

   Установите веб-цель

   npm install @react-spring/web
2. 2

   Импортируйте animated и useSpring и оберните элемент в animated.div

Темы

Частые вопросы

Что такое react-spring?

Библиотека анимации для React на основе физики пружин: позволяет декларативно или императивно анимировать DOM-элементы и элементы react-three-fiber. react-spring — библиотека анимации для React, в основе которой лежит физика пружин, а не фиксированная длительность. Вы задаёте целевые значения стилей компонента, а библиотека плавно анимирует переход от текущих значений к заданным. Если анимацию прервать или изменить её цель на ходу, движение останется плавным. Также доступны анимации с фиксированной длительностью и кривыми easing.

react-spring можно использовать бесплатно? Какая у него лицензия?

react-spring распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

react-spring всё ещё поддерживается?

Активно поддерживается. Последний коммит в react-spring — 1 нояб. 2026 г..

Для чего можно использовать react-spring?

Добавление переходов при прокрутке до элемента или его появлении, например плавного проявления React-компонентов. Анимация изменений состояния интерфейса: переключателей, раскрывающихся элементов или перетаскивания. Анимация 3D-объектов в сцене react-three-fiber.

Как установить react-spring?

Установите веб-цель: npm install @react-spring/web Импортируйте animated и useSpring и оберните элемент в animated.div

Где скачать react-spring?

Исходный код и инструкции по установке — на GitHub: https://github.com/pmndrs/react-spring