查看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