Repolode
提交项目
pmndrs

pmndrs/react-spring

基于弹簧物理的 React 动画库，支持 DOM 与 react-three-fiber 元素，可声明式或命令式使用。

在 GitHub 查看官网
Star
29,261
Fork
1,235
未关闭 Issue
79
最近提交
6天前

这是什么？

react-spring 是一个面向 React 的动画库，以弹簧物理为核心，而不是固定时长。开发者只需声明组件样式的目标值，库会基于弹簧模型从当前值平滑过渡到目标值，动画中途被打断或改变目标时也能保持连贯。需要固定时长和缓动曲线时，同样可以使用。

库按渲染目标分为不同包：@react-spring/web 通过 animated 包装组件为 React DOM 元素添加动画，@react-spring/three 则面向 react-three-fiber 场景。动画既可以用 useSpring 等 Hook 声明式编写，也可以在需要更细粒度控制时命令式地驱动。

项目使用 TypeScript 编写，通过 npm 发布。官方文档站提供每个 Hook 的在线示例，仓库中也有可在 CodeSandbox 中打开的演示。

核心功能

  • 01基于弹簧的动画，中途打断或改变目标时过渡依然连贯。
  • 02通过 @react-spring/web 支持 React DOM，通过 @react-spring/three 支持 react-three-fiber。
  • 03提供 useSpring 等声明式 Hook，也支持命令式控制。
  • 04可选的基于时长和缓动曲线的动画。
  • 05使用 TypeScript 编写，通过 npm 发布。

适用场景

  • 为 React 组件添加滚动进入或淡入过渡效果。
  • 为开关、展开收起或拖拽等界面状态变化添加动画。
  • 为 react-three-fiber 场景中的 3D 对象添加动画。

快速上手

  1. 1

    安装 Web 版本

    npm install @react-spring/web
  2. 2

    导入 animated 和 useSpring，并用 animated.div 包裹元素

标签

#react#animation#spring-physics#typescript#frontend-animation#three-js#animation-library#react-spring#springs

常见问题

react-spring 是什么？
基于弹簧物理的 React 动画库，支持 DOM 与 react-three-fiber 元素，可声明式或命令式使用。 react-spring 是一个面向 React 的动画库，以弹簧物理为核心，而不是固定时长。开发者只需声明组件样式的目标值，库会基于弹簧模型从当前值平滑过渡到目标值，动画中途被打断或改变目标时也能保持连贯。需要固定时长和缓动曲线时，同样可以使用。
react-spring 可以免费使用吗？用的什么许可证？
react-spring 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
react-spring 还在维护吗？
活跃维护中。react-spring 最近一次提交是在 2026年11月1日。
react-spring 适合用来做什么？
为 React 组件添加滚动进入或淡入过渡效果。 为开关、展开收起或拖拽等界面状态变化添加动画。 为 react-three-fiber 场景中的 3D 对象添加动画。
react-spring 怎么安装和运行？
安装 Web 版本: npm install @react-spring/web 导入 animated 和 useSpring，并用 animated.div 包裹元素
在哪里获取 react-spring？
源代码和安装说明在 GitHub 上：https://github.com/pmndrs/react-spring

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目