Babylon.js 7 Animation Improvements

Babylon.js 7 includes enhanced animation capabilities:

// Animation curve editor integration
const curveEditor = new BABYLON.AnimationCurveEditor();
curveEditor.addAnimation(animation);
// Animation state machine
const stateMachine = new BABYLON.AnimationStateMachine("characterStates", scene);

// Define states
const idleState = new BABYLON.AnimationState("idle", idleAnim);
const walkState = new BABYLON.AnimationState("walk", walkAnim);
const runState = new BABYLON.AnimationState("run", runAnim);

// Add states to state machine
stateMachine.addState(idleState);
stateMachine.addState(walkState);
stateMachine.addState(runState);
// Define transitions between states
stateMachine.addTransition(idleState, walkState, "startWalking");
stateMachine.addTransition(walkState, runState, "startRunning");
stateMachine.addTransition(runState, walkState, "slowDown");
stateMachine.addTransition(walkState, idleState, "stop");

// Start with idle state
stateMachine.setCurrentState("idle");

// Later, trigger transitions
document.getElementById("walkButton").addEventListener("click", () => {
    stateMachine.trigger("startWalking");
});

document.getElementById("runButton").addEventListener("click", () => {
    stateMachine.trigger("startRunning");
});