一个简单的js动画效果代码

实现的功能:移动,暂停,恢复,停止.

未实现的功能:无法实现单位换算,不能实现颜色渐变(还有很多,有待完善...)

代码中的使用方法如下:

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; 
}

功能实现:

/* 简单动画方法 
* 未实现单位换算 
*/ 
var $M = function(obj){ 
var elem = ("string" === typeof obj )?document.getElementById(obj):obj; 
var _this = {},props = {},timeId,isBusy = false,isPause = false; 
var queue = [],_current; 
//直线运动算法 
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(初始值的单位和目标值的单位不相同需要处理) 
} 
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; 
}

参考地址:
https://3water.com/article/24309.htm