How to transition between animations smoothly

Questions
1

I’m trying to smoothly transition between walk/run animations but for some reason it keeps glitching quickly into t-pose between the animations. I am using fade() but still no luck. What can I do to make this transition smoothly without the glitch? Thanks!

2
3

Did you take a look at the examples? I think I saw the same issue in this example. If you’re on “walk” and click “walk” again, it’ll jump back to the T-pose for a bit. https://threejs.org/examples/?q=animation#webgl_animation_skinning_additive_blending

This one has smooth transitions, but it seems like it waits until the current animation loop ends before starting the blending.

1 Like
4

Here’s another example: https://threejs.org/examples/?q=skin#webgl_animation_skinning_morph. The relevant code is:

			function fadeToAction( name, duration ) {

				previousAction = activeAction;
				activeAction = actions[ name ];

				if ( previousAction !== activeAction ) {

					previousAction.fadeOut( duration );

				}

				activeAction
					.reset()
					.setEffectiveTimeScale( 1 )
					.setEffectiveWeight( 1 )
					.fadeIn( duration )
					.play();

			}
1 Like
5 
set_motion(_name){

    

    if (this.motion_name == _name){ return; }

    this.motion_name = _name;

    this.motion_time = Date.now();

  

    //get motion object

    var motion = this.get_motion_obj_from_name(this.motion_name);

  

    //get translate amount

    this.motion_translate = motion.translate;     

  

    //get clip

    var clip = motion.anim;

  

    //get action (animation)

    var action = this.mixer.clipAction( clip );

    console.log("action,");

    console.log(action);

    if(this.current_action){

      this.current_action.fadeOut(0.2);

    }

    //this.mixer.stopAllAction();

    action.reset();

    action.fadeIn(0.2);

    action.play();

    //action.time = 0.1; //hmm doesn't do anything

  

    this.current_action = action;

    console.log("Motion set to, "+this.motion_name);

  }

Yay, got it. I added fadeOut() and reset() and that fixed it.

6

I am facing an issue that first the animation goes to a null animation and then it changes to the next animation. How can I fix that?