javascript動畫物件支援加速、減速、緩入、緩出的實現程式碼_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, attrget(elem ));
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; ib = changes[i].b;
c = changes[ i].c;
attr = changes[i].attr;
attribute.set(elem, attr, tween[easing](t, b, c, d));
if(d attribute.set(elem, attr, params[attr]);
callback();
return;
}
}
setTimeout(arguments.callee, fps);
}, fps);

} }; //by rentj1@163.com