mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-03-07 08:46:48 +01:00
123 lines
3.0 KiB
JavaScript
123 lines
3.0 KiB
JavaScript
/* global window: false */
|
|
'use strict';
|
|
|
|
var defaults = require('./core.defaults');
|
|
var helpers = require('../helpers/index');
|
|
|
|
defaults._set('global', {
|
|
animation: {
|
|
duration: 1000,
|
|
easing: 'easeOutQuart',
|
|
onProgress: helpers.noop,
|
|
onComplete: helpers.noop
|
|
}
|
|
});
|
|
|
|
module.exports = {
|
|
animations: [],
|
|
request: null,
|
|
|
|
/**
|
|
* @param {Chart} chart - The chart to animate.
|
|
* @param {Chart.Animation} animation - The animation that we will animate.
|
|
* @param {number} duration - The animation duration in ms.
|
|
* @param {boolean} lazy - if true, the chart is not marked as animating to enable more responsive interactions
|
|
*/
|
|
addAnimation: function(chart, animation, duration, lazy) {
|
|
var animations = this.animations;
|
|
var i, ilen;
|
|
|
|
animation.chart = chart;
|
|
animation.startTime = Date.now();
|
|
animation.duration = duration;
|
|
|
|
if (!lazy) {
|
|
chart.animating = true;
|
|
}
|
|
|
|
for (i = 0, ilen = animations.length; i < ilen; ++i) {
|
|
if (animations[i].chart === chart) {
|
|
animations[i] = animation;
|
|
return;
|
|
}
|
|
}
|
|
|
|
animations.push(animation);
|
|
|
|
// If there are no animations queued, manually kickstart a digest, for lack of a better word
|
|
if (animations.length === 1) {
|
|
this.requestAnimationFrame();
|
|
}
|
|
},
|
|
|
|
cancelAnimation: function(chart) {
|
|
var index = helpers.findIndex(this.animations, function(animation) {
|
|
return animation.chart === chart;
|
|
});
|
|
|
|
if (index !== -1) {
|
|
this.animations.splice(index, 1);
|
|
chart.animating = false;
|
|
}
|
|
},
|
|
|
|
requestAnimationFrame: function() {
|
|
var me = this;
|
|
if (me.request === null) {
|
|
// Skip animation frame requests until the active one is executed.
|
|
// This can happen when processing mouse events, e.g. 'mousemove'
|
|
// and 'mouseout' events will trigger multiple renders.
|
|
me.request = helpers.requestAnimFrame.call(window, function() {
|
|
me.request = null;
|
|
me.startDigest();
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
startDigest: function() {
|
|
var me = this;
|
|
|
|
me.advance();
|
|
|
|
// Do we have more stuff to animate?
|
|
if (me.animations.length > 0) {
|
|
me.requestAnimationFrame();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
advance: function() {
|
|
var animations = this.animations;
|
|
var animation, chart, numSteps, nextStep;
|
|
var i = 0;
|
|
|
|
// 1 animation per chart, so we are looping charts here
|
|
while (i < animations.length) {
|
|
animation = animations[i];
|
|
chart = animation.chart;
|
|
numSteps = animation.numSteps;
|
|
|
|
// Make sure that currentStep starts at 1
|
|
// https://github.com/chartjs/Chart.js/issues/6104
|
|
nextStep = Math.floor((Date.now() - animation.startTime) / animation.duration * numSteps) + 1;
|
|
animation.currentStep = Math.min(nextStep, numSteps);
|
|
|
|
helpers.callback(animation.render, [chart, animation], chart);
|
|
helpers.callback(animation.onAnimationProgress, [animation], chart);
|
|
|
|
if (animation.currentStep >= numSteps) {
|
|
helpers.callback(animation.onAnimationComplete, [animation], chart);
|
|
chart.animating = false;
|
|
animations.splice(i, 1);
|
|
} else {
|
|
++i;
|
|
}
|
|
}
|
|
}
|
|
};
|