SuperAPI AI 工具集

react-spring-physics

前端与建站

查看项目

更新于 10-15 21:47

技能介绍

用途:为 React 应用提供基于物理的动画方案,将 React Spring 的声明式弹簧动画与 Popmotion 的底层物理工具结合,适合自然动效、手势驱动界面、可中断动画、动量滚动与惯性效果。

主要能力:核心库包括 @react-spring/web(弹簧动画 Hooks)、@react-spring/three(Three.js 集成)与可选的 popmotion(关键帧、decay、inertia 等底层工具)。提供 useSpring、useTrail、useTransition、useScroll、useInView、useSprings 等 Hooks,支持弹簧参数(mass、tension、friction)与内置预设(default、gentle、wobbly、stiff、slow、molasses)。

使用方式:通过 useSpring 定义 from/to 与 config;对象配置适合随 props 自动更新,函数配置返回 api 用于命令式触发。可用 api.start 启动动画,用 getVelocity 保留速度实现动量衔接。支持与 React Three Fiber、表单校验(抖动反馈)等集成。

适用场景:点击触发的弹簧动画、多元素 trail、列表进出场过渡、滚动揭示、视口交叉淡入、链式异步动画、速度保持的拖拽回弹,以及 3D 场景动画。

限制与注意:需注意依赖数组、避免直接修改弹簧值、合理设置 precision 以减少渲染、动画中断时保留速度、不要混用对象与函数配置、弹簧无法直接插值复杂字符串(应拆分数值再组合)。可通过 Globals.assign({ skipAnimation: true }) 跳过动画以适配 prefers-reduced-motion。资料还提供 spring_generator.py、physics_calculator.py 脚本及 API 参考、物理指南、起始模板与示例资源。具体安装命令与版本信息暂未提供。