JavaScript缓动库

调用很简单
Readkid.motion.tween(target,duration, vars)
target: 要缓动的DOM对象
duration: 缓动持续时间
var: 参数集合

参数详细:
可以是你要缓动的style参数,比如top, left, width, 也可以是TweenKid定义的缓动滤镜，如alpha, color等,你也可以自己添加缓动滤镜 在Readkid.motion.InfoPlugin包里。
ease:Function 缓动方式 我集成了比较少的几种缓动公式(Base, Back.easeOut, Back.easeIn, Back.easeInOut, Bounce.easeOut, Bounce.easeIn, Bounce.easeInOut)，如果你需要更多，可以自己添加。
onComplete:Function 当缓动完成时调用。
onUpdate:Function 当缓动更新时调用。

下面是完整js缓动源码：

if (typeof Readkid == "undefined")
 Readkid = {}
 
//获取样式
Readkid.getStyle = function(elem, name) {
 if (!elem) return null;
 var result = null;
  if(elem.style[name]){
  result =  elem.style[name];
   }else if(elem.currentStyle){
     result = elem.currentStyle[name];
 }else if(window.getComputedStyle){
  result =  window.getComputedStyle(elem,null)[name];
    }
 return result;
}
Readkid.motion = {
 tweenManager: {
  addTween:function(tweenkid) {
   if (!Readkid.motion._tweens)
    Readkid.motion._tweens = {};
   if (!Readkid.motion.count)
    Readkid.motion.count = 0;
   Readkid.motion.count++;
   Readkid.motion._tweens[tweenkid.target.guid] = tweenkid;
   if (!Readkid.motion.runing)  {
    Readkid.motion.run();
   }
  },
  clear: function(tweenkid) {
   delete Readkid.motion._tweens[tweenkid.target.guid];
   if (--Readkid.motion.count  == 0) {
    Readkid.motion.norun();
   }
  }
 },
 TweenInfo: function(target, propName, propValue) {
  if (!Readkid.motion.InfoPlugin[propName]) {
   return new Readkid.motion.InfoPlugin.base(target, propName, propValue);
  } else {
   return new Readkid.motion.InfoPlugin[propName](target, propName, propValue);
  }
 },
 InfoPlugin: {
  //自动宽高
  height: function(target, propName, propValue) {
   target.style.overflow = "hidden";
   this.propName = propName;
   var start = parseInt(Readkid.getStyle(target, propName));
   var end = propValue;
   if (isNaN(start))
    start = target.offsetHeight;
   this.update = function(change) {
    var v = start + (end - start) * change;
    
    target.style.height = (v > 0 ? v : 0) + "px";
   }
  },
  //背景颜色
  bgColor: function(target, propName, propVaule) {
   return new Readkid.motion.InfoPlugin.color(target, "backgroundColor", propVaule);
  },
  //颜色滤镜
  color :function(target, propName, propValue) {
   this.propName = propName;
   var start = Readkid.getStyle(target, propName);
   var end = {r:propValue >> 16, g:propValue >> 8 & 0xFF, b:propValue & 0xFF};
   var m = /rgb\((\d+), (\d+), (\d+)\)/.exec(start);
   if (m) {
    start = {r:m[1]*1, g:m[2]*1, b:m[3]*1}
   } else {
    if (start.indexOf("#") > -1)  {
     start = start.replace("#", "");
     if (start.length == 3)
      start = start.substr(0,1) + start.substr(0,1) + start.substr(1,1) + start.substr(1,1) + start.substr(2,1) + start.substr(2,1);
     start = eval("0x" + start);
     start = {r:start >> 16, g: start >> 8 & 0xFF, b:start &0xFF};
    }else
     start = {r:255, g:255, b:255};
   }
   function to(r, g,b) {
    var n = (check(r) << 16 | check(g) << 8 | check(b)).toString(16);
    for (var i=6-n.length; i>0;i--) {
     n = "0" + n;
    }
    return  "#" + n;
   };
   function check(c) {
    if (c < 0)
     c = 0;
    else if (c > 255)
     c = 255;
    return c;
   };
   this.update = function(change) {
    var r = start.r + (end.r - start.r) * change;
    var g = start.g + (end.g - start.g) * change;
    var b = start.b + (end.b - start.b) * change;
    
    target.style[propName] = to(r, g, b);
   }
  },
  //基本滤镜
  base: function(target, propName, propValue) {
   this.propName = propName;
   var start = parseInt(Readkid.getStyle(target, propName));
   var end = propValue;
   if (isNaN(start))
    start = 0;
   this.update = function(change) {
    target.style[propName] = start + (end - start) * change + "px";
   }
  },
  //透明滤镜
  alpha: function(target, propName, propValue) {
   this.propName = "opacity";
   var start;
   if (Readkid.Browser.msie) {
    var m = /.*?alpha\(opacity=(\d+)\).*?/.exec(Readkid.getStyle(target, "filter"));
    start = (m ? m[1] : 100)/100;
   }
   if (start == null)
    start = Number(Readkid.getStyle(target, "opacity"));
   
   if (start == null)
    start = 0;
   
   var end = propValue;
   this.update = function(change) {
    var v = start + (end - start) * change;
    if (Readkid.Browser.msie) {
     target.style.filter = "alpha(opacity="+ v * 100 +")";
    } else {
     target.style.opacity = v;
    }
   }
  }
 },
 TweenKid: function(target, duration, vars) {
  if (!Readkid.motion.guid)
   Readkid.motion.guid = 1;
  if (!target.guid)
   target.guid = Readkid.motion.guid++;
  var onComplete = vars.onComplete || function(){};
  var onUpdate = vars.onUpdate || function(){};
  this.target = target;
  var infos = [];
  var _duration = duration;
  var startTime = (new Date().getTime());
  var easeing = vars.ease || Readkid.motion.ease.Base;
  for (var prop in vars) {
   infos.push(Readkid.motion.TweenInfo(target, prop, vars[prop]));
  }
  Readkid.motion.tweenManager.addTween(this);
  this.kill = function(auto) {
   if (auto)
    this.render(startTime + _duration * 1000);
   else
    Readkid.motion.tweenManager.clear(this);
  };
  this.render = function(time) {
   onUpdate();
   var time = (time - startTime) * .001;
   if (time >= _duration) {
    time = _duration;
    Readkid.motion.tweenManager.clear(this);
    onComplete();
   }
   var fac = easeing(time, 0, 1, _duration);
   for (var i=0; i<infos.length; i++) {
    infos[i].update(fac);
   }
  }
 },
 tween:function(target,duration, vars) {
  return new Readkid.motion.TweenKid(target,duration, vars);
 },
 killAll: function(auto) {
  for (var t in Readkid.motion._tweens) {
   Readkid.motion._tweens[t].kill(auto);
  }
 },
 run: function() {
  Readkid.motion.runing = true;
  Readkid.motion._interval = setInterval(Readkid.motion.step, 33);
 },
 norun:function() {
  if (Readkid.motion.runing) {
   Readkid.motion.runing = false;
   clearInterval(Readkid.motion._interval);
  }
 },
 step: function() {
  var timer = (new Date()).getTime();
  for (var t in Readkid.motion._tweens) {
   Readkid.motion._tweens[t].render(timer);
  }
 },
 //缓动公式
 ease: {
  Base: function(t, b, c, d) {
   return -c * (t /= d) * (t - 2) + b;
  },
  Back: {
   easeOut: function(t, b, c, d) {
    return c*((t=t/d-1)*t*((1.70158+1)*t + 1.70158) + 1) + b;
   },
   easeIn: function(t, b, c, d)  {
    return c*(t/=d)*t*((1.70158+1)*t - 1.70158) + b;
   },
   easeInOut: function(t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*(t*t*(((1.70158 * (1.525))+1)*t - 1.70158)) + b;
    return c/2*((t-=2)*t*(((1.70158 * (1.525))+1)*t + 1.70158) + 2) + b;
   }
  },
  Bounce: {
   easeIn: function(t, b, c, d) {
    return c - Readkid.motion.ease.Bounce.easeOut(d-t, 0, c, d) + b;
   },
   easeOut: function(t, b, c,d) {
    if ((t/=d) < (1/2.75)) {
     return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
     return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
     return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
     return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
   },
   easeInOut: function(t, b, c, d) {
    if (t < d/2) return Readkid.motion.ease.Bounce.easeIn (t*2, 0, c, d) * .5 + b;
    else return Readkid.motion.ease.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
   }
  }
 }
}

演示例子请看下一页。