Skip to content

Instantly share code, notes, and snippets.

@5509
Created January 26, 2012 11:58
Show Gist options
  • Save 5509/1682444 to your computer and use it in GitHub Desktop.
Save 5509/1682444 to your computer and use it in GitHub Desktop.
アニメーションするやつ
function animate(elem, styles, duration, easing) {
var dfd = new Deferred(),
fps = undefined,
current_time = 0,
style_key = undefined,
start_value = undefined,
end_value = undefined,
pt = '',
rev = false,
diff_start = 0,
diff = undefined,
current_style = getComputedStyle(elem),
easing_func = {
swing: function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
}
};
_.each(styles, function(val, key) {
style_key = key;
start_value = current_style[key];
});
duration = duration * 1000;
fps = duration / 30;
easing = easing ? easing : 'swing';
end_value = styles[style_key];
if ( /top|margin|left/.test(style_key) ) {
if ( start_value === 'auto' ) start_value = 0;
start_value = parseFloat(start_value, 10);
end_value = parseFloat(start_value) + end_value;
pt = 'px';
} else {
start_value = parseFloat(start_value, 10);
}
if ( start_value > end_value ) {
rev = true;
diff = start_value - end_value;
} else {
diff = end_value - start_value;
}
(function() {
var res = easing_func[easing](current_time, diff_start, diff, fps),
value = (rev ? start_value - res : res);
elem.style[style_key] = value + pt;
current_time = current_time + 1;
if ( current_time > fps ) return;
setTimeout(arguments.callee, duration / fps);
}());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment