From 7587971da8f5aa513b16adbe8aea67ed92fe2e33 Mon Sep 17 00:00:00 2001 From: Serhii Yakymuk Date: Sun, 11 Mar 2018 20:05:19 +0200 Subject: [PATCH 1/3] #5329 Animation duration is not consistent across browsers --- src/core/core.animation.js | 21 +++++---------------- src/core/core.controller.js | 2 +- test/specs/core.controller.tests.js | 2 +- 3 files changed, 7 insertions(+), 18 deletions(-) diff --git a/src/core/core.animation.js b/src/core/core.animation.js index af746588e60..6e993b6bf8b 100644 --- a/src/core/core.animation.js +++ b/src/core/core.animation.js @@ -28,9 +28,7 @@ module.exports = function(Chart) { }); Chart.animationService = { - frameDuration: 17, animations: [], - dropFrames: 0, request: null, /** @@ -44,6 +42,8 @@ module.exports = function(Chart) { var i, ilen; animation.chart = chart; + animation.startTime = Date.now(); + animation.duration = duration; if (!lazy) { chart.animating = true; @@ -93,19 +93,8 @@ module.exports = function(Chart) { */ 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) { @@ -116,7 +105,7 @@ module.exports = function(Chart) { /** * @private */ - advance: function(count) { + advance: function() { var animations = this.animations; var animation, chart; var i = 0; @@ -125,7 +114,7 @@ module.exports = function(Chart) { 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 e29a5b0769c..6fcca31c9fe 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -535,7 +535,7 @@ module.exports = function(Chart) { onAnimationComplete: onComplete }); - Chart.animationService.addAnimation(me, animation, duration, lazy); + Chart.animationService.addAnimation(me, animation, duration || animationOptions.duration, lazy); } else { me.draw(); diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js index 1ca699bc132..0f3bca690d1 100644 --- a/test/specs/core.controller.tests.js +++ b/test/specs/core.controller.tests.js @@ -1134,7 +1134,7 @@ describe('Chart', function() { expect(this.addAnimationSpy).toHaveBeenCalledWith( this.chart, jasmine.objectContaining({easing: 'linear'}), - undefined, + 500, undefined ); }); From c09cd86032120e6c5632160b3cd2317dd7865f26 Mon Sep 17 00:00:00 2001 From: Serhii Yakymuk Date: Tue, 3 Apr 2018 13:36:08 +0300 Subject: [PATCH 2/3] Simplifying animation conditional check --- src/core/core.controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 69cc03d685f..342d7436d1d 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -522,7 +522,7 @@ module.exports = function(Chart) { helpers.callback(animationOptions && animationOptions.onComplete, [animation], me); }; - if (animationOptions && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && animationOptions.duration !== 0))) { + if (animationOptions && (duration || animationOptions.duration)) { var animation = new Animation({ numSteps: (duration || animationOptions.duration) / 16.66, // 60 fps easing: config.easing || animationOptions.easing, From 3132e33d10d5314650413a7a100bbe873725e867 Mon Sep 17 00:00:00 2001 From: Serhii Yakymuk Date: Tue, 3 Apr 2018 13:50:29 +0300 Subject: [PATCH 3/3] Simplifying condinional check #2 --- src/core/core.controller.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 342d7436d1d..2ba6f0a6a22 100644 --- 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 && (duration || animationOptions.duration)) { + 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) { @@ -539,7 +541,7 @@ module.exports = function(Chart) { onAnimationComplete: onComplete }); - animations.addAnimation(me, animation, duration || animationOptions.duration, lazy); + animations.addAnimation(me, animation, duration, lazy); } else { me.draw();