Fixed issue Mikhus#94 - clear previous animations properly

examples/async.html

@@ -140,5 +140,5 @@
 </script>
 
 <script async src="../gauge.min.js" onload="initScriptedGauges()"></script>
-
+</body>
 </html>

examples/events.html

@@ -143,5 +143,5 @@
     });
 });
 </script>
-
+</body>
 </html>

examples/radial-min-path.html

@@ -143,5 +143,5 @@
         });
     }
 </script>
-
+</body>
 </html>

examples/radial.html

@@ -142,5 +142,5 @@
     });
 }
 </script>
-
+</body>
 </html>

lib/Animation.js

@@ -253,7 +253,9 @@ export default class Animation {
      * @param {EndEventCallback} [end]
      */
     animate(draw, end) {
-        //noinspection JSUnresolvedVariable
+        this.cancel();
+
+        // noinspection JSUnresolvedVariable
         const start = window.performance && window.performance.now ?
                 window.performance.now() :
                 (vendorize('animationStartTime') || Date.now());
@@ -272,9 +274,9 @@ export default class Animation {
     }
 
     /**
-     * Destroys this object properly
+     * Cancels current animation if any
      */
-    destroy() {
+    cancel() {
         if (this.frame) {
             const cancelAnimationFrame = vendorize('cancelAnimationFrame') ||
                 /* istanbul ignore next */
@@ -283,7 +285,13 @@ export default class Animation {
             cancelAnimationFrame(this.frame);
             this.frame = null;
         }
+    }
 
+    /**
+     * Destroys this object properly
+     */
+    destroy() {
+        this.cancel();
         this.draw = null;
         this.end = null;
     }

lib/BaseGauge.js

@@ -216,6 +216,13 @@ export default class BaseGauge extends EventEmitter {
         if (value === fromValue) return;
 
         if (this.options.animation) {
+            if (this.animation.frame) {
+                // animation is already in progress -
+                // forget related old animation value
+                // @see https://github.com/Mikhus/canvas-gauges/issues/94
+                delete this._value;
+            }
+
             /**
              * @type {number}
              * @access private
@@ -232,6 +239,7 @@ export default class BaseGauge extends EventEmitter {
                 this.draw();
 
                 this.emit('animate', percent, this.options.value);
+                console.log('animation progress', this.options.value, this._value);
             }, () => {
                 if (this._value !== undefined) {
                     this.options.value = this._value;
@@ -240,6 +248,7 @@ export default class BaseGauge extends EventEmitter {
 
                 this.draw();
                 this.emit('animationEnd');
+                console.log('animation end');
             });
         }