java模拟加速匀速减速_javascript动画对象支持加速、减速、缓入、缓出的实现代码...

调用接口：

/**

* @param elem {HTMLElement} 执行动画的HTML元素

* @param params {JSON} 动画执行过过程中需要修改的HTML属性

* @param duration {Number} 可选，动画执行时间，单位毫秒

* @param easing {String} 可选，动画执行的方式，缓入easeIn、缓出easeOut

* @param callback {Function} 可选，动画执行完成时的回调函数

* @return

*/

effect.animate(elem, params, duration, easing, callback);

使用它用不了20行代码就可以做一个产品图片减速淡出、加速淡入的切换效果点击这里查看演示效果

//辅助对象，读/写DOM元素属性

var attribute = {

get: function(elem, attr){

var val;

if(elem.currentStyle){

if(attr === "opacity") {

val = elem.filters.alpha[attr];

}else {

val = elem.currentStyle[attr];

}

}

else{

val = getComputedStyle(elem)[attr];

if(attr === "opacity") {

val = 100 * val;

}

}

return val;

},

set: function(elem, attr, val){

if(attr=='opacity'){

elem.style.filter = 'alpha(opacity='+ (val) +')';

elem.style.opacity = (val)/100;

}

else{

elem.style[attr] = val + 'px';

}

}

};

/*

* 描述: tween动画算法。

* @param Number t: 动画已经执行的时间(实际上时执行多少次/帧数)

* @param Number b: 起始位置

* @param Number c: 终止位置

* @param Number d: 从起始位置到终止位置的经过时间(实际上时执行多少次/帧数)

*/

var tween = {

//缓入

easeIn: function (t, b, c, d){

return c * (t/=d) * t + b;

},

//缓出

easeOut: function (t,b,c,d){

return -c * (t/=d) * (t-2) + b;

}

};

//动画对象

var effect = {

animate: function(elem, params, duration, easing, callback){

var dt = new Date().getTime(),

b = 0,

c = 0,

d = duration || 500,

fps = 1000/60;

var changes = [];

for(var attr in params){

b = parseFloat(attribute.get(elem, attr));

c = params[attr] - b;

changes.push({

attr: attr,

b: b,

c: c

});

}

easing = easing || "easeOut";

callback = callback || new Function;

setTimeout(function(){

var t = new Date().getTime() - dt;

var b, c, attr;

for(var i=0; i

b = changes[i].b;

c = changes[i].c;

attr = changes[i].attr;

attribute.set(elem, attr, tween[easing](t, b, c, d));

if(d <= t){

attribute.set(elem, attr, params[attr]);

callback();

return;

}

}

setTimeout(arguments.callee, fps);

}, fps);

}

};

//by rentj1@163.com