JS_animate 站在别人的肩膀上

/*
 * 相关参考地址 ease 函数 和 animate 函数的思想 http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html
 * 我做的只是简单的封装而已
 */
<style type="text/css">
.main{position:relative;width:960px;margin:50px auto 0 auto;height:100px;background:#CCC;}
.box_1{position:absolute;width:50px;height:50px;background:#000;top:0;left:0;}
.box_2{position:absolute;width:50px;height:50px;background:#F00;top:50px;left:0;}
</style>
<div class="main">
 <div class="box_1" id="box1"></div>
 <div class="box_2" id="box2"></div>
</div>
<script type="text/javascript">
/*----外置函数star----*/
var Class = {   
  create: function() {   
    return function() {                           
      this.initialize.apply(this, arguments);   
    }   
  }   
}
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
};
/*----外置函数end----*/
var animate = Class.create();
animate.prototype = {
    initialize:function(node,opat){
        this.node = node;
        this.opat = {
            begin:null,
            change:null,
            duration:500,
            ease:"bounce",
            field:"left",
            callback:function(){}
            };
        Object.extend(this.opat,opat||{});
        this.action();
        },
    ease:{
        easeOutBack: function(pos){
                    var s = 1.70158;
                    return (pos=pos-1)*pos*((s+1)*pos + s) + 1;
                }
                },
    requestAnimationFrame:function(){
        return window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); }
        },
    action:function(){
        var _this = this,
            _node = _this.node,
            _animate = _this.requestAnimationFrame(),
            _opat = _this.opat,
            _timeStar = new Date().getTime(),
            _endPos = _opat.begin + _opat.change,
            _ease = _this.ease[_opat.ease];
        _animate(function(){
            var _timeChange = new Date().getTime() - _timeStar,
                _opat_ = _opat,
                _node_ = _node,
                _ease_ = _ease,
                _timeDuration = _opat_.duration,
                _changePos = _ease_(_timeChange / _opat_.duration),
                _nextPos = _opat_.begin + Math.ceil(_changePos*_opat_.change);
            if(_timeChange >= _timeDuration){
                _node_.style[_opat_.field] = _endPos + "px";
                _opat_.callback();
                return
                }
            _node_.style[_opat_.field] = _nextPos + "px";
            _animate(arguments.callee);
            })
        }
    }
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.onclick = function(){
    new animate(this,{
        begin:box1.offsetLeft,
        change:500,
        field:"left",
        duration:1000,
        ease:"easeOutBack",
        callback:function(){
            console.log("动画完成!!");
            }
        });
    }
</script>