Fixed issue #106 - Animation problems

Mikhus · Jan 18, 2017 · 3591da7 · 3591da7
1 parent 3ef85de
commit 3591da7
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 9 deletions.
diff --git a/docs-coverage.svg b/docs-coverage.svg
diff --git a/examples/ofthen-updates.html b/examples/ofthen-updates.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+<head>
+    <title>Car assist</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <style>body { padding: 0; margin: 0; background: #F0F0F0 }</style>
+</head>
+
+<body>
+<p>
+    <canvas id="hpa"></canvas>
+    <canvas id="hpb"></canvas>
+</p>
+
+<script src="../gauge.min.js"></script>
+<script>
+    var myHighlightsHP = [
+        { from: 0, to: 40, color: 'rgba(0,0,255,.8)'},
+        { from: 400, to: 450, color: 'rgba(255,0,0,.8)'}
+    ];
+    var myMajorTicksHP = ['0', '100', '200', '300', '400', '450'];
+    var myCommonProp = {
+        width: 150,
+        height: 150,
+        value: 1,
+        colorPlate: '#F0F0F0',
+        colorMajorTicks: '#222',
+        colorMinorTicks: '#222',
+        colorTitle: '#222',
+        colorUnits: '#222',
+        colorNumbers: '#222',
+        colorNeedle: 'rgba(240, 128, 128, 1)',
+        colorNeedleEnd: 'rgba(255, 160, 122, .9)',
+        valueBox: false
+    };
+
+    var myAnimation = {
+        animationRule: 'decycle',
+        animationDuration: 500
+    };
+
+    var myCommonPropHP=Object.assign({},
+        myCommonProp,
+        myAnimation,
+        {
+            units:'BAR',
+            minValue:0, maxValue:450,
+            majorTicks:myMajorTicksHP,
+            highlights:myHighlightsHP
+        }
+    );
+
+    var hpaConfig = Object.assign({},
+        { renderTo: 'hpa', title: 'HPA' },
+        myCommonPropHP
+    );
+    var hpbConfig = Object.assign({},
+        { renderTo: 'hpb', title: 'HPB' },
+        myCommonPropHP
+    );
+    var gaugeHpa = new RadialGauge(hpaConfig);
+    var gaugeHpb = new RadialGauge(hpbConfig);
+
+    function onRender() {
+        console.log(this._value, this.value);
+    }
+
+    gaugeHpa.on('render', onRender);
+    gaugeHpb.on('render', onRender);
+
+    gaugeHpa.draw();
+    gaugeHpb.draw();
+
+    setInterval(function() {
+        gaugeHpa.value = 0;
+        gaugeHpb.value = 0;
+    }, 50);
+</script>
+
+</body>
+</html>
diff --git a/gauge.min.js b/gauge.min.js
diff --git a/gauge.min.js.map b/gauge.min.js.map
diff --git a/lib/Animation.js b/lib/Animation.js
@@ -116,12 +116,23 @@ function step(time, draw, start, rule, duration, end, anim) {
 
     let progress = time - start;
     let percent = progress / duration;
+    let animationTransformed = 0;
 
     if (percent > 1) {
         percent = 1;
     }
 
-    draw && draw(percent === 1 ? percent : rule(percent));
+    if (percent !== 1) {
+        animationTransformed = rule(percent);
+
+        // make sure we have correct number after applying animation
+        // transformation
+        if (isFinite(animationTransformed) && !isNaN(animationTransformed)) {
+            percent = animationTransformed;
+        }
+    }
+
+    draw && draw(percent);
 
     if (progress < duration) {
         anim.frame = requestAnimationFrame(time =>
@@ -131,6 +142,7 @@ function step(time, draw, start, rule, duration, end, anim) {
 
     else {
         end && end();
+        anim.inProgress = false;
     }
 }
 
@@ -253,7 +265,7 @@ export default class Animation {
      * @param {EndEventCallback} [end]
      */
     animate(draw, end) {
-        this.cancel();
+        this.frame && this.cancel();
 
         // noinspection JSUnresolvedVariable
         const start = window.performance && window.performance.now ?
@@ -263,6 +275,9 @@ export default class Animation {
         draw = draw || this.draw;
         end = end || this.end;
 
+        this.draw = draw;
+        this.end = end;
+
         /**
          * Current requested animation frame identifier
          *

diff --git a/lib/BaseGauge.js b/lib/BaseGauge.js
@@ -213,14 +213,23 @@ export default class BaseGauge extends EventEmitter {
 
         let fromValue = this.options.value;
 
-        if (value === fromValue) return;
+        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;
+                this.options.value = this._value;
+
+                // if there is no actual value change requested stop it
+                if (this._value === value) {
+                    this.animation.cancel();
+                    delete this._value;
+                    return ;
+                }
             }
 
             /**

diff --git a/test-coverage.svg b/test-coverage.svg