Update running animations (#7196)

diff --git a/src/core/core.animation.js b/src/core/core.animation.js
index 8fc7c11cbee94331a144dab485d4b4d0cb92dcd8..728fb83b9ea8ca31e109e1d6438a3f571fb6cb58 100644 (file)
--- a/src/core/core.animation.js
+++ b/src/core/core.animation.js
@@ -42,6 +42,19 @@ export default class Animation {
                return this._active;
        }
 
+       update(cfg, to, date) {
+               const me = this;
+               if (me._active) {
+                       const currentValue = me._target[me._prop];
+                       const elapsed = date - me._start;
+                       const remain = me._duration - elapsed;
+                       me._start = date;
+                       me._duration = Math.floor(Math.max(remain, cfg.duration));
+                       me._to = resolve([cfg.to, to, currentValue, cfg.from]);
+                       me._from = resolve([cfg.from, currentValue, to]);
+               }
+       }
+
        cancel() {
                const me = this;
                if (me._active) {

diff --git a/src/core/core.animations.js b/src/core/core.animations.js
index b94685ea18906b0a7a3ab60354c7934a44e3dc4e..380f431fb7ac282be611f4cd1aa6a7dd117d5451 100644 (file)
--- a/src/core/core.animations.js
+++ b/src/core/core.animations.js
@@ -147,6 +147,7 @@ export default class Animations {
                const animations = [];
                const running = target.$animations || (target.$animations = {});
                const props = Object.keys(values);
+               const date = Date.now();
                let i;
 
                for (i = props.length - 1; i >= 0; --i) {
@@ -161,11 +162,17 @@ export default class Animations {
                        }
                        const value = values[prop];
                        let animation = running[prop];
+                       const cfg = animatedProps.get(prop);
+
                        if (animation) {
-                               animation.cancel();
+                               if (cfg && animation.active()) {
+                                       // There is an existing active animation, let's update that
+                                       animation.update(cfg, value, date);
+                                       continue;
+                               } else {
+                                       animation.cancel();
+                               }
                        }
-
-                       const cfg = animatedProps.get(prop);
                        if (!cfg || !cfg.duration) {
                                // not animated, set directly to new value
                                target[prop] = value;

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 3243289b441b5ce1efab114347203aba67399fc7..9e3c5fd7a10db4cafa6a3a42992a5ddfd41d8904 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -343,7 +343,6 @@ export default class Chart {
                                options.onResize(me, newSize);
                        }
 
-                       me.stop();
                        me.update('resize');
                }
        }