alex/restaurant-search
1
Fork 0
Code Releases Activity

Bracket animation

Browse Source
This commit is contained in:
Alex Yatskov 2015-06-28 12:59:45 +09:00
parent 01a610c77a
commit 201c2e49ce
1 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
static/scripts/grapher.js
View File

@ -91,16 +91,17 @@
var _tickSize = 5; var _tickSize = 5;
var _width = 120; var _width = 120;
var _animation = null; var _indicatorAnim = null;
var _bracketAnim = null;
var _canvas = params.canvas; var _canvas = params.canvas;
var _data = params.data; var _data = params.data;
var _index = params.index; var _index = params.index;
var _name = params.name; var _name = params.name;
var _valueAnimated = params.data.value; var _valueTrans = params.data.value;
var _bracketTrans = params.data.bracket;
var _onValueChanged = params.onValueChanged; var _onValueChanged = params.onValueChanged;
var _range = params.range; var _range = params.range;
var _scale = params.scale; var _scale = params.scale;
var _bracket = params.bracket;
var _elements = {}; var _elements = {};
function createShapes() { function createShapes() {
@ -161,7 +162,7 @@
updateIndicator(_data.value); updateIndicator(_data.value);
// bracket // bracket
updateBracket(); updateBracket(_data.bracket);
// tick // tick
if (_range.contains(0.0)) { if (_range.contains(0.0)) {
@ -207,7 +208,7 @@
fill: fill fill: fill
}); });
_valueAnimated = value; _valueTrans = value;
} }
else { else {
_elements.indicator = _canvas.rect( _elements.indicator = _canvas.rect(
@ -222,11 +223,11 @@
} }
} }
function updateBracket() { function updateBracket(bracket) {
var visibility = _data.bracket.min <= _data.bracket.max ? 'visible' : 'hidden'; var visibility = bracket.min <= bracket.max ? 'visible' : 'hidden';
var yMin = valueToBracket(_data.bracket.min); var yMin = valueToBracket(bracket.min);
var yMax = valueToBracket(_data.bracket.max); var yMax = valueToBracket(bracket.max);
var ySize = yMax - yMin; var ySize = yMax - yMin;
var xMin = _width - _bracketSize; var xMin = _width - _bracketSize;
@ -243,6 +244,8 @@
visibility: visibility, visibility: visibility,
path: path path: path
}); });
_bracketTrans = bracket;
} }
else { else {
_elements.bracketPath = _canvas.path(path).attr({ _elements.bracketPath = _canvas.path(path).attr({
@ -330,7 +333,7 @@
_onValueChanged(_name, _data.value, _data.bracket); _onValueChanged(_name, _data.value, _data.bracket);
} }
animateIndicator(_valueAnimated, _data.value); animateIndicator(_valueTrans, _data.value);
} }
function animateIndicator(valueOld, valueNew) { function animateIndicator(valueOld, valueNew) {
@ -338,11 +341,11 @@
return; return;
} }
if (_animation !== null) { if (_indicatorAnim !== null) {
_animation.stop(); _indicatorAnim.stop();
} }
_animation = Snap.animate( _indicatorAnim = Snap.animate(
valueOld, valueOld,
valueNew, valueNew,
function(value) { function(value) {
@ -351,7 +354,30 @@
_easeTime, _easeTime,
mina.easeinout, mina.easeinout,
function() { function() {
_animation = null; _indicatorAnim = null;
}
);
}
function animateBracket(bracketOld, bracketNew) {
if (bracketOld.min === bracketNew.min && bracketOld.max === bracketNew.max) {
return;
}
if (_bracketAnim !== null) {
_bracketAnim.stop();
}
_bracketAnim = Snap.animate(
[bracketOld.min, bracketOld.max],
[bracketNew.min, bracketNew.max],
function(bracket) {
updateBracket({min: bracket[0], max: bracket[1]});
},
_easeTime,
mina.easeinout,
function() {
_bracketAnim = null;
} }
); );
} }
@ -424,7 +450,7 @@
if (_.has(data, 'value')) { if (_.has(data, 'value')) {
_data.value = data.value; _data.value = data.value;
animateIndicator(_valueAnimated, _data.value); animateIndicator(_valueTrans, _data.value);
} }
if (_.has(data, 'hints')) { if (_.has(data, 'hints')) {
_data.hints = data.hints; _data.hints = data.hints;
@ -432,7 +458,7 @@
} }
if (_.has(data, 'bracket')) { if (_.has(data, 'bracket')) {
_data.bracket = data.bracket; _data.bracket = data.bracket;
updateBracket(); animateBracket(_bracketTrans, _data.bracket);
} }
}; };