查看Tween算法的曲线

     最近在学习javascript动画的实现，自己写的时候用setInterval()来做，结果发现这个函数和setTimeOut一样，延时不准确，而且还要计算每次移动的距离，每次移动以后的偏差等一堆参数，够麻烦的。后来在网上发现了根据时间计算偏移量的方法，茅塞顿开啊。果然闭门造车造不出好车。

     然后就知道了Tween算法，本来想用Tween算法实现动画，结果看了半天Tween算法的资料。发现有人将Tween算法的曲线画出来，觉得很好玩。模仿的做了一个。修正了被参考者那里画曲线时有一些断开的现象。参考地址在文章最后。

TWeen类型:
Linear Quad Cubic Quart Quint Sine Expo Circ Elastic Back Bounce

ease类型:
easeIn easeOut easeInOut

 

这个是画线的代码，Tween算法网上有很多，找不到的话可以右键->查看源代码： 

function  $g(_canvas,fn){
   var  canvas  =  ( typeof  _canvas  ===   " string " ) ? document.getElementById(_canvas):_canvas;
   var  cache  =  [];
   var  width  =  canvas.clientWidth;
   var  height  =  canvas.clientHeight;
   var  _this  =  {};
   var  color  =   " red " ;
  
  _this.setColor  =   function (_color){
     if (_color){color  =  _color;}
     else  { return  color;}
  }
  
  _this.Draw  =   function (){
     var  y  =   0 ,_y  =   0 ;
     for ( var  x  =   0 ; x  <=  width; x ++ ){
      y  =  parseInt(fn(x, 0 ,height,width));
       // 补齐y轴坐标上的点
       if (Math.abs(y  -  _y)  >   1 ){
         var  flag  =  ((y  -  _y)  >   0 );
        flag ? _y ++ :_y -- ;
         while (_y  !=  y){
          createPoint(x,height  -  _y);
          flag ? _y ++ :_y -- ;
        }
      }
      
      createPoint(x,height  -  _y);
      _y  =  y;
    }
    paint();
     return  _this;
  }
  
   function  createPoint(x,y){
    cache.push( " <div style='width:1px; height:1px; font-size:1px;border-width:0px;margin:0px; padding:0px;  background-color: " + color + " ; position:absolute;left: "   +  x  +   " px; top: "   +  y  +   " px'></div> " );
  }
  
   function  paint(){
    canvas.innerHTML  =  cache.join( "" );
    cache  =  [];
  }
  
   return  _this;
}

 

 

 

参考地址：

http://greatghoul.javaeye.com/blog/612232
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
http://www.cnblogs.com/idche/archive/2010/06/13/1758006.html