速度版运动框架

一、requestAnimationFrame
定时器做动画的缺点：有小小的误差；
请求动画帧（requestAnimationFrame）：
原理：在上一个动画执行完之后开始来进行下一个动画（中间不会产生等待时间）
样式类型：API、函数体
用法：接受一个函数来作为参数来回调函数
优点：很流畅，不会产生误差；会贴合浏览器的刷新频率，不会丢帧！
异步：定时器、动画帧都是回调函数，都属于异步；事件绑定；AJAX

var num = 0;
function fn(){
  console.log( num++ );
  requestAnimationFrame( fn );
}

二、cancelAnimationFrame

var num = 0,
  animation = null;
function fn(){
  console.log(num++);
  animation = requestAnimationFrame(fn);
}
fn();
document.onclick = function(){
  cancelAnimationFrame(animation);
}

三、兼容问题
请求动画帧/清除动画帧：不兼容IE9及其以下

window.requestAnimationFrame = window.requestAnimationFrame || function(fn){
  return setTimeout(fn, 1000/60);
};
window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;

四、速度版运动框架
初始值：width:100px;
目标值：width:500px;
变化量：每一帧走多少步，步长，比如每一帧增加5px，直到加到500px
使用到的参数：
对象（要进行改造的内容）
对象的属性：width
对象的属性值：100px
步长：2px

window.requestAnimationFrame = window.requestAnimationFrame || function(fn){
  return setTimeout(fn, 1000/60);
};
window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
var oBox = document.getElementById("box");
animation(oBox, "width", 100, 5);  //ele对象，attr属性，value属性值，step步长
function animation(ele, attr, value, step){
  var starAttr = parseFloat(getStyle(ele)[attr]),
  isDirection = starAttr > value;
  value = parseFloat(value);
  step = parseFloat(step);

/*
  初始值与目标值：
    初始值大于目标值的情况，再进行判断初始值是否小于等于目标值（步长为负）
      如果小于等于目标值，直接等于目标值
      如果不小于等于目标值，继续回调函数
    初始值小于目标值的情况，再进行判断初始值是否大于等于目标值（步长为正）
      如果大于等于目标值，直接等于目标值
      如果小于目标值，继续回调函数
*/
  if(isDirection){
    step = -step;
  }
  fn();
  function fn(){
    starAttr += step;
    if(isDirection ? starAttr <= value : starAttr >= value){
      starAttr = value;
    }else{
      requestAnimationFrame(fn);
    }
    ele.style[attr] = starAttr + "px";
   }
}
function getStyle(ele){
  return ele.currentStyle || getComputedStyle(ele);
}