diff --git a/docs/00-Getting-Started.md b/docs/00-Getting-Started.md index 59d647462..bb77a2183 100644 --- a/docs/00-Getting-Started.md +++ b/docs/00-Getting-Started.md @@ -186,9 +186,9 @@ Name | Type | Default | Description --- |:---:| --- | --- duration | Number | 1000 | The number of milliseconds an animation takes. easing | String | "easeOutQuart" | Easing function to use. -onProgress | Function | none | -onComplete | Function |none | - +onProgress | Function | none | Callback called on each step of an animation. Passed a single argument, an object, containing the chart instance and an object with details of the animation. +onComplete | Function | none | Callback called at the end of an animation. Passed the same arguments as `onProgress +` The global options for elements are defined in `Chart.defaults.global.elements`. Name | Type | Default | Description diff --git a/samples/AnimationCallbacks/progress-bar.html b/samples/AnimationCallbacks/progress-bar.html new file mode 100644 index 000000000..0dbc14d73 --- /dev/null +++ b/samples/AnimationCallbacks/progress-bar.html @@ -0,0 +1,161 @@ + + + + Animation Callbacks + + + + + + +
+ + +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/src/core/core.animation.js b/src/core/core.animation.js index cb6c6fc0a..e874155a2 100644 --- a/src/core/core.animation.js +++ b/src/core/core.animation.js @@ -9,8 +9,8 @@ Chart.defaults.global.animation = { duration: 1000, easing: "easeOutQuart", - onProgress: function() {}, - onComplete: function() {}, + onProgress: helpers.noop, + onComplete: helpers.noop, }; Chart.Animation = Chart.Element.extend({ @@ -77,18 +77,26 @@ } for (var i = 0; i < this.animations.length; i++) { - if (this.animations[i].animationObject.currentStep === null) { this.animations[i].animationObject.currentStep = 0; } + this.animations[i].animationObject.currentStep += 1 + framesToDrop; + if (this.animations[i].animationObject.currentStep > this.animations[i].animationObject.numSteps) { this.animations[i].animationObject.currentStep = this.animations[i].animationObject.numSteps; } this.animations[i].animationObject.render(this.animations[i].chartInstance, this.animations[i].animationObject); + if (this.animations[i].animationObject.onAnimationProgress && this.animations[i].animationObject.onAnimationProgress.call) { + this.animations[i].animationObject.onAnimationProgress.call(this.animations[i].chartInstance, this.animations[i]); + } if (this.animations[i].animationObject.currentStep == this.animations[i].animationObject.numSteps) { + if (this.animations[i].animationObject.onAnimationComplete && this.animations[i].animationObject.onAnimationComplete.call) { + this.animations[i].animationObject.onAnimationComplete.call(this.animations[i].chartInstance, this.animations[i]); + } + // executed the last frame. Remove the animation. this.animations[i].chartInstance.animating = false; this.animations.splice(i, 1); diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 9a8304b3d..d57ebcc8a 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -256,7 +256,7 @@ render: function render(duration, lazy) { - if (this.options.animation !== false && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration == 'undefined' && this.options.animation.duration !== 0))) { + if (this.options.animation && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration == 'undefined' && this.options.animation.duration !== 0))) { var animation = new Chart.Animation(); animation.numSteps = (duration || this.options.animation.duration) / 16.66; //60 fps animation.easing = this.options.animation.easing; @@ -271,14 +271,14 @@ }; // user events - animation.onAnimationProgress = this.options.onAnimationProgress; - animation.onAnimationComplete = this.options.onAnimationComplete; + animation.onAnimationProgress = this.options.animation.onProgress; + animation.onAnimationComplete = this.options.animation.onComplete; Chart.animationService.addAnimation(this, animation, duration, lazy); } else { this.draw(); - if (this.options.onAnimationComplete && this.options.onAnimationComplete.call) { - this.options.onAnimationComplete.call(this); + if (this.options.animation && this.options.animation.onComplete && this.options.animation.onComplete.call) { + this.options.animation.onComplete.call(this); } } return this;