快捷導(dǎo)航

javascript動(dòng)畫(huà)對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼

更新時(shí)間：2012年09月30日 21:01:29 作者：

javascript動(dòng)畫(huà)對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼，需要的朋友可以參考下

調(diào)用接口：

 
/** 
* @param elem {HTMLElement} 執(zhí)行動(dòng)畫(huà)的HTML元素 
* @param params {JSON} 動(dòng)畫(huà)執(zhí)行過(guò)過(guò)程中需要修改的HTML屬性 
* @param duration {Number} 可選，動(dòng)畫(huà)執(zhí)行時(shí)間，單位毫秒 
* @param easing {String} 可選，動(dòng)畫(huà)執(zhí)行的方式，緩入easeIn、緩出easeOut 
* @param callback {Function} 可選，動(dòng)畫(huà)執(zhí)行完成時(shí)的回調(diào)函數(shù) 
* @return 
*/ 
effect.animate(elem, params, duration, easing, callback); 

使用它用不了20行代碼就可以做一個(gè)產(chǎn)品圖片減速淡出、加速淡入的切換效果點(diǎn)擊這里查看演示效果

復(fù)制代碼代碼如下:

 
//輔助對(duì)象，讀/寫(xiě)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動(dòng)畫(huà)算法。 
* @param Number t: 動(dòng)畫(huà)已經(jīng)執(zhí)行的時(shí)間（實(shí)際上時(shí)執(zhí)行多少次/幀數(shù)） 
* @param Number b: 起始位置 
* @param Number c: 終止位置 
* @param Number d: 從起始位置到終止位置的經(jīng)過(guò)時(shí)間（實(shí)際上時(shí)執(zhí)行多少次/幀數(shù)） 
*/ 
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; 
} 
}; 
//動(dòng)畫(huà)對(duì)象 
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<changes.length; 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 