Make animation duration consistent across browsers (#5331)

diff --git a/src/core/core.animations.js b/src/core/core.animations.js
index 6853cb8736d5fda7d74e87629da806b6eaa1d979..c307f499562cab5a6a15984290213b3b4b50a347 100644 (file)
--- a/src/core/core.animations.js
+++ b/src/core/core.animations.js
@@ -14,9 +14,7 @@ defaults._set('global', {
 });
 
 module.exports = {
-       frameDuration: 17,
        animations: [],
-       dropFrames: 0,
        request: null,
 
        /**
@@ -30,6 +28,8 @@ module.exports = {
                var i, ilen;
 
                animation.chart = chart;
+               animation.startTime = Date.now();
+               animation.duration = duration;
 
                if (!lazy) {
                        chart.animating = true;
@@ -79,19 +79,8 @@ module.exports = {
         */
        startDigest: function() {
                var me = this;
-               var startTime = Date.now();
-               var framesToDrop = 0;
 
-               if (me.dropFrames > 1) {
-                       framesToDrop = Math.floor(me.dropFrames);
-                       me.dropFrames = me.dropFrames % 1;
-               }
-
-               me.advance(1 + framesToDrop);
-
-               var endTime = Date.now();
-
-               me.dropFrames += (endTime - startTime) / me.frameDuration;
+               me.advance();
 
                // Do we have more stuff to animate?
                if (me.animations.length > 0) {
@@ -102,7 +91,7 @@ module.exports = {
        /**
         * @private
         */
-       advance: function(count) {
+       advance: function() {
                var animations = this.animations;
                var animation, chart;
                var i = 0;
@@ -111,7 +100,7 @@ module.exports = {
                        animation = animations[i];
                        chart = animation.chart;
 
-                       animation.currentStep = (animation.currentStep || 0) + count;
+                       animation.currentStep = Math.floor((Date.now() - animation.startTime) / animation.duration * animation.numSteps);
                        animation.currentStep = Math.min(animation.currentStep, animation.numSteps);
 
                        helpers.callback(animation.render, [chart, animation], chart);

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 117a6d576eaac74af1ff68c9f31514b1f7f54b6c..a4f7e3e55c0caf8a01e8a347392d84ad4e5dfcdd 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -509,22 +509,24 @@ module.exports = function(Chart) {
                                };
                        }
 
-                       var duration = config.duration;
+                       var animationOptions = me.options.animation;
+                       var duration = typeof config.duration !== 'undefined'
+                               ? config.duration
+                               : animationOptions && animationOptions.duration;
                        var lazy = config.lazy;
 
                        if (plugins.notify(me, 'beforeRender') === false) {
                                return;
                        }
 
-                       var animationOptions = me.options.animation;
                        var onComplete = function(animation) {
                                plugins.notify(me, 'afterRender');
                                helpers.callback(animationOptions && animationOptions.onComplete, [animation], me);
                        };
 
-                       if (animationOptions && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && animationOptions.duration !== 0))) {
+                       if (animationOptions && duration) {
                                var animation = new Animation({
-                                       numSteps: (duration || animationOptions.duration) / 16.66, // 60 fps
+                                       numSteps: duration / 16.66, // 60 fps
                                        easing: config.easing || animationOptions.easing,
 
                                        render: function(chart, animationObject) {

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 443cceace57d9b7b63c840c414880adf963a89db..9bcb45d1f52b4d4e4251ee951099636682b5ccf0 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -1122,7 +1122,7 @@ describe('Chart', function() {
                        expect(this.addAnimationSpy).toHaveBeenCalledWith(
                                this.chart,
                                jasmine.objectContaining({easing: 'linear'}),
-                               undefined,
+                               500,
                                undefined
                        );
                });