用途:为 React Three Fiber 场景添加动画,覆盖程序化运动、动画过渡与按需(demand)循环动画。使用前先确认已安装的 Fiber、Drei 与 React 版本,示例面向 Fiber 9 / React 19;若项目已有满足需求的动画库,应继续沿用。
主要能力与选择原则:连续变换或 uniform 用 useFrame 配合 ref;React state 只描述选中、打开、激活等离散目标。作者制作的 GLTF 片段用 Drei 的 useAnimations,并处理独立动画实例的播放与清理。协调过渡用项目自带的 spring/tween 库,添加前检查其 React peer 依赖;不要仅为动画网格引入状态管理器。物理模拟的刚体变换交给 Rapier,通过物理 API 驱动运动学目标,而不是用网格位置对抗模拟。
用法要点:阻尼示例需挂载在 Canvas 之下,也适用于 frameloop="demand"。delta 单位为秒,速度积分用 position += velocity * delta;指数平滑用 MathUtils.damp 或 1 - exp(-lambda * delta),固定 lerp 比例会受刷新率影响,delta * speed 可能过冲。复用向量与四元数,避免逐帧分配;朝向用四元数插值,不要跨环绕边界分别 lerp 欧拉角。保持单一时间线/时钟所有者,Fiber 9 仍提供 state.clock。按需渲染时,外部动画系统在活动期间需要 invalidate,同步动画应在启动前失效并在下一帧安排开始。支持时可在帧回调直接读取外部状态(如 store 的 getState()),React 只订阅与 UI 相关的变更,并清理外部订阅。
限制与验证:隐藏对象不会停止其帧回调或 mixer,必要时应显式暂停昂贵动画,并尊重减少动态效果偏好。重复振荡与着色器运动可由经过时间推导相位;需要可复现的模拟应采用固定步长设计,而非任意钳制 delta。验证时比较不同帧率下的运动、后台/恢复行为与重复目标切换;按需模式下确认对象唤醒、到达目标并停止请求帧;片段测试两个实例播放不同动作。
资料未提供收费、价格、平台与具体安装命令等信息。