Trigger onChange and onComplete with the right values (fabricjs#5813)

thiagocunha · Jul 21, 2019 · 1c54584 · 1c54584
1 parent f166c7f
commit 1c54584
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/src/util/animate.js b/src/util/animate.js
@@ -4,6 +4,10 @@
     return false;
   }
 
+  function defaultEasing(t, b, c, d) {
+    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
+  }
+
   /**
    * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
    * @memberOf fabric.util
@@ -28,7 +32,7 @@
           onChange = options.onChange || noop,
           abort = options.abort || noop,
           onComplete = options.onComplete || noop,
-          easing = options.easing || function(t, b, c, d) {return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;},
+          easing = options.easing || defaultEasing,
           startValue = 'startValue' in options ? options.startValue : 0,
           endValue = 'endValue' in options ? options.endValue : 100,
           byValue = options.byValue || endValue - startValue;
@@ -38,24 +42,26 @@
       (function tick(ticktime) {
         // TODO: move abort call after calculation
         // and pass (current,valuePerc, timePerc) as arguments
-        if (abort()) {
-          onComplete(endValue, 1, 1);
-          return;
-        }
         time = ticktime || +new Date();
         var currentTime = time > finish ? duration : (time - start),
             timePerc = currentTime / duration,
             current = easing(currentTime, startValue, byValue, duration),
             valuePerc = Math.abs((current - startValue) / byValue);
-        onChange(current, valuePerc, timePerc);
+        if (abort()) {
+          onComplete(endValue, 1, 1);
+          return;
+        }
         if (time > finish) {
-          options.onComplete && options.onComplete();
+          onChange(endValue, 1, 1);
+          onComplete(endValue, 1, 1);
           return;
         }
-        requestAnimFrame(tick);
+        else {
+          onChange(current, valuePerc, timePerc);
+          requestAnimFrame(tick);
+        }
       })(start);
     });
-
   }
 
   var _requestAnimFrame = fabric.window.requestAnimationFrame       ||