用途:该技能面向 React Three Fiber(R3F)中的动画实现,覆盖逐帧动画、GLTF/GLB 模型动画播放、弹簧物理动画与程序化动画等场景。
主要能力:
- useFrame:R3F 核心动画钩子,每帧执行。回调参数 state 含 clock、camera、scene、gl、mouse/pointer、viewport、size、raycaster、get、set、invalidate;delta 为距上一帧的时间(秒)。可传渲染优先级,数字越小越先执行,默认为 0,负值用于渲染前、正值用于渲染后。
- useAnimations(来自 @react-three/drei):播放 GLTF/GLB 动画的推荐方式,返回 actions、names、mixer。支持 play/stop/reset、paused、timeScale(负值可倒放)、loop 模式(LoopOnce、LoopRepeat、LoopPingPong)、repetitions、clampWhenFinished、weight;可通过 fadeOut/fadeIn 做动画交叉淡入淡出,通过 setEffectiveWeight 做权重混合,并监听 mixer 的 finished、loop 事件。
- 弹簧动画:安装 npm install @react-spring/three,使用 useSpring、useSprings、animated、config 预设(default、gentle、wobbly、stiff、slow、molasses)或自定义 mass、tension、friction 等;可用 useChain 串联动画,配合 @use-gesture/react 做手势交互。
- 其他:morph targets(morphTargetInfluences 与 morphTargetDictionary)动画、骨骼动画(遍历 skinnedMesh 获取 skeleton.bones 并修改,或将物体挂载到骨骼)、程序化模式(lerp 平滑跟随、手写弹簧、正弦/圆周/弹跳/8 字振荡)、drei 辅助组件 Float、MeshWobbleMaterial、MeshDistortMaterial、Trail,以及使用 Zustand 状态驱动动画。
使用方式:在 R3F 的 Canvas 内,通过 useRef 引用对象,在 useFrame 中按 delta 或 clock 更新时间与变换;加载模型用 useGLTF 配合 useAnimations 控制动作。
限制:资料未提供版本兼容性、性能数据、收费与授权信息;示例为代码片段,实际集成细节暂未提供。