35 lines
1.3 KiB
JavaScript
35 lines
1.3 KiB
JavaScript
var ChartAnimationMixin = {
|
|
animDuration: 350,
|
|
|
|
animate: function(ref, attr, from, to) {
|
|
var node = ref.getDOMNode(),
|
|
anim = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
|
|
|
|
anim.setAttributeNS(null, 'attributeType', 'XML');
|
|
anim.setAttributeNS(null, 'attributeName', attr);
|
|
anim.setAttributeNS(null, 'values', from +';'+ to);
|
|
anim.setAttributeNS(null, 'dur', this.animDuration +'ms');
|
|
anim.setAttributeNS(null, 'calcMode', 'spline');
|
|
// Easings to consider:
|
|
// easeOutCirc: 0.075 0.82 0.165 1
|
|
// easeOutBack: 0.175 0.885 0.32 1.275
|
|
// easeInOutCubic: 0.645 0.045 0.355 1
|
|
// easeOutBack2: 0.15 0.9 0.6 1.07 (more linear, less bouncy)
|
|
anim.setAttributeNS(null, 'keySplines', '0.15 0.9 0.6 1.07');
|
|
anim.setAttributeNS(null, 'repeatCount', '1');
|
|
anim.addEventListener('endEvent', function() {
|
|
node.setAttributeNS(null, attr, to);
|
|
});
|
|
node.appendChild(anim);
|
|
|
|
anim.beginElement();
|
|
},
|
|
|
|
clearAnimations: function(ref) {
|
|
var node = ref.getDOMNode();
|
|
while (node.firstChild && node.firstChild.nodeName === 'animate') {
|
|
node.removeChild(node.firstChild);
|
|
}
|
|
}
|
|
};
|