clampWhenFinished=true affecting my next animation

const movable = obj => ({
  x: 0,
  y: 0,
  move: () => {
    obj.position.x -= 0.05;
  },
  createJumpAction: direction => {
    let posArr = [];
    let timeArr = [];
    const startPos = obj.position.toArray();
    for (let i = 1; i <= 9; i++) {
      const zOffset = jumpHeight - Math.abs(5 - i);
      const xyOffset = (gridLen / 10) * i;
      switch (direction) {
        case "down":
          posArr.push(startPos[0], startPos[1] - xyOffset, startPos[2] + zOffset);
          console.log(startPos[2] + zOffset);
          break;
      }
      timeArr.push(0.1 * (i - 1));
    }
    // console.log(posArr);
    console.log(timeArr);

    let positionKF = new THREE.VectorKeyframeTrack(".position", timeArr, posArr);
    let clip = new THREE.AnimationClip("Jump", 1, [positionKF]);
    let animationMixer = Cubemixer.clipAction(clip);
    animationMixer.setLoop(THREE.LoopOnce);
    animationMixer.clampWhenFinished = true;
    // animationMixer.
    animationMixer.play();
  }
});


Cubemixer.addEventListener("finished", function(e) {
  if (remainNum) {
    movableCube.createJumpAction("down");
    $("#remain-num").html(--remainNum);
  } else {
    $("#remain-num").html("Result!!!");
  }
});

the above code is a composition function to add createJumpAction to my cube,
the second part is an event handler to check the number and call create another animation.

When the clampWhenFinished set to false (default), every animation performed correctly, except that in the end of each animation, the cube would flash to the origin position and start the next position.

To solve the problem, I set clampWhenFinished to true, which fixed the problem.
However, it introduced another problem, my animations gradually scale down!
(e.g. when the animation is jump for length 4, the next animation only jump 3.2342 height …)