Skinning and Animations - WebGL Game Development - page 308

The getNextKeyWith function is used extensively by the update function. It
basically takes the bone index, type ( pos , rot , and scl ), and the keys array's
index to get the next frame.
Animation.prototype.getNextKeyWith = function ( type, h, key ) {
var keys = this.data.hierarchy[ h ].keys;
key = key % keys.length;
for ( ; key < keys.length; key++ ) {
if ( keys[ key ][ type ] !== undefined ) {
return keys[ key ];
}
}
return this.data.hierarchy[ h ].keys[ 0 ];
};
Open 08-Loading-Skinned-Animatons.html to learn how to use the
preceding classes.
After we initialize our RiggedMesh object, we check whether the name of the
RiggedMesh object is mrgreen . We initialize our Animation object with the stage
object and the name of animation to play. We also add the animation data from the
geometry to the AnimationHandler .
function loadStageObject(url, location, rotationX, rotationY,
rotationZ) {
...
if(stageObject.name=="mrgreen") {
AnimationHandler.add( stageObject.geometry.animation );
animation = new Animation( stageObject, "ActionMrGreen" );
animation.play( true );
animation.update( 0 );
}
...
}
The animate function on main code invokes the AnimationHandler class'
update function. It passes the elapsed time as a parameter to the function.
AnimationHandler class's update function in turn invokes the update function
of RiggedMesh .
Hence, now our animate function does three things: updates the physical world,
updates AnimationHandler , and then redraws the scene.
function animate() {
currentTime = (new Date).getTime();
elapsedTime = currentTime - lastFrameTime;