快捷導(dǎo)航

一個(gè)簡(jiǎn)單的js動(dòng)畫效果代碼

更新時(shí)間：2010年07月20日 01:23:30 作者：

前段時(shí)間為了做動(dòng)畫,學(xué)習(xí)了一下tween算法的使用,這幾天根據(jù)tween算法,然后根據(jù)各種材料參考,做了一個(gè)簡(jiǎn)單的動(dòng)畫函數(shù).

實(shí)現(xiàn)的功能:移動(dòng),暫停,恢復(fù),停止.

未實(shí)現(xiàn)的功能:無法實(shí)現(xiàn)單位換算,不能實(shí)現(xiàn)顏色漸變(還有很多,有待完善...)

代碼中的使用方法如下:

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

 
var $m = $M("divAnimate"); 

_("btnAnimate").onclick = function(){ 
this.disabled = true; 
var that = this; 
$m.animate({left:"300px",top:"100px",width:"300px", height:"200px",opacity:0.3},{duration:5000,easing:Tween.Back.easeInOut}).delay(200) 
.animate({left:"50px",top:"300px",width:"150px",height:"100px",opacity:0.8},{duration:2000,easing:Tween.Elastic.easeInOut, 
callback:function(){ 
that.disabled = false; 
} 
}); 
} 
_("btnPause").onclick = function(){ 
$m.pause(); 
this.disabled = true; 
_("btnResume").disabled = false; 
} 
_("btnResume").disabled = true; 
_("btnResume").onclick = function(){ 
$m.resume(); 
this.disabled = true; 
_("btnPause").disabled = false; 
} 

_("btnStop").onclick = function(){ 
$m.stop(); 
_("btnAnimate").disabled = false; 
} 

功能實(shí)現(xiàn):

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

 
/* 簡(jiǎn)單動(dòng)畫方法 
* 未實(shí)現(xiàn)單位換算 
*/ 
var $M = function(obj){ 
var elem = ("string" === typeof obj )?document.getElementById(obj):obj; 
var _this = {},props = {},timeId,isBusy = false,isPause = false; 
var queue = [],_current; 
//直線運(yùn)動(dòng)算法 
function Linear(t,b,c,d){ return c*t/d + b;} 
function setCss(className,value){ 
if(className == "opacity"){ 
if(document.defaultView){ 
elem.style["opacity"] = value; 
} else { 
elem.style["filter"] = 'alpha(opacity=' + 100 * value + ')'; 
} 
} else { 
elem.style[className] = value; 
} 
} 
function getCss(className){ 
if(className == "opacity"){ 
var ret = ""; 
if(document.defaultView){ 
ret = document.defaultView.getComputedStyle(elem,null)['opacity'] || 1; 
} else { 
ret = elem.currentStyle['filter']?(elem.currentStyle['filter'].match(/^alpha\(opacity=([\d\.]+)\)$/))[1]/100 : 1; 
} 
return ret.toString(); 
} else { 
return elem.style[className].toString(); 
} 
} 

function _move(params,easing,st,ht,callback){ 
var t = ((new Date()).getTime() - st); 
_current.t = t; 
if(isPause){return;} 
easing = easing||Linear; 
ht = ht || 500; 
for(var p in params){ 
if(!props[p]){ 
var iv = parseFloat(getCss(p)) || 0; 
var ev = parseFloat(params[p]); 
props[p] = { 
iv:iv, 
iu:iv?getCss(p).substring(iv.toString().length):null, 
ev:ev, 
eu:params[p].toString().substring(ev.toString().length) 
} 
//TODO(初始值的單位和目標(biāo)值的單位不相同需要處理) 
} 
if(t >= ht){t = ht;} 
var nv = easing(t,props[p].iv,(props[p].ev - props[p].iv),ht); 
nv = parseFloat(nv); 
setCss(p,nv + props[p].eu); 
} 

if(t < ht){ 
timeId = setTimeout(function(){ 
_move(params,easing,st,ht,callback); 
},13); 
} else { 
props = {}; 
isBusy = false; 
if(callback){ 
callback(); 
} 
run(); 
} 
} 
function run(){ 
if(!isBusy && queue.length != 0){ 
var o = queue.shift(); 
var _delay = 0; 
while(o && o.delay){ 
_delay += o.delay; 
o = queue.shift(); 
} 
if(o){ 
_current = o; 
isBusy = true; 
setTimeout(function(){ 
var st = (new Date()).getTime(); 
_move(o.params,o.options.easing,st,o.options.duration,o.options.callback); 
},_delay); 
} 
} 
} 

var _this = { 
animate:function(params,options){ 
queue.push({params:params,options:options}); 
isPause = false; 
run(); 
return _this; 
}, 
delay:function(ms){ 
queue.push({delay:ms}); 
return _this; 
}, 
pause:function(){ 
isPause = true; 
return _this; 
}, 
resume:function(){ 
if(_current){ 
var o = _current; 
isPause = false; 
var st = (new Date()).getTime() - _current.t; 
_move(o.params,o.options.easing,st,o.options.duration,o.options.callback); 
return _this; 
} 
}, 
stop:function(){ 
isPause = true; 
isBusy = false; 
queue = []; 
props = {}; 
return _this; 
} 
}; 
return _this; 
} 