後來發現還不錯。不如繼續寫下去。
這個版本基本上跟jquery的animate一樣了。
我是說效果基本上一樣了。（效率還沒測試過。）；
如果有專業測試人員 幫我測試下。
1：功能說明
兼容主流浏覽器。
1：支持回調函數；
2：支持級聯動畫調用；
3：支持delay動畫隊列延遲；
4：支持stop停止動畫；
5：支持opacity透明度變化；
6：支持+= -= *= /=操作；
7：支持單位操作(px, %);
2：使用說明
jelle(A).animate(B, C, D);
A:需要執行動畫的dom元素ID；
B:動畫的主要參數傳遞{key,val,key2,val2};比如{width:'100px',height:'+=100px',opacity:0.5},
opacity--透明度變化 支持+= -= *= /=操作。
C:動畫執行用時，以毫秒為單位；[可選 默認500毫秒];
D:回調函數;[可選]
3:方法說明
1:animate()方法
jelle('cc').animate({width:'100px'},300,function(){alert('完成')});// 是 cc 的寬度在300毫秒的時間變化到100px 動畫結束 彈出 ‘完成'
2:stop()方法
jelle('cc').stop();//停止正在 cc 對象上播放的動畫。
3：delay（）方法
jelle('cc').delay(1000).animate({width:'100px'});//cc 的寬度發生變化 將被延遲1秒執行。
我會一直把他完善下去。
代碼如下:
var jelle = function(id){
var $ = function(id){ return document.getElementById(id); },
elem = $(id),//對象
f = 0, _this = {}, lazy = 10, lazyque = 10,// f動畫計數器 lazy動畫延遲 lazyque隊列延遲
// 算子你可以改變他來讓你的動畫不一樣
tween = function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b},
// adv 用於+= -= *= /=操作
adv = function(val, b){
var va, re= /^([+-\\*\/]=)([-]?[\d.]+)/ ;
if (re.test(val)){
var reg = val.match(re);
reg[2] = parseFloat(reg[2]);
switch ( reg[1] ){
case '+=':
va = reg[2];
break;
case '-=':
va = -reg[2];
break;
case '*=':
va = b*reg[2] - b;
break;
case '/=':
va = b/reg[2] - b;
break;
}
return va;
}
return parseFloat(val) - b;
}
// elem.animate 讀取用於當前dom元素上的動畫隊列
elem.animate = elem.animate || [];
//stop 功能要使用的
jelle[id]= {};
jelle[id]['stop'] = true;
//alert(jelle[id]['stop'])
// 統一隊列入口 用於方便設置延遲，與停止
_this.entrance = function(fn, ags, lazytime){
//fn 調用函數 ags 參數 lazytime 延遲時間
setTimeout(function(){
fn(ags[0], ags[1], ags[2]);
}, (lazytime || 0));
}
// 停止動畫 此方法還不能用
_this.stop = function(){
jelle[id]['stop'] = false;
elem.animate.length=0;
$(id).animate.length=0;
return _this;
}
// 隊列操作
_this.queue = function(){
if (elem.animate && ++f == elem.animate[0].length){
f = 0;// 清空計數器
elem.animate[0].callback ? elem.animate[0].callback.apply(elem) : false;
// 判斷是否有動畫在等待執行
if (elem.animate.length > 1){
elem.animate[0].callback = elem.animate[1].callback;
elem.animate = $(id).animate || [];// 從dom對象上獲取最新動畫隊列
elem.animate.shift();// 清除剛執行完的動畫隊列
$(id).animate = elem.animate;// 把新的隊列更新到dom
var ea = elem.animate[0];
// 循環播放隊列動畫
for(var i = 0; i < ea.length; i++){
ea[i][0] === 'opacity' ? _this.entrance(_this.alpha, [ea[i][1], ea[i][2]], lazyque):
_this.entrance(_this.execution, [ea[i][0], ea[i][1], ea[i][2]], lazyque);
}
}else{
elem.animate.length = 0; // 隊列清楚
$(id).animate.length = 0; // 隊列清楚
}
}
}
//設置lazy方法，以後的隊列動畫延遲時間
_this.delay = function(val){
lazyque = val;
return _this;
}
//動畫變化
_this.execution = function(key, val, t){
//alert(val)
var s = (new Date()).getTime(), d=t || 500 ,
b = parseFloat(elem.style[key]) || 0 ,
c = adv(val, b) ,// adv用於設置高級操作比如 += -= 等等
un = val.match(/\d+(.+)/)[1];// 單位
(function(){
var t = (new Date()).getTime() - s;
if (t > d){
t = d;
elem.style[key] = parseInt(tween(t, b, c, d)) + un;
_this.queue(); // 操作隊列
return _this;
}
elem.style[key] = parseInt(tween(t, b, c, d)) + un;
jelle[id]['stop'] && setTimeout(arguments.callee, lazy);
// _this.entrance(arguments.callee,[1,1,1],lazy);
// arguments.callee 匿名函數遞歸調用
})();
}
// 入口
_this.animate = function(sty, t, fn){
// sty,t,fn 分別為 變化的參數key,val形式,動畫用時,回調函數
var len = elem.animate.length;// len查看動畫隊列長度
elem.animate[len] = [];
elem.animate[len].callback = fn;
//多key 循環設置變化
for(var i in sty){
elem.animate[len].push([i, sty[i], t]);
if(len == 0){
i == 'opacity' ? _this.entrance(_this.alpha, [sty[i], t], lazyque) :
_this.entrance(_this.execution, [i, sty[i], t], lazyque);
}
}
$(id).animate = elem.animate;//把新的動畫隊列添加到dom元素上
return _this;
}
// 透明度變化的代碼
_this.alpha = function(val, t){
var s = (new Date()).getTime(),
d = t || 500, b, c;
if( document.defaultView ){
b = document.defaultView.getComputedStyle(elem,null)['opacity'] || 1,
c = adv(val,b) * 100;
(function(){
var t = (new Date()).getTime() - s;
if(t > d){
t = d;
elem.style['opacity'] = tween(t, (100 * b), c, d) / 100;
_this.queue(); // 隊列控制
return _this;
}
elem.style['opacity'] = tween(t, (100 * b), c, d) / 100;
jelle[id]['stop'] && setTimeout(arguments.callee, lazy);
})()
}else{
b = elem.currentStyle['filter'] ?
(elem.currentStyle['filter'].match(/^alpha\(opacity=([\d\.]+)\)$/))[1]/100 : 1;
c = adv(val, b) * 100;
(function(){
var t = (new Date()).getTime() - s;
if (t > d){
t = d;
elem.style['filter']='alpha(opacity='+ tween(t, (100 * b), c, d) +')';
_this.queue(); // 隊列控制
return _this;
}
elem.style['filter'] = 'alpha(opacity='+ tween(t, (100*b) , c, d) +')';
jelle[id]['stop'] && setTimeout(arguments.callee, lazy);
})()
}
}
return _this;
}
代碼打包下載
程序可能每天都在修改。如果想要最新的ainimate 可以email聯系我。
上面的代碼已經不是最新的了。
這兩天又修正了幾個錯誤的地方。
本文來自博客園 jelle 博客 http://www.cnblogs.com/idche/