Animation machine configuration
Hook options
Animation machine state and controls
function Character({ animations }) {
const { currentState, send, transitionTo } = useAnimationMachine({
id: 'character',
initial: 'idle',
states: {
idle: { animation: 'Idle', loop: true },
walk: { animation: 'Walk', loop: true },
run: { animation: 'Run', loop: true }
},
transitions: [
{ from: 'idle', to: 'walk', event: 'MOVE' },
{ from: 'walk', to: 'run', event: 'SPRINT' }
]
});
useEffect(() => {
if (isMoving) send({ type: 'MOVE' });
else send({ type: 'STOP' });
}, [isMoving, send]);
return <AnimatedModel animation={currentState} />;
}
React hook for managing animation state machines.
Integrates XState machines with React Three Fiber's render loop, automatically updating animation context each frame.