简易版的Tween

之前的Tween 类似,只是这个为简洁版:

/**
* 动画处理器(缓动效果)
* @param obj DOM对象
* @param prop 要改变的样式属性,如left(填opacity时,1表示不透明,0表示完全透明)
* @param v1 初始值(不带px)
* @param v2 终止值(不带px)
* @param opt Object 其他选项[可选]
* (duration:动画时长/毫秒, callback:动画结束时的回调, func:算子)
*/
var Tween = function(obj, prop, v1, v2, opt) {
var currentTime, interval, duration, result;
opt = opt || {};
opt.func = opt.func || function(t,b,c,d){
return c*(t/=d)*t*t*t + b;
};
currentTime = 0;
interval = 1000 / 60;
duration = (opt.duration || 1000) / interval;
(function _fn() {
result = opt.func(currentTime, v1, v2 - v1, duration);
if (prop == 'opacity') {
obj.style.opacity = result.toFixed(2);
obj.style.filter = 'alpha(opacity=' + Math.ceil(result * 100) + ')';
} else {
obj.style[prop] = Math.ceil(result) + 'px';
}
if (currentTime++ < duration) {
setTimeout(_fn, interval);
} else {
opt.callback && opt.callback();
}
})();
};
posted @ 2012-02-03 18:17  前端菜鸟  阅读(278)  评论(2编辑  收藏  举报