简单动画原理

  function FX(){
    this.init.apply(this, arguments);
  }
  
  FX.prototype.init = function(animationFunction, opts) {
    this._animationFunction = animationFunction;
    this._duration = opts && opts.duration || 250;
    this._interval = opts && opts.interval || 40;
    this._tween = opts && opts.tween || function(delta) {   
        var x = 1 - delta,
            elasticity = 0.25,
            value = 1 - Math.pow(x, 4) + x * x * Math.sin(delta * delta * Math.PI * elasticity);
        return value  
    };
    this._onDone = opts && opts.onDone || function (){
      console &&  console.log('onDone');
    }
  }
  
  FX.prototype.start = function(reverse) {
    var self = this;
    this._playing = true;
    this._startT = new Date().getTime();
    this._reverse = reverse;
    this._onInterval();
    this._intervalID = setInterval(function (){
     self._onInterval.call(self);
    }, this._interval);
  }
  
  FX.prototype.stop = function() {
    this._playing = false;
    clearInterval(this._intervalID);
  }
  
  FX.prototype.isGoing = function() { return this._playing }
  
  FX.prototype._onInterval = function() {
    var deltaT = new Date().getTime() - this._startT,
       duration = this._duration;
    if (deltaT >= duration) {
      this.stop();
      this._animationFunction(this._tween(this._reverse ? 0 : 1))
      if (this._onDone) { this._onDone() }
      return
    }
    var delta = deltaT / duration;
    if (this._reverse) { delta = 1 - delta }
    this._animationFunction(this._tween(delta))
  }



 var fx= new FX(function (x){
   document.getElementById('testBox').style.left = x*300+'px';
 });

 document.getElementById('testBtn').onclick = function (){
     document.getElementById('testBox').style.left='0px'
    fx.start();

 };

　　

test

点我