Syncing between animations

Questions
1

I have a character that has both “Walk” and “Run” animations. The walk animation has a cycle time of 1 second, while the run animation has a cycle time of 0.5 seconds. In addition, the engine allows for variable speed movement, such that when the character is moving at a rate of 0…3 meters per second, it uses the walk animation, but if the speed increases beyond 3 meters per second it shifts to the run animation.

The problem I’m having is avoiding the “stutter” when shifting between animations. I’ve tried various combinations of cross fading and setting the action time:

const proportionalTime = this.currentAnimation.time / oldClip.duration;
action.time = proportionalTime * newClip.duration;

However, I can’t seem to get rid of the unsightly jerking when shifting modes.

2

heres a small snippet

  class IdleState extends State {
    constructor(parent) {
      super(parent);
    }
  
    get Name() {
      return 'idle';
    }
  
    Enter(prevState) {
      const idleAction = this._parent._proxy._animations['idle'].action;
      if (prevState) {
        const prevAction = this._parent._proxy._animations[prevState.Name].action;
        idleAction.time = 0.0;
        idleAction.enabled = true;
        idleAction.setEffectiveTimeScale(1.0);
        idleAction.setEffectiveWeight(1.0);
        idleAction.crossFadeFrom(prevAction, 0.25, true);
        idleAction.play();
      } else {
        idleAction.play();
      }
    }
  
    Exit() {
    }
  
    Update(_, input) {
      if (input._keys.forward || input._keys.backward) {
        this._parent.SetState('walk');
      } else if (input._keys.space) {
        this._parent.SetState('attack');
   

      }
    }
  };