Properly reverse and cross-fade animations in hand-controls component

Author: mrxz

src/components/hand-controls.js

@@ -58,7 +58,7 @@ module.exports.Component = registerComponent('hand-controls', {
     var self = this;
     var el = this.el;
     // Current pose.
-    this.gesture = ANIMATIONS.open;
+    this.gesture = undefined;
     // Active buttons populated by events provided by the attached controls.
     this.pressedButtons = {};
     this.touchedButtons = {};
@@ -360,34 +360,37 @@ module.exports.Component = registerComponent('hand-controls', {
 
     if (!mesh) { return; }
 
-    // Stop all current animations.
-    mesh.mixer.stopAllAction();
-
     // Grab clip action.
     clip = this.getClip(gesture);
     toAction = mesh.mixer.clipAction(clip);
+
+    // Reverse from gesture to no gesture.
+    if (reverse) {
+      toAction.paused = false;
+      toAction.timeScale = -1;
+      return;
+    }
+
     toAction.clampWhenFinished = true;
-    toAction.loop = THREE.LoopRepeat;
+    toAction.loop = THREE.LoopOnce;
     toAction.repetitions = 0;
-    toAction.timeScale = reverse ? -1 : 1;
-    toAction.time = reverse ? clip.duration : 0;
+    toAction.timeScale = 1;
+    toAction.time = 0;
     toAction.weight = 1;
 
-    // No gesture to gesture or gesture to no gesture.
-    if (!lastGesture || gesture === lastGesture) {
-      // Stop all current animations.
-      mesh.mixer.stopAllAction();
+    // No gesture to gesture.
+    if (!lastGesture) {
       // Play animation.
+      mesh.mixer.stopAllAction();
       toAction.play();
       return;
     }
 
     // Animate or crossfade from gesture to gesture.
     clip = this.getClip(lastGesture);
-    fromAction = mesh.mixer.clipAction(clip);
-    fromAction.weight = 0.15;
-    fromAction.play();
+    toAction.reset();
     toAction.play();
+    fromAction = mesh.mixer.clipAction(clip);
     fromAction.crossFadeTo(toAction, 0.15, true);
   }
 });