2 ms·
I made a simple tween function a few months ago that has served me very well. It modifies any property of an object that can be calculated using floating point
by sam_in_nyc 18y ago
I made a simple tween function a few months ago that has served me very well. It modifies any property of an object that can be calculated using floating point math (eg: it doesn't do hex colors). There's even a variable for what type of tween (1 = linear, 2 = forgot-the-word, 3 = cubic). Every line counts.
var tween = function(params, time, onFinished){
var setProperty = function(el, property, value, unit){
if (property=="style.opacity")
if (value==1) el.style.filter = "";
else el.style.filter = "alpha(opacity=" + value*100 + ")";
eval("el." + property + "='" + value + unit+ "'");
}
var start = function(){
var ticks = Math.ceil(time/10);
var getFn = function(percent){ return function(){go(percent);}; };
for (var i=1; i<=ticks; i++) setTimeout(getFn(i/ticks), i*10);
go(0);
}
var go = function(percent){
var tween = 3; var u = Math.pow(2, tween-1);
percent = percent < .5 ? u*Math.pow(percent, tween) : 1-u*Math.pow(1-percent, tween);
for (var i=0; i < params.length; i++){
var data = params[i];
var value = data.start + (data.end-data.start)*percent;
var unit = data.hasOwnProperty("unit") ? data.unit : '';
setProperty(data.element, data.property, value, unit);
}
if (percent==1 && onFinished) onFinished()
}
start();
}
//usage:
var props = [
{element: someElement, property: "style.left", start: 0, end: 100, unit: "px"}
];
tween(props, 450, function(){ alert('im done'); });