1

Adding animations

This commit is contained in:
Alex Yatskov 2014-11-08 19:53:13 +09:00
parent 1c496735c7
commit 3dd82a91a2

View File

@ -89,6 +89,7 @@
var _panelSize = 20; var _panelSize = 20;
var _tickSize = 5; var _tickSize = 5;
var _width = 125; var _width = 125;
var _easeTime = 425;
var _enabled = true; var _enabled = true;
var _canvas = params.canvas; var _canvas = params.canvas;
@ -148,12 +149,14 @@
Snap.format('t{x},{y}', {x: _index * (_width + _padding), y: 0}) Snap.format('t{x},{y}', {x: _index * (_width + _padding), y: 0})
); );
updateShapes(); updateShapes(true);
} }
function updateShapes() { function updateShapes(updateHints) {
if (updateHints) {
var fill = _data.hints.length === 0 ? _backdropColor : _canvas.gradient(decimateHints()); var fill = _data.hints.length === 0 ? _backdropColor : _canvas.gradient(decimateHints());
_elements.density.attr({ fill: fill }); _elements.density.attr({ fill: fill });
}
var range = computeIndicatorRange(); var range = computeIndicatorRange();
_elements.indicator.attr({ _elements.indicator.attr({
@ -211,13 +214,29 @@
} }
function updateValue(value) { function updateValue(value) {
_data.value = _range.clamp(value); var clamped = _range.clamp(value);
if (_onValueChanged) { if (_onValueChanged) {
_onValueChanged(_name, _data.value); _onValueChanged(_name, clamped);
} }
updateShapes(); animateValueTo(clamped);
}
function animateValueTo(value) {
Snap.animate(
_data.value,
value,
function(value) {
_data.value = value;
updateShapes(false);
},
_easeTime,
mina.easeinout,
function() {
updateShapes(true);
}
);
} }
function valueColorAdjust(color, offset) { function valueColorAdjust(color, offset) {
@ -258,9 +277,10 @@
} }
this.update = function(data, scale) { this.update = function(data, scale) {
_data = data; _data.hints = data.hints;
_scale = scale; _scale = scale;
updateShapes();
animateValueTo(data.value);
}; };
this.enable = function(enable) { this.enable = function(enable) {