alex/restaurant-search
1
Fork 0
Code Releases Activity

Better animation

Browse Source
This commit is contained in:
Alex Yatskov 2014-11-08 20:10:51 +09:00
parent 3dd82a91a2
commit b1441b5175
1 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
client/scripts/grapher.js
View File

@ -124,7 +124,7 @@
).attr({'dominant-baseline': 'middle', 'text-anchor': 'middle'}); ).attr({'dominant-baseline': 'middle', 'text-anchor': 'middle'});
// indicator // indicator
var range = computeIndicatorRange(); var range = computeIndicatorRange(_data.value);
_elements.indicator = _canvas.rect( _elements.indicator = _canvas.rect(
_tickSize, range.min, _width - (_densitySize + _tickSize), (range.max - range.min) _tickSize, range.min, _width - (_densitySize + _tickSize), (range.max - range.min)
).attr({cursor: 'crosshair', fill: computeIndicatorColor()}).click(clicked); ).attr({cursor: 'crosshair', fill: computeIndicatorColor()}).click(clicked);
@ -149,23 +149,23 @@
Snap.format('t{x},{y}', {x: _index * (_width + _padding), y: 0}) Snap.format('t{x},{y}', {x: _index * (_width + _padding), y: 0})
); );
updateShapes(true); updateDensity();
} }
function updateShapes(updateHints) { function updateIndicator(value) {
if (updateHints) { var range = computeIndicatorRange(value);
var fill = _data.hints.length === 0 ? _backdropColor : _canvas.gradient(decimateHints());
_elements.density.attr({ fill: fill });
}
var range = computeIndicatorRange();
_elements.indicator.attr({ _elements.indicator.attr({
y: range.min, y: range.min,
height: range.max - range.min, height: range.max - range.min,
fill: computeIndicatorColor() fill: computeIndicatorColor(value)
}); });
} }
function updateDensity() {
var fill = _data.hints.length === 0 ? _backdropColor : _canvas.gradient(decimateHints());
_elements.density.attr({ fill: fill });
}
function decimateHints() { function decimateHints() {
var colorStops = 'l(0,0,0,1)'; var colorStops = 'l(0,0,0,1)';
@ -214,47 +214,47 @@
} }
function updateValue(value) { function updateValue(value) {
var clamped = _range.clamp(value); var valueOld = _data.value;
_data.value = _range.clamp(value);
if (_onValueChanged) { if (_onValueChanged) {
_onValueChanged(_name, clamped); _onValueChanged(_name, _data.value);
} }
animateValueTo(clamped); animateIndicator(valueOld, _data.value);
} }
function animateValueTo(value) { function animateIndicator(valueOld, valueNew) {
Snap.animate( Snap.animate(
_data.value, valueOld,
value, valueNew,
function(value) { function(value) {
_data.value = value; updateIndicator(value);
updateShapes(false);
}, },
_easeTime, _easeTime,
mina.easeinout, mina.easeinout,
function() { function() {
updateShapes(true); // updateDensity();
} }
); );
} }
function valueColorAdjust(color, offset) { function valueColorAdjust(value, color, offset) {
var colorObj = tinycolor(color); var colorObj = tinycolor(color);
var rangeEnd = _data.value >= 0.0 ? _range.max : _range.min; var rangeEnd = value >= 0.0 ? _range.max : _range.min;
var rangeMid = (_range.min + _range.max) / 2.0; var rangeMid = (_range.min + _range.max) / 2.0;
var rangeRat = (_data.value - rangeMid) / (rangeEnd - rangeMid); var rangeRat = (value - rangeMid) / (rangeEnd - rangeMid);
var desatVal = Math.max(0.0, 1.0 - rangeRat + offset) * 100.0; var desatVal = Math.max(0.0, 1.0 - rangeRat + offset) * 100.0;
return colorObj.desaturate(desatVal).toHexString(); return colorObj.desaturate(desatVal).toHexString();
} }
function computeIndicatorColor() { function computeIndicatorColor(value) {
var color = _data.value >= 0.0 ? _fillColorPos : _fillColorNeg; var color = value >= 0.0 ? _fillColorPos : _fillColorNeg;
return valueColorAdjust(color, _desatOffset); return valueColorAdjust(value, color, _desatOffset);
} }
function computeIndicatorRange() { function computeIndicatorRange(value) {
return new Range(valueToIndicator(0.0), valueToIndicator(_data.value)); return new Range(valueToIndicator(0.0), valueToIndicator(value));
} }
function valueToIndicator(scalar) { function valueToIndicator(scalar) {
@ -277,10 +277,12 @@
} }
this.update = function(data, scale) { this.update = function(data, scale) {
_data.hints = data.hints; var valueOld = _data.value;
_data = data;
_scale = scale; _scale = scale;
animateValueTo(data.value); animateIndicator(valueOld, _data.value);
}; };
this.enable = function(enable) { this.enable = function(enable) {